Javascript 选中多个复选框后取消选中复选框

再次单击复选框时取消选中复选框需要帮助。现在，选择了多个复选框，并将其checkeditem返回到父组件。但是返回的checkedItems不包含上次选中的复选框的值。 以下是我的代码：

import React, { useState, useEffect } from "react";

function Checkbox({ form, handleReturn, data }) {
  const [checkedItems, setCheckedItems] = useState({});

  const handleChange = (event) => {
    setCheckedItems({
      ...checkedItems,
      [event.target.id]: event.target.id,
    });
    handleReturn(Object.keys(checkedItems));
  };

  return (
    <div className="p-3 ">
      <h3 className="text-white text-shadow mt-4">{form.label}</h3>
      <h6 className="text-white text-shadow mt-4">{form.description}</h6>
      <div
        className="row px-4 text-white text-shadow mt-4">
        {form.options && form.options.length > 0
          ? form.options.map((item, index) => (
              <div className="form-check offset-md-1 col-md-10 mb-6">
                <div class="btn-block ">
                  <input
                    checked={checkedItems[item.id]}
                    onChange={handleChange}
                    type="checkbox"
                    // checked={input === item.id ? "checked" : ""}
                    required={form.mandatoryField === true ? "required" : ""}
                    name={item.name}
                    id={item.id}
                    className="form-check-input "
                  ></input>
                  <label class="form-check-label px-1" for={item.name}>
                    {item.name}
                  </label>
                </div>
              </div>
            ))
          : ""}
      </div>
    </div>
  );
}
export default Checkbox;

import React，{useState，useffect}来自“React”；
函数复选框（{form，handleReturn，data}）{
const[checkedItems，setCheckedItems]=useState（{}）；
常量handleChange=（事件）=>{
setCheckedItems({
…检查一下，
[event.target.id]：event.target.id，
});
handleReturn（Object.keys（checkedItems））；
};
返回(
{form.label}
{form.description}
{form.options&&form.options.length>0
？表单.选项.映射（（项目，索引）=>(
{item.name}
))
: ""}
);
}
导出默认复选框；