I can't set the value of a bootsrap file input with Formik

I have been trying for ages now to figure out why I'm getting this error Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable, "The above error occurred in the component". This is my code for reusable bootsrap file uploader with Formik:

const FileUPloadWrapper = ({
    name,
    ...otherProps
}) => {
    const { setFieldValue } = useFormikContext();
    const [field, meta] = useField(name);
    const handleChange = (event) => {
        const file = event.currentTarget.files[0];   
        setFieldValue(name,file);
    };
    const configTextfield = {
        ...field,
        ...otherProps,
        type: 'file',
        onChange: handleChange
    };
    const trying = {};
    if (meta && meta.touched && meta.error) {
        configTextfield.isInvalid = true;
        trying.Erreur = meta.error;
    }
    return (
        <Form.Group controlId="formFile" className="mb-3">
            <Form.Label>Default file input example</Form.Label>
            <Form.Control {...configTextfield} />
            <Form.Control.Feedback type="invalid">{trying.Erreur}</Form.Control.Feedback>
        </Form.Group>
    )
};
export default FileUPloadWrapper;

The error side of things is working, but when I set the value it gives me the error above