Yup validation on array of checkbox - reactjs

Question

I want to change the state of the checkbox through useForm and I have an array of checkbox. the number of checkbox I get from the server. See my code please i have selectionAll and when it is true then all other checkbox should be true . And when it is false, then all the rest should be false. But it doesn’t work for me Look at what the problem is And what I wrote wrong.
but when i refresh the page the checkbox state is always undefined
type OperationSelect = {
selections: boolean;
};
export type OperationsData = {
selectionAll: boolean;
selection: OperationSelect[];
};
const defaultValues = {
selectionAll: false,
selections: [false],
};
export const DrawerEditFinancial: React.FC = () => {
const {
handleSubmit,
control,
reset,
watch,
setValue,
getValues,
formState: { errors, isValid },
} = useForm<OperationsData>({ defaultValues, resolver: yupResolver(schema), mode: 'onSubmit' });
const money = watch('sum');
const selectionAll = watch('selectionAll');
const selections = watch('selection');
I wrote the conditions here when selectionAll is true then the rest of the checkbox is true
useEffect(() => {
if (selectionAll) {
selections?.map((selection, index) => {
setValue(`selections.${index}`, true);
});
}
}, [selections, selectionAll]);
return (
<form>
<Grid item xs={0.3}>
<Controller
control={control}
name={'selectionAll'}
render={({ field: { value, onChange } }) => (
<FormControlLabel
value={value}
onChange={(e, checked) => onChange(checked)}
css={labelTextCSS}
control={<Checkbox />}
label=""
/>
)}
/>
</Grid>
{operationsView?.map((operation, index) => (
<Accordion
key={operation.expenseId}
expanded={expanded === `panel_${operation.expenseId}`}
onChange={handleChangeExpanded(`panel_${operation.expenseId}`)}
>
<AccordionSummary expandIcon={<SvgArrowFinancial />}>
<Grid css={pl(12)} container justifyContent="flex-start" alignItems="center">
<Grid item xs={0.3}>
<Controller
control={control}
name={`selections.${index}`}
render={({ field: { value, onChange } }) => (
<FormControlLabel
value={value}
onChange={(e, checked) => onChange(checked)}
css={labelTextCSS}
control={<Checkbox />}
label=""
/>
)}
/>
</Grid>
</Accordion
))}
</form>
)