How to highlight a word on mouseover in text in a React app

How to highlight a word on mouseover in text in a React app

const text = data[data.length - 1] !== undefined ? data[data.length - 1].taskText : null;

 const [hilightWord, setHilightWord] = useState(false);

  const hightlight = (text, hilightWord) => {
    if (!hilightWord) return text;

    const regex = new RegExp(`(${hilightWord})`, "gi");

    return text.split(regex).map((substring, i) => {
      return (
        <span className={styles.highlight} key={i}>
          {substring}
        </span>
      );
    });
  };


<p className={styles.text} onMouseMove={() => setHilightWord(true)} onMouseLeave={() => setHilightWord(false)}>{hightlight(text, hilightWord)}</p>