如何在react原生函数组件中制作动态选择器？

import React, { useState } from 'react';

function DynamicSelector() {
  // 定义选项数组
  const options = ['Option 1', 'Option 2', 'Option 3'];

  // 使用useState管理选中的值
  const [selectedOption, setSelectedOption] = useState(options[0]);

  // 处理选择变化的函数
  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label htmlFor="dynamic-selector">Choose an option:</label>
      <select id="dynamic-selector" value={selectedOption} onChange={handleChange}>
        {options.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
      <p>You selected: {selectedOption}</p>
    </div>
  );
}

export default DynamicSelector;