How to get the checkbox's state or label in Onchange in react hook with bootstrap

I had created a list of groups. I also list all of the groups and details using the map function. I insert the <Form.Check> from react-bootstrap. But I can't get the selected value of <Form.Check> input box.

I tried to add ref in <Form.Check>, but it stored the latest group. Also, I add the onChange function in <Form.Check>, The function would call it first. How to get the checkbox state in change?

Groups structure:

[
 "GroupX":{
   1:"Hello",
   2:"World"
  }
]

Result of using the map function:

口GroupX
1 Hello
2 World

The react code:

const BraodCastList = (props) => {
  const groupList = Object.entries(props.Groups[1])
  console.log(props)
  return (
  <Card>
  <Card.Header>
    <Accordion.Toggle 
      as={Button} 
      variant="outline-primary" 
      eventKey={props.Groups[0]} 
      className="w-100"
    >
    <Form.Check type="checkbox" label={props.Groups[0]} />
    </Accordion.Toggle>
  </Card.Header>
  <Accordion.Collapse eventKey={props.Groups[0]}>
    <Card.Body>
      <div>
        {groupList.map((groupList,groupListKeys) => 
            <DetailList key={groupListKeys} groupList={groupList} />
        )}
      </div>
    </Card.Body>
  </Accordion.Collapse>
</Card>
)}

  const DetailList = (props) =>(
      <li>
        {props.groupList[1]} {props.groupList[0]}
      </li>
  )
  return (
        <Accordion>
            {Groups.map((Groups,GroupsKey) =>(
              <BraodCastList key={GroupsKey} Groups={Groups}/>
            ))}
        </Accordion>
  )