Why its always giving error when I try to pass data? - reactjs

Question

I got a upload function like this
export class FileService {
async uploadFile(
fileId: string,
{
documents,
checkbox,
}: { documents?: Record<string, File>; checkbox?: boolean }
): Promise<FileEntry> {
const form = new FormData();
Object.entries(documents || {}).forEach(([k, file]) =>
form.append(k, file, file.name)
);
return ...
}
}
As you can see this file service accept 2 parameters.
My component structure is like this.
<Gparent>
<Parent>
<Child>
</Child>
</Parent>
</Gparent>
Inside the GParent component. I got this onDone function which passed into the Parent Component
const onDone = (
checkboxValue?: boolean | undefined,
documents?: Record<string, File>
) => {
try {
if (authorized) {
let b = new FileService()
b.uploadFile(config.id, {
documents: documents,
checkbox: checkboxValue,
})
.then((e) => {
console.log(e);
})
.catch((err) => {
console.log('err ', err);
})
}
} catch (err) {
console.log(err);
}
};
In the Parent component, I got a function and useState like this.
Please pay attention to this button component as you can see it is calling the onDone function.
The thing is when I pass the empty object the new item is created and giving back 201. When I try to pass object to send it won't work and give me an 400
const [fileSelected, setFileSelected] = useState<File>();
// THIS METHOD IS PASS TO CHILD COMPONENT
const onFileChange = (b: File) => {
setFileSelected(b);
};
return (
<>...
<Child
key={check.key}
label={check.label}
value={values[i]}
onChange={(v) => onChange(i, v)}
onFileChange={onFileChange}
/>
<Button
type="primary"
onClick={() => {
let objectToSend: Record<string, File> = {
driverLicense: fileSelected as File,
signature: fileSelected as File,
};
if (
objectToSend['driverLicense'] !== undefined &&
objectToSend['signature'] !== undefined
) {
// ************THIS WORKS************
// onDone(true, {});
// ************THIS DOES NOT WORKS************
onDone(true, objectToSend);
}
}}
>
{config.texts?.done || 'Done'}
</Button>
</>
)
Inside the child component I got a useEffect and a button which may upload files
Child Component useEffect
useEffect(() => {
if (inputRef.current) {
const listener = () => {
const files: FileList | null | undefined = inputRef.current?.files;
if (files) {
onFileChange(files[0]);
}
};
}
return () => {
/* */
};
}, [onChange, onFileChange]);
The this is when I pass objecttoSend in the Parent component, am I passing the wrong data format? Record<string, File>