如何计算React功能组件中选中的复选框？

import React, { useState } from 'react';

const CheckboxComponent = () => {
  const [checkboxes, setCheckboxes] = useState([]);

  // 复选框选中状态改变时的处理函数
  const handleCheckboxChange = (event) => {
    const { name, checked } = event.target;
    setCheckboxes((prevCheckboxes) => ({
      ...prevCheckboxes,
      [name]: checked,
    }));
  };

  // 计算选中的复选框数量
  const calculateSelectedCheckboxes = () => {
    return Object.values(checkboxes).filter((isChecked) => isChecked).length;
  };

  return (
    <div>
      <input
        type="checkbox"
        name="checkbox1"
        checked={checkboxes.checkbox1 || false}
        onChange={handleCheckboxChange}
      />
      <label htmlFor="checkbox1">复选框1</label>

      <input
        type="checkbox"
        name="checkbox2"
        checked={checkboxes.checkbox2 || false}
        onChange={handleCheckboxChange}
      />
      <label htmlFor="checkbox2">复选框2</label>

      <p>选中的复选框数量：{calculateSelectedCheckboxes()}</p>
    </div>
  );
};

export default CheckboxComponent;