Ошибка ввода файла загрузки React и TypeScript

Я пытаюсь отправить форму с помощью реакции и машинописного текста, но продолжаю получать ошибки.

Мой терминал выдает эту ошибку Type 'File | undefined' is not assignable to type 'string | number | readonly string[] | undefined', и если я пытаюсь загрузить файл, сайт вылетает с этим предупреждением и ошибкой.

Предупреждение: Компонент меняет неуправляемый вход на управляемый. Вероятно, это вызвано изменением значения с неопределенного на определенное значение, чего не должно происходить. Выберите между использованием контролируемого или неконтролируемого элемента ввода на протяжении всего срока службы компонента.

Uncaught DOMException: не удалось установить свойство «значение» в «HTMLInputElement»: этот элемент ввода принимает имя файла, которое может быть установлено только программно на пустую строку. в HTMLInputElement.set [как значение]

-- РЕДАКТИРОВАТЬ --

Итак, после отладки некоторое время я обнаружил, что если я просто передам пустую строку в атрибут значения, то форма будет отправлена, и мое изображение/файл будет обработано и работает нормально. Таким образом, проблема связана с настройкой атрибута value, что означает, что мне нужно исправить эту ошибку! Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string. at HTMLInputElement.set [as value]

У меня есть следующий компонент ввода

import React, { useRef } from "react";
import { styled } from "../../../stitches.config";

const Input = styled("input", {
    width: "100%",
    height: "45px",
    background: "$white",
    color: "$black",
    textIndent: "10px",
    border: "1px solid $grey",
    borderRadius: "5px",
    paddingRight: "10px",
});

interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    onChange: React.ChangeEventHandler<HTMLInputElement>;
}

export default ({ type, name, value, required, onChange }: Props) => {
    const input = useRef<HTMLInputElement>(null);

    return (
        <Input
            type = {type}
            name = {name}
            value = {value}
            ref = {input}
            required = {required}
            onChange = {(e) => onChange(e)}
        />
    );
};

Мой компонент формы выглядит так

interface Props {
    auth: any;
}

interface FormProps {
    title: string;
    intro: string;
    content: string;
    image: File | undefined;
    published_date: string;
}

const Create = ({ auth }: Props) => {
    const { data, setData, processing, post, errors } = useForm<FormProps>({
        title: "",
        intro: "",
        content: "",
        image: undefined,
        published_date: "",
    });

    const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
        if (e.target.files) {
            setData("image", e.target.files[0]);
            console.info(data.image, " image");
        }
    };

    const onSubmit = (e: React.SyntheticEvent) => {
        e.preventDefault();
        post("/admin/blogs/create", {
            preserveScroll: true,
        });
    };

    return (
        <Authenticated auth = {auth} css = {{ background: "$light" }}>
            <Container css = {{ maxWidth: "1200px", py: "100px" }}>
                <Heading size = "charlie">Create a post</Heading>
                <Errors errors = {errors} />

                <form onSubmit = {onSubmit} noValidate>
                   
                    ....

                    <Row>
                        <Label input = {"image"} value = {"Image"} required = {true}>
                            <Input
                                type = "file"
                                name = "image"
                                value = {data.image}
                                required = {true}
                                onChange = {handleFile}
                            />
                            {errors.image && (
                                <InputError error = {errors.image} />
                            )}
                        </Label>
                    </Row>
                    <Row>
                        <Button
                            processing = {processing}
                            type = {"submit"}
                            color = {"primary"}
                        >
                            Publish
                        </Button>
                    </Row>
                </form>
            </Container>
        </Authenticated>
    );
};

export default Create;