如何在Reactjs中应用自动提示列表中的突出显示匹配字符？

import React, { useState } from 'react';

const AutoComplete = () => {
  const [inputValue, setInputValue] = useState('');
  const [suggestions, setSuggestions] = useState([]);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);

    // 这里假设suggestions是自动提示列表的数据
    const filteredSuggestions = suggestions.filter((item) =>
      item.toLowerCase().includes(value.toLowerCase())
    );
    setSuggestions(filteredSuggestions);
  };

  const handleSuggestionClick = (value) => {
    setInputValue(value);
    setSuggestions([]);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      <ul>
        {suggestions.map((item) => (
          <li key={item} onClick={() => handleSuggestionClick(item)}>
            {item.replace(
              new RegExp(`(${inputValue})`, 'gi'),
              '<strong>$1</strong>'
            )}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AutoComplete;