react-hook-form: gives file path instead of file object

Question

I'm integrating react-hooks-form with reactstrap using Controller. But instead of returning a file object it is returning a path string for file type input value.

<Controller
    name="target_file"
    type="file"
    rules={{
        validate: {
            checkNeither: (v) =>
                validate_file(v) || "Please provide either MacAddresses Input or InputFile",
            checkEither: (v) =>
                validate_file2(v) ||
                "Can only provide either MacAddresses Input or InputFile. Cant provide both",
        },
    }}
    control={control}
    render={({ field: { ref, ...field } }) => (
        <CustomInput
            label={"Choose a MacAddress list csv file"}
            {...field}
            type="file"
            innerRef={ref}
        />
    )}
/>

What i get filepath instead of Files object

How can I get the File Object

I tried

<Controller
    name="target_file"
    type="file"
    rules={{
        validate: {
            checkNeither: (v) =>
                validate_file(v) || "Please provide either MacAddresses Input or InputFile",
            checkEither: (v) =>
                validate_file2(v) ||
                "Can only provide either MacAddresses Input or InputFile. Cant provide both",
        },
    }}
    control={control}
    render={({ field: { ref, ...field } }) => (
        <CustomInput
            label={"Choose a MacAddress list csv file"}
            {...field}
            type="file"
            innerRef={ref}
            onChange={e => {
              field.onChange(e.target.files);
            }}
        />
    )}
/>

But this gives the error

Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

https://codesandbox.io/s/affectionate-moon-dmn8q