Is there a way to bold a selected word within a Material-UI Textfield element?

Question

I want to create a function that bold only selcted input text inside mui text-field mui component when clicked or focus e.g.

The ultimate solution for me was to add some text editor with bubble theme for any text-field mui component, but any text editor i tried can't fit mui ...(such as react-quilljs, mui-rte)

And even I tried to create bold functino by myself - It bold all input text and not only the selected text

Here's my code:

import './About.css';
import React,{useState, useRef} from 'react';

import TextField from '@mui/material/TextField';
import { useQuill } from 'react-quilljs';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';


const About = () => {

  const [txt,setTxt] = useState('');
  const [isShown, setIsShown] = useState(false);


  // should use that for some bold function
  const selection = window.getSelection().toString();
 

  // bold only label text that we choose before
  const boldTextParser = (text) => {
    let i = 0;
    let l = 0;
    let renderables = [];
    let boldtext = '';
  
    for (i = 0; i < text.length; i += 1) {
      if (text[i] === ' ') {
        renderables.push(text[i]);
  
        if (text[i + 1] === '(') {
        // hold boldtext in a variable
          let isBoldTextFound = false;
          while (!isBoldTextFound) {
            for (l = i + 2; l < text.length; l += 1) {
              if (text[l] !== ')') {
                boldtext = boldtext.concat(text[l]);
              } else if (text[l] === ')') {
                isBoldTextFound = true;
                break;
              }
            }
          }
          // put bold text in rendables and update position in string
          renderables.push(
            <strong>
              {boldtext}
            </strong>,
          );
          // reset variables
          boldtext = '';
          i = l + 1;
        }
      }
      renderables.push(text[i]);
    }
    return renderables;
  };

  const handleClick = (event) => {

    // How to bring those line to work together ?
    const selection = window.getSelection().toString();
    event.target.style.fontWeight = 'bold';

    console.log(selection);
   
    setIsShown(current => !current);
  };
 
  const navigate = useNavigate();

  const theme = 'bubble';
  const modules = {
    toolbar: ['bold', 'italic', 'underline', 'link'],
  };
  const formats = ['bold', 'italic', 'underline', 'strike'];
  const placeholder = 'type...';
  const { quillRef } = useQuill({ theme, modules, formats, placeholder });

  return (
    <>
        
        <div className='aboutContainer'>

          <TextField
            type="text"
            name="fullName"
            
            required 
            multiline
            placeholder='Full Name'
            className='pdfFonts'
            onDoubleClick={handleClick}
       
            value={txt}
            onChange={(e)=> setTxt(e.target.value + selection)}
            
          />

          <TextField onChange={(e)=> setTxt(e.target.value)} value={boldTextParser(selection)} />

          
       </div>
    </>
  )
}

export default About;