I am using antd checkbox . I am storing checked values by using an array of objects, but I need to get checkbox looks like image.

I have got array of objects for antd checkbox .

const plainOptions1 = [
  {
    name: 'parrent-1',
    key: 'Apple',
    child: [
      { name: 'Pear', key: 'pear' },
      { name: 'store', key: 'store' },
    ],
  },
  {
    name: 'parrent-2',
    key: 'blue',
    child: [
      { name: 'green', key: 'green' },
      { name: 'yellow', key: 'yellow' },
    ],
  },
  {
    name: 'Orange',
    key: 'Orange',
  },
];

here is defaultselectedcheckbox objects:

const defaultCheckedList = [
  { name: 'parrent-1', key: 'parrent-1' },
  {
    name: 'Orange',
    key: 'Orange',
  },
];

here is the method of my trying effort code

  const [checkedList, setCheckedList] = React.useState(
    defaultCheckedList.map((item) => item.name)
  );
  const [indeterminate, setIndeterminate] = React.useState(true);
  const [checkAll, setCheckAll] = React.useState(false);

when user click on the checkbox the value will be checked and unchecked

  const onChange = (list) => {
    setCheckedList(list);
    setIndeterminate(!!list.length && list.length < plainOptions1.length);
    setCheckAll(list.length === plainOptions1.length);
  };

when user click on partent -1 , value will check under parrent-1

  const onCheckAllChange = (e) => {
    setCheckedList(
      e.target.checked ? plainOptions1.map((item) => item.name) : []
    );
    setIndeterminate(false);
    setCheckAll(e.target.checked);
  };

  {plainOptions1.map((item) => (
    <div>
      <Checkbox
        indeterminate={indeterminate}
        onChange={onCheckAllChange}
        checked={checkAll}
      >
        {item.name}
      </Checkbox>
      <Divider />

      <CheckboxGroup
        options={item && item.child && item.child.map((item) => item.name)}
        value={checkedList}
        onChange={onChange}
      />
      <Divider />
    </div>

Here is my trying code : https://stackblitz.com/edit/react-xb1tkk