Chakra-UI React Select All/Some Checkboxes

I am trying to add more checkboxes to the example in Chakra-UI's "Indeterminate" checkbox example in their docs: https://chakra-ui.com/docs/form/checkbox

I can't seem to add more than two checkboxes and still keep the functionality to toggle all checkboxes and/or select individual checkboxes. Ideally, I would like to be able to add x number of checkboxes with a .map() method and be able to select each checkbox individually as well as all checkboxes. Any help is greatly appreciated.

Not working:

function IndeterminateExample() {
  const [checkedItems, setCheckedItems] = React.useState([false, false, false])

  const allChecked = checkedItems.every(Boolean)
  const isIndeterminate = checkedItems.some(Boolean) && !allChecked

  return (
    <>
      <Checkbox
        isChecked={allChecked}
        isIndeterminate={isIndeterminate}
        onChange={(e) => setCheckedItems([e.target.checked, e.target.checked])}
      >
        Parent Checkbox
      </Checkbox>
      <Stack pl={6} mt={1} spacing={1}>
        <Checkbox
          isChecked={checkedItems[0]}
          onChange={(e) => setCheckedItems([e.target.checked, checkedItems[1]])}
        >
          Child Checkbox 1
        </Checkbox>
        <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[0], e.target.checked])}
        >
          Child Checkbox 2
        </Checkbox>
          <Checkbox
          isChecked={checkedItems[1]}
          onChange={(e) => setCheckedItems([checkedItems[1], e.target.checked])}
        >
          Child Checkbox 3
        </Checkbox>
      </Stack>
    </>
  )
}