React/Redux组件，需要根据下拉选择填充一定数量的字段

import React, { useState } from 'react';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState('');
  const [fields, setFields] = useState([]);

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
    setFields(Array.from({ length: parseInt(event.target.value) }, (_, index) => `Field ${index + 1}`));
  };

  const handleFieldChange = (index, event) => {
    const updatedFields = [...fields];
    updatedFields[index] = event.target.value;
    setFields(updatedFields);
  };

  return (
    <div>
      <select value={selectedOption} onChange={handleOptionChange}>
        <option value="">Select an option</option>
        <option value="1">1 field</option>
        <option value="2">2 fields</option>
        <option value="3">3 fields</option>
      </select>

      {fields.map((field, index) => (
        <input key={index} value={field} onChange={(event) => handleFieldChange(index, event)} />
      ))}
    </div>
  );
};

export default MyComponent;