How to select group based checkbox antd in reactjs

I want to select group based checkbox . The problem is that when I click on group, the entire checkbox is selected. I don't want to select entire checkbox. this is my Intial State .

      const plainOptions = ["can_view", "can_create", "can_update"];

      state = {
        checkedList: [],
        indeterminate: true,
        checkAll: false
      };

Method: onchange method is basically works each individual checkbox .

 onChange = checkedList => {
    console.log(checkedList);
    this.setState({
      checkedList,
      indeterminate:
        !!checkedList.length && checkedList.length < plainOptions.length,
      checkAll: checkedList.length === plainOptions.length
    });
  };

This method works for selected all checkbox

      onCheckAllChange = e => {
        console.log(e.target.checked);
        this.setState({
          checkedList: e.target.checked ? plainOptions : [],
          indeterminate: false,
          checkAll: e.target.checked
        });
      };
     {["group", "topGroup"].map(item => (
                  <div className="site-checkbox-all-wrapper">
                    <Checkbox
                      indeterminate={this.state.indeterminate}
                      onChange={this.onCheckAllChange}
                      checked={this.state.checkAll}
                    >
                      {item}
                    </Checkbox>
                    <CheckboxGroup
                      options={plainOptions}
                      value={this.state.checkedList}
                      onChange={this.onChange}
                    />
                  </div>
                ))}

However, My accepted Data format is {group:["can_view","can_create"],topGroup:["can_view","can_create"}. I want to get this format output when user selected on the checkbox

Here is the codesanbox : https://codesandbox.io/s/agitated-sea-1ygqu