useForm array checkbox (conditional boolean)

Question

i have selectionAll which is responsible for all checkbox. and i have selections array . when selectionAll : true then I want all elements inside the array to be true . and if selectionAll: false then all elements must be false . but I initially have selections :[undefined ,undefined ,undefined] please tell me what i wrote wrong

type OperationSelect = {
  selections: boolean;
};

export type OperationsData = {
  sum: string;
  selectionAll: boolean;
  selections: OperationSelect[];
};

const defaultValues = {
  sum: '',
  selectionAll: true,
  selections: [],
};

  const selectionAll = watch('selectionAll');
  const selections = watch('selections');

  useEffect(() => {
    if (selectionAll) {
      const newSelectedItems = selections.map(() => true);
      setValue('selections', newSelectedItems);
      console.log('selections', selections);
    }
  }, [selectionAll]);

 <Controller
                control={control}
                name={`selections[${index}]`}
                render={({ field: { value, onChange } }) => (
                  <FormControlLabel
                    checked={value}
                    onChange={(e, checked) => onChange(checked)}
                    css={labelTextCSS}
                    control={<Checkbox />}
                    label=""
                  />
                )}
              />