ReactJS存在复选框筛选问题

import React, { useState } from 'react';

const CheckboxFilter = () => {
  const [checkboxes, setCheckboxes] = useState({
    option1: false,
    option2: false,
    option3: false,
  });

  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckboxes((prevState) => ({
      ...prevState,
      [name]: checked,
    }));
  };

  const filterData = (data) => {
    return data.filter((item) => {
      if (checkboxes.option1 && item.option === 'option1') {
        return true;
      }
      if (checkboxes.option2 && item.option === 'option2') {
        return true;
      }
      if (checkboxes.option3 && item.option === 'option3') {
        return true;
      }
      return false;
    });
  };

  // 假设data是需要筛选的数据
  const data = [
    { option: 'option1', value: 'Value 1' },
    { option: 'option2', value: 'Value 2' },
    { option: 'option3', value: 'Value 3' },
  ];

  const filteredData = filterData(data);

  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="option1"
          checked={checkboxes.option1}
          onChange={handleCheckboxChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="checkbox"
          name="option2"
          checked={checkboxes.option2}
          onChange={handleCheckboxChange}
        />
        Option 2
      </label>
      <label>
        <input
          type="checkbox"
          name="option3"
          checked={checkboxes.option3}
          onChange={handleCheckboxChange}
        />
        Option 3
      </label>

      <ul>
        {filteredData.map((item) => (
          <li key={item.option}>{item.value}</li>
        ))}
      </ul>
    </div>
  );
};

export default CheckboxFilter;