using mui-file-input in react-hook-form using react hook form persist to storage data

i have issue when i change mui-file-input, useFormPersist save the
value in storage with array of empty objects and when i reload the
page, i got error because the value not true and the input expected
value be [] or array of objects and has file data, i tried also to prevent
useFormPersist from saving the file input value in storage, it’s not worked also
because this file inside array also

`import { SetFieldValue } from ‘react-hook-form’;
import { MuiFileInput } from ‘mui-file-input’;

   interface FormPersistConfig {
   storage?: Storage;
   watch: (names?: string | string[]) => any;
   setValue: SetFieldValue<any>;
   exclude?: string[];
   onDataRestored?: (data: any) => void;
   validate?: boolean;
   dirty?: boolean;
   onTimeout?: () => void;
   timeout?: number;
  }

declare const useFormPersist: (name: string, { storage, watch, setValue, exclude,
onDataRestored, validate, dirty, onTimeout, timeout }: FormPersistConfig) => {
clear: () => void;
};

export { FormPersistConfig, useFormPersist as default };
const BookingVisa = () => {
       const {
         unregister,
         register,
          control,
          handleSubmit,
          watch,
          setValue,
          clearErrors,
          setError,
           getValues,
           reset,
           formState: { errors },
        } = useForm<BookingInfo>({

    resolver: yupResolver(bookingInfoSchema),
    mode: 'all',
   })

   const [excludeFields, setExcludeFields] = useState<string[]>([]);
   const passengers = watch('passengers') || [];

   useEffect(() => {
     const newExcludeFields = passengers.flatMap((passenger, index) => {
      return [`passengers[${index}].file`, `passengers[${index}].document`];
    });
     setExcludeFields(newExcludeFields);
    }, [passengers]);

   useFormPersist(`bookVisa-${searchId}`, {
       watch,
       setValue,
       exclude: [ ...excludeFields] ,    
})
     const handleFilesChange = async(files: any, index: number, name: any, field: 
         any, inputNum: any) => {
    if(files.length > 3){
        return showMessage(trans(`visa.file${index}.error.length`), 'error')
    }
    field?.onChange(files);
   const form = new FormData()
        for (let i = 0; i < files.length; i++) {
            const reader = new FileReader();
                form.append(`files[${i}]`, files[i]);
            reader.readAsDataURL(files[i]);
        }
        const data = await dispatch(SettingService().uploadImage(form))
        if (data.payload.urls) {
            setValue(`passengers[${index}].${name + 's'}`, data.payload.urls);
            // showMessage(trans(`visa.file${inputNum}.media.success`), 'success')
            if(name === 'file'){
                clearErrors(`passengers[${index}].file`);
            }
        }else{
            setValue(`passengers[${index}].${name + 's'}`, []);
            setValue(`passengers[${index}].${name}`, []);
            showMessage(trans(`visa.file${inputNum}.media.error`), 'error')
            if(name === 'file'){
                setError(`passengers[${index}].file`, { type: "manual", message: 
                      trans(`visa.file${inputNum}.error`) })
            }
            field?.onChange([]);
        }                    
};

return (
 <from id="fromId" method={'post'} onSubmit={handleSubmit(onSubmit)}>
<Controller
     name={`passengers[${index}].file`}
     control={control}
    // defaultValue={[]}
    render={({ field }: any) => {
          return(
              <MuiFileInput
                  label={trans('File Upload 122')}
                  {...field}
                   multiple
                  sx={{ width: '100%' }}
                  inputProps={{ accept: 'image/*,.pdf', maxFiles: 3 }} 
                  onChange={(values: any) => {
                         handleFilesChange(values, index, 'file', field, 1);
                    }}
                   value={field.value}                                            
                  clearIconButtonProps={{ children: <CloseIcon fontSize="small" /> }}
                  error={!!errors.passengers?.length ? 
                        !!errors.passengers[index]?.file : false}
                  helperText={(errors.passengers?.length && 
                                errors.passengers[index]?.file) ? 
                               trans(errors.passengers[index]?.file.message) : 
                               trans('visa.file1.helpertext')}

                 />
             )}}
         />
 </form>
)}

`