Implementing found value highlighting in React?

Question

React

Hello everyone, there is a moment that I do not know how to solve.

filteredMessages - a filtered array with objects that match the search.

const filteredMessages = useMemo(() => {
    if (history) {
      return history.filter(item => item.text.toLocaleLowerCase().includes(findText?.toLowerCase().trim()));
    }
    return null;
  }, [findText, history]);

Next, I map this array

<ul>
              {filteredMessages.map(message => (
                <li key={message.text + Math.random()}>
                  <span>{message.text}</span>
                </li>
              ))}
            </ul>

Question: How can I do that, in addition to displaying the data I need in the map - when entering a character (or word) into the input (search), if this character or word is found, highlight it.

Answer 1

https://jsfiddle.net/tjcaxn58/1/