如何处理/选择所有复选框- ReactJS

import React, { useState } from 'react';

const Checkbox = ({ value, onChange }) => {
  return (
    <label>
      <input type="checkbox" value={value} onChange={onChange} />
      {value}
    </label>
  );
};

const App = () => {
  const [selectedCheckboxes, setSelectedCheckboxes] = useState([]);

  const handleCheckboxChange = (event) => {
    const value = event.target.value;
    if (event.target.checked) {
      setSelectedCheckboxes([...selectedCheckboxes, value]);
    } else {
      setSelectedCheckboxes(selectedCheckboxes.filter((checkbox) => checkbox !== value));
    }
  };

  return (
    <div>
      <Checkbox value="Option 1" onChange={handleCheckboxChange} />
      <Checkbox value="Option 2" onChange={handleCheckboxChange} />
      <Checkbox value="Option 3" onChange={handleCheckboxChange} />

      <h3>Selected Options:</h3>
      {selectedCheckboxes.map((checkbox) => (
        <p key={checkbox}>{checkbox}</p>
      ))}
    </div>
  );
};

export default App;