How to checked multiple checkbox in react.js?

I am using react antd . I have got array of objects that's groupKey .I am mapping checkbox by using Groupkey and also I have got two different types of checkbox . One is Select All Checkbox . it actually works when user click on the Select All or User select on all individual checkbox . Other is individual checkbox , user can Select on individually . when user submit on Button , then it's give me this data format ["manage_books","manage_journals","manage_deals"]

here is my trying code :

 let defaultCheckedList = ["manage_deals"];


state = {
    groupKey: [{
            id: 1,
            key: "manage_books",
            label: "books"
        },
        {
            id: 2,
            key: "manage_journals",
            label: "journals"
        },
        {
            id: 3,
            key: "manage_deals",
            label: "deals"
        }
    ],
    checkedList: defaultCheckedList,
    output: [],
    indeterminate: true,
    checkAll: false
};
onCheckAllChange = e => {
    this.setState({
        checkedList: e.target.checked ?
            this.state.groupKey.map(item => item.key) :
            [],
        indeterminate: false,
        checkAll: e.target.checked
    });
};

onChange = (e, value) => {
    this.setState({
        checked: e.target.checked,
        output: this.state.output.concat(value)
    });
};
onSubmit = () => {
    console.log(this.state.output)
}

render(UI)

    <
    div >
    <
    div className = "site-checkbox-all-wrapper" >
    Select All <
    Checkbox
indeterminate = {
    this.state.indeterminate
}
onChange = {
    this.onCheckAllChange
}
checked = {
    this.state.checkAll
}
/> <
/div>

I am looping checkbox by groupKey.I am passing key using onChange method. {
        this.state.groupKey.map(item => ( <
            div className = "userpermission-content"
            key = {
                item.id
            } > {
                item.label
            } <
            Checkbox onChange = {
                (e, value) => this.onChange(e, item.key)
            }
            value = {
                item.key
            }
            />{" "} <
            /div>
        ))
    } <
    button onClick = {
        this.onSubmit
    } > submit < /button> <
    /div>
);
}
}

In this code, you can see that two individual checkbox is initial select, I need to get completely like this: https://codesandbox.io/s/4k6qi

this is my codesanbox: https://codesandbox.io/s/check-all-ant-design-demo-vhidd?file=/index.js