如何自动聚焦语义ui react下拉列表中的输入

import React, { useState } from 'react';

const Dropdown = () => {
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);

  const handleFocus = () => {
    // 在输入框获得焦点时触发的逻辑
    // 可以在这里请求后端API获取下拉列表的选项数据
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
    // 在用户输入时更新inputValue的值
    // 可以在这里实现自动聚焦的逻辑
  };

  const handleSelectOption = (option) => {
    setInputValue(option);
    // 在用户点击某个选项时更新inputValue的值
    // 可以在这里关闭下拉列表
  };

  const filteredOptions = options.filter((option) =>
    option.toLowerCase().includes(inputValue.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onFocus={handleFocus}
        onChange={handleChange}
      />
      <ul>
        {filteredOptions.map((option) => (
          <li key={option} onClick={() => handleSelectOption(option)}>
            {option}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Dropdown;