When users want to 'check all', how can I implement this in React.js? Can anyone help me with this?

How can I achieve a 'check all' feature in this code? I've attempted several approaches, but I haven't been successful. Could someone please assist me?

This is where the checkbox

         <div style=>
            {Object.keys(permissionList).map((sectionKey, index) => (
              <Collapsible
                title={permissionList[sectionKey][0]?.section}
                isFirst={index === 0}
                key={sectionKey}
              >
                {permissionList[sectionKey]?.map((item, index) => (
                  <Checkbox.Group
                    options={[
                      {
                        label: item.name.toLowerCase(),
                        value: item.name.toLowerCase(),
                      },
                    ]}
                    disabled={isViewItem}
                    className="checkbox-style"
                    key={index}
                    value={formData?.permissions
                      .filter(
                        per =>
                          per.section.toLowerCase() ===
                          item.section.toLowerCase()
                      )
                      .flatMap(per => per.name.toLowerCase())}
                    onChange={checkedValues =>
                      handleCheckboxChange(
                        item.permissionId,
                        item.section.toLowerCase(),
                        checkedValues
                      )
                    }
                  />
                ))}
                <Checkbox.Group
                  options={[
                    {
                      label: "check all",
                      value: permissionList[sectionKey][0]?.section,
                    },
                  ]}
                  disabled={isViewItem}
                  className="checkbox-style"
                  key={index}
                  // value={formData?.permissions
                  //   .filter(
                  //     per =>
                  //       per.section.toLowerCase() === item.section.toLowerCase()
                  //   )
                  //   .flatMap(per => per.name.toLowerCase())}
                  onChange={checkedValues =>
                    handleCheckAll(permissionList[sectionKey], checkedValues)
                  }
                />
              </Collapsible>
            ))}
          </div>

This is checkbox functon

  const handleCheckboxChange = (
    permissionId: number,
    section: string,
    checkedValues: CheckboxValueType[]
  ) => {
    console.log(permissionId, section, checkedValues);
    setFormData(prevFormData => {
      const updatedFormData = { ...prevFormData };

      const permissionIndex = updatedFormData.permissions.findIndex(
        per =>
          per.permissionId === permissionId &&
          per.section.toLowerCase() === section.toLowerCase()
      );

      if (checkedValues.length > 0) {
        if (permissionIndex !== -1) {
          updatedFormData.permissions = updatedFormData.permissions.map(
            (permission, index) => {
              if (index === permissionIndex) {
                return {
                  ...permission,
                  name: String(checkedValues[0]),
                };
              }
              return permission;
            }
          );
        } else {
          updatedFormData.permissions = [
            ...updatedFormData.permissions,
            {
              permissionId,
              section,
              name: String(checkedValues[0]),
            },
          ];
        }
      } else {
        if (permissionIndex !== -1) {
          updatedFormData.permissions = updatedFormData.permissions.filter(
            (___, index) => index !== permissionIndex
          );
        }
      }
      return updatedFormData;
    });
  };

This is handleCheckAll function

  const handleCheckAll = (permissionsData, value) => {
    console.log(permissionsData, value);
  };

This is where I have store the items

  const [formData, setFormData] = useState<RoleFormData>({
    name: "",
    permissions: [],
  });

it's interface

interface Permission {
  name: string;
  section: string;
  permissionId: number;
}
interface RoleFormData {
  name: string;
  permissions: Permission[];
}

This is how I am getting the data from check all box

[{…}, {…}, {…}, {…}] 0: {permissionId: 1, name: 'Add', section: 'Role'}1: {permissionId: 2, name: 'View', section: 'Role'}2: {permissionId: 3, name: 'Edit', section: 'Role'}3: {permissionId: 4, name: 'Delete', section: 'Role'}

section--type ['Role']

permission list look like these