复选框中的 React JS onChange 事件无法正常工作

Question

codesandbox.io/s/beautiful-sid-dy97k?file=/src/App.js demo url for checkbox

  const handleOnChange = async (position) => {
    const updatedCheckedState = Filter.contract.map((item, index) =>
      index === position ? !item : item
    );
    await setFilter((e) => ({ ...e, contract: updatedCheckedState }));
  };


// this is checkbox code
                        {[
                          "Bank",
                          "Agency",
                          "Permanent",
                          "Ad Hoc",
                          "Temporary",
                          "Part Time",
                          "Contractual"
                        ].map((item, i) => {
                          return (
                            <Form.Group controlId="formBasicCheckbox">
                              <Form.Check
                                onChange={() => handleOnChange(i)}
                                type="checkbox"
                                label={item}
                              />
                            </Form.Group>
                          );
                        })}

this is my checkbox logic and when i click on any of label then first item checked. I don't know how to slove it

actuall behavior should be that If user select on label then it should also checked.

Answer 1

so problem was in my <form.check> tag here we need to give ID in that tag like

<Form.Check
 id={i.toString()} // unique id should be there
 onChange={() => handleOnChange(i)}
 type="checkbox"
 label={item}
/>