无法在react本机的multipleselect中获取name值

import React, { useState } from 'react';

const MultipleSelect = () => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleOptionChange = (event) => {
    const optionName = event.target.name;
    const isChecked = event.target.checked;

    if (isChecked) {
      setSelectedOptions([...selectedOptions, optionName]);
    } else {
      setSelectedOptions(selectedOptions.filter((name) => name !== optionName));
    }
  };

  return (
    <div>
      <label>
        <input type="checkbox" name="option1" onChange={handleOptionChange} />
        Option 1
      </label>
      <label>
        <input type="checkbox" name="option2" onChange={handleOptionChange} />
        Option 2
      </label>
      <label>
        <input type="checkbox" name="option3" onChange={handleOptionChange} />
        Option 3
      </label>
      {/* 其他选项... */}
    </div>
  );
};

export default MultipleSelect;