如何在React中显示自动完成文本字段中的选定值？

import React, { useState } from 'react';

const AutocompleteTextField = () => {
  const [inputValue, setInputValue] = useState('');
  const [selectedValue, setSelectedValue] = useState('');

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

  const handleOptionSelect = (value) => {
    setSelectedValue(value);
  };

  const options = ['Option 1', 'Option 2', 'Option 3']; // 可以是从服务器获取的动态数据

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
      />
      {inputValue && (
        <ul>
          {options
            .filter((option) =>
              option.toLowerCase().includes(inputValue.toLowerCase())
            )
            .map((option) => (
              <li key={option} onClick={() => handleOptionSelect(option)}>
                {option}
              </li>
            ))}
        </ul>
      )}
      <p>Selected value: {selectedValue}</p>
    </div>
  );
};

export default AutocompleteTextField;