如何在select-react中单击other时显示输入字段

import React, { useState } from 'react';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [showInput, setShowInput] = useState(false);

  // 其他选项被选择时的处理函数
  const handleOptionSelect = (option) => {
    setSelectedOption(option);
    if (option === 'other') {
      setShowInput(true);
    } else {
      setShowInput(false);
    }
  };

  return (
    <div>
      <select value={selectedOption} onChange={(e) => handleOptionSelect(e.target.value)}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="other">Other</option>
      </select>
      {showInput && <input type="text" placeholder="Enter other option" />}
    </div>
  );
};

export default MyComponent;