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 
