I dynamically create checkboxes in item forms, when I submit a form in item forms, I get an array of checkbox IDs. How can I either bind true / false to these IDs or overwrite the object, create a new one or something else by clicking on the checkbox? How to understand which checkbox was clicked and bind a value to it true / false?

const [checkboxData, setCheckboxData] = useState(undefined);
useEffect(() => {
  (async () => {
        const data = await request(`/document-type/typeDocuments`, { method: 'get', cancelTokenKey: 'typeDocuments' });
        if (data) { setCheckboxData(data.content); }
   })();
}, []);

function onChangeCheckbox(checkedValues) {
    setCheckboxData(prevState => {
        prevState.map(item => ...)
    }) // tried this, but then when you click on the checkbox everything breaks
}

<Form
    onFinish={onFormFinish}
    onFinishFailed={onFormFailed}
>
    <Form.Item
         name="typesDocuments"
         valuePropName="checked"
    >
        <Checkbox.Group style={{ width: '100%' }}>
             <Row>
                 {checkboxData?.map(item => <Col span={12}><Checkbox key={item?.id} value={item?.id} onChange={onChangeCheckbox}>{item?.Name}</Checkbox></Col>)}
             </Row>
        </Checkbox.Group>
     </Form.Item>

     <Form.Item>
         <Space style={{ display: 'flex', justifyContent: 'end' }}>
              <Button type="primary" htmlType="submit"> {intl("modal-btn-ok")} </Button>
         </Space>
     </Form.Item>
</Form>

For ease of viewing, I created an example of a project in a sandbox