如何选择React中的所有复选框？

import React, { useState } from 'react';

const CheckboxList = () => {
  const [items, setItems] = useState([
    { id: 1, name: 'Item 1', checked: false },
    { id: 2, name: 'Item 2', checked: false },
    { id: 3, name: 'Item 3', checked: false }
  ]);

  const handleCheckboxChange = (id) => {
    setItems(prevItems =>
      prevItems.map(item =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  const handleSelectAll = () => {
    const allChecked = items.every(item => item.checked);
    setItems(prevItems =>
      prevItems.map(item => ({ ...item, checked: !allChecked }))
    );
  };

  return (
    <div>
      <button onClick={handleSelectAll}>
        {items.every(item => item.checked) ? 'Deselect All' : 'Select All'}
      </button>
      <ul>
        {items.map(item => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={() => handleCheckboxChange(item.id)}
            />
            {item.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CheckboxList;