如何在react原生中创建可搜索的droplist来打开特定的屏幕？

import React, { useState } from 'react';

const ScreenSelector = () => {
  const [options, setOptions] = useState([
    'Screen 1',
    'Screen 2',
    'Screen 3',
    'Screen 4',
  ]);
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = (event) => {
    setSearchTerm(event.target.value);
  };

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

  const handleOpenScreen = (screen) => {
    // 在这里实现打开特定屏幕的逻辑
    console.log(`打开屏幕：${screen}`);
  };

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      <select>
        {filteredOptions.map((option) => (
          <option key={option} value={option} onClick={() => handleOpenScreen(option)}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
};

export default ScreenSelector;