如何让我的组件在React中计算复选框值的总和？

import React, { useState } from 'react';

function CheckboxComponent(props) {
  const { value, onChange } = props;

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

function ParentComponent() {
  const [checkboxValues, setCheckboxValues] = useState([]);
  const [total, setTotal] = useState(0);

  const handleCheckboxChange = (event) => {
    const value = parseInt(event.target.value);
    const isChecked = event.target.checked;

    if (isChecked) {
      setCheckboxValues([...checkboxValues, value]);
    } else {
      setCheckboxValues(checkboxValues.filter((val) => val !== value));
    }
  };

  useEffect(() => {
    const sum = checkboxValues.reduce((acc, curr) => acc + curr, 0);
    setTotal(sum);
  }, [checkboxValues]);

  return (
    <div>
      <CheckboxComponent value={1} onChange={handleCheckboxChange} />
      <CheckboxComponent value={2} onChange={handleCheckboxChange} />
      <CheckboxComponent value={3} onChange={handleCheckboxChange} />
      <CheckboxComponent value={4} onChange={handleCheckboxChange} />
      <CheckboxComponent value={5} onChange={handleCheckboxChange} />

      <p>Total: {total}</p>
    </div>
  );
}

export default ParentComponent;