如何使用React管理复选框过滤？

import React, { useState } from 'react';

const CheckboxFilter = ({ data }) => {
  const [selectedOptions, setSelectedOptions] = useState([]);

  const handleCheckboxChange = (option) => {
    if (selectedOptions.includes(option)) {
      setSelectedOptions(selectedOptions.filter((item) => item !== option));
    } else {
      setSelectedOptions([...selectedOptions, option]);
    }
  };

  const filteredData = data.filter((item) =>
    selectedOptions.includes(item.option)
  );

  return (
    <div>
      {data.map((item) => (
        <label key={item.option}>
          <input
            type="checkbox"
            value={item.option}
            checked={selectedOptions.includes(item.option)}
            onChange={() => handleCheckboxChange(item.option)}
          />
          {item.label}
        </label>
      ))}
      <ul>
        {filteredData.map((item) => (
          <li key={item.id}>{item.label}</li>
        ))}
      </ul>
    </div>
  );
};

export default CheckboxFilter;