How to checkbox All with different Id using ant with reactjs

I have a problem how to check all is correct with its id value

Get value from each checkbox i already did it but i don't know how to do with checkbox all

When i check all in "Principal" , i want the remaining 4 checkbox to be checked too, after that the result will be like this in function onChange

result:

   [
     {id:'1' ,  key: "view"  }, 
     {id:'1' ,  key: "add"  }, 
     {id:'1' ,  key: "edit"  }, 
     {id:'1' ,  key: "delete"  }, 
   ]

In the render() function you can edit it to suit other workarounds too

code (you could copy all the code to codesandbox to see exp)

 import React, { useState } from "react";
    import ReactDOM from "react-dom";
    import { Checkbox, Form, Row, Col } from "antd";
    const App = () => {
      const [form] = Form.useForm();

  const listMenu = [
    { id: "1", permission: "Principal" },
    { id: "2", permission: "Teacher" },
    { id: "3", permission: "Student" }
  ];

  const arr = [
    { key: "view" },
    { key: "add" },
    { key: "edit" },
    { key: "delete" }
  ];

  const [checkedList, setCheckedList] = useState(arr || []);

  // RENDE CHECKBOX
  const render = (id) => {
    const item = arr.map((item, index) => {
      const key = item.key;
      return (
        <Col span={6} key={key}>
          <Checkbox value= />
        </Col>
      );
    });
    return item;
  };

  const onChange = (checkedList) => {
    console.log(checkedList);
  };

  // CHECKALL
  const onCheckedAll = (e, id) => {
    setCheckedList(arr);
  };

  return (
    <div>
      <Form form={form}>
        <Form.Item name="permissions">
          <Row>
            <Col span={10} className="ant-col-header">
              <p>Permission:</p>
            </Col>
            <Col span={14} className="ant-col-header">
              <Row>
                <Col span={5}>
                  <p>View</p>
                </Col>
                <Col span={5}>
                  <p>Add</p>
                </Col>
                <Col span={5}>
                  <p>Edit</p>
                </Col>
                <Col span={5}>
                  <p>Delete</p>
                </Col>
                <Col span={4}>
                  <p>All</p>
                </Col>
              </Row>
            </Col>
          </Row>
          <Row>
            {listMenu.map((item, index) => {
              return (
                <React.Fragment key={item.id}>
                  <Col span={10}>
                    <p>{item.permission}</p>
                  </Col>
                  <Col span={14}>
                    <Row>
                      <Col span={20}>
                        <Checkbox.Group
                          onChange={onChange}
                          value={checkedList}
                          style=
                        >
                          {/* CHECKBOX ITEM */}
                          <Row style=>{render(item.id)}</Row>
                        </Checkbox.Group>
                      </Col>
                      <Col span={4}>
                        {/* CHECK ALL */}
                        <Checkbox
                          onChange={(e) => {
                            onCheckedAll(e, item.id);
                          }}
                        ></Checkbox>
                      </Col>
                    </Row>
                  </Col>
                </React.Fragment>
              );
            })}
          </Row>
        </Form.Item>
      </Form>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);