How to send a file from ReactJs to Flask using Axios

I am attempting to send a file from a ReactJs Frontend, using an axios call, to a flask Backend.

Here is my axios call:

            const audio_file = new File(buffer, 'recording.mp3', {
                type: blob.type,
                lastModified: Date.now()
            });
            const blobURL = URL.createObjectURL(blob);
            this.setState({blobURL, isRecording: false, recorded:true})

            
            let options = {
                method: 'POST',
                url: flaskEndpoint + "audio/1",
                file: audio_file,
                crossOrigin:'*'
            }

            console.log(options)

            axios(options)
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log("Error in the axios call:" + error);
                })

At the moment my flask method looks like this :

@app.route('/audio/<int:user_id>', methods=['POST'])
@cross_origin()
def make_audio(user_id):
    print(request.files.get('recording.mp3'))
    print(request.files)

    return 0

Here is the console of the python app:

And here is the web console of the React App:

Am I making a mistake here?

Edit

Ok I tried the suggestion of converting the file to base64 and then sending the file the backend.

This is my new axios call.

let options = {
                method: 'POST',
                url: flaskEndpoint + "audio/1",
                data: convertBlobToBase64(blob),
                // file: audio_file,
                crossOrigin:'*',
                headers: {
                    'Content-Type': 'application/json'
                },
                json: true
            }

            console.log(options)

            axios(options)
                .then(response => {
                    console.log(response)
                })
                .catch(error => {
                    console.log("Error in the axios call:" + error);
                })

        });

Here is the convetBlobtoBase64 functions (borrowed from: https://gist.github.com/n1ru4l/dc99062577b746e0783410b1298ab897)

const convertBlobToBase64 = blob => new Promise((resolve, reject) => {
    const reader = new FileReader;
    reader.onerror = reject;
    reader.onload = () => {
        resolve(reader.result);
    };
    reader.readAsDataURL(blob);
});

And here is what is being sent to the backend:

I think this answers my question, although I will create another to work out how to access the data on the flask end.