I'm building a simple interface where user enters an input in textarea and a search item in an input. Output should highlight substrings of text provided in the search item area.

const Highlighter = () => {
  const [myPara, setMyPara] = useState("");
  const [searchTerm, setSearchTerm] = useState("");
  const [caseSensitive, setCaseSensitive] = useState(true);
  
  const onUpdateText = (event) => {
    setMyPara(event.target.value);
  }
  
  const onUpdateSearch = (event) => {
    setSearchTerm(event.target.value);
    console.log(caseSensitive)
  }
  
  const onUpdateCaseSensitive = (event) => {
    setCaseSensitive(!caseSensitive)
    console.log(caseSensitive)
  }
  
  const getHighlightedText = (toHighlight) => {
    const myText = myPara.split('');
    const searchString = toHighlight.split('');
    
    return (
      <span>
        {myText.filter(String).map((part, i) => {
          return part.includes(searchString) ? (
            <mark key={i}>{part}</mark>
          ) : (
            <span key={i}>{part}</span>
          );
        })}
      </span>
    );
  }
  
  return (
    <>
      <textarea data-testid="source-text" value={myPara} onChange={onUpdateText} />
      <br/>
      <input data-testid="search-term" value={searchTerm} onChange={onUpdateSearch}  />
      <br/>
      case sensitive? <input type="checkbox" data-testid="case-sensitive" defaultChecked={true} onChange={onUpdateCaseSensitive}  />
      <br/>
      <div data-testid="result">{getHighlightedText(searchTerm)}</div>
    </>
  );
};

export default Highlighter;

My attempt is as above. However it is not highlighting any string whatsoever. Can anybody help me spot the error?

Thanks.