Как правильно загружать файлы и отправлять их через AXIOS в React?

Question

У меня есть следующие компоненты React и некоторые серверные API.Мой дочерний компонент имеет входной файл, и, нажав кнопку загрузки, я отправляю загруженный файл в мой родительский компонент через реквизиты.У моего родительского компонента есть AXIOS, и после нажатия кнопки я отправляю файл в API.Я настроил серверную часть для проверки необходимых файлов.Таким образом, если я пропустил поле ввода файла, серверная часть выдаст ошибку, подобную «File field is required.» . Проблема даже в том, что я загружаю файл и отправляю его в API, выдает вышеуказанную ошибку.Что я здесь пропустил ??

Ребенок:

class UploadModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            file: [],
        }
        this.uploadFile = this.uploadFile.bind(this);
    }

    uploadFile(event) {
        let file = event.target.files[0];
        var name = event.target.name;

        if (file) {
            let data = new FormData();
            data.append('file', file);
            this.setState({
                [name]: data
            })
        }
    }

    sendUploadedFile = () => {
       this.props.getUploadedFileData(this.state.file);
    }

    render(){
       return(
         <div>
           <input type="file" name="file" onChange={this.uploadFile} />
           <button onClick={this.sendUploadedFile}>Upload</button>
         </div>
       )
    }
}

Родитель:

class UploadModal extends Component {
    constructor(props) {
        super(props);

        this.state = {
            file: [],
        }
    }

    getUploadedFileData = (data) => {
        this.setState({
            file: data
        })
    }

    upload = () => {
       API.post('uploadFiles', this.state.file)
            .then(res => {
                console.log("success!", res)
            })
            .catch((error) => {
                console.log("AXIOS ERROR: ", error);
            })
    }

    render(){
       return(
         <div>
           <UploadModal
               getUploadedFileData={this.getUploadedFileData}
           />
           <button onClick={this.upload}>Upload File</button>
         </div>
       )
    }
}