I am trying to upload the image in react, I used the extension ** react-image-upload**. I used this code to show images on a webpage

import React from 'react';
import ImageUploader from 'react-images-upload';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { pictures: [] };
        this.onDrop = this.onDrop.bind(this);
    }

    onDrop(pictureFiles, pictureDataURLs) {
        this.setState({
            pictures: pictureFiles
        });
    }

    render() {
        return (
            <ImageUploader
                withIcon={true}
                buttonText='Choose images'
                onChange={this.onDrop}
                imgExtension={['.jpg', '.gif', '.png', '.gif']}
                maxFileSize={5242880}
            />
        );
    }
}

Now The image is showing on the webpage but I don't know how to upload it and save it to a folder I am trying to use this code.

1. This line is for onChange

   onDrop(pictureFiles, pictureDataURLs) {
        this.setState({
            picture: pictureFiles
        });
    }

2. This line is uploading the image, but I don't know how it will function and if I need to add the backend.

    uploadHandler = () => {
        const formData = new FormData();
        formData.append('file', this.state.picture);
        console.log()

        let context = 'profile';
        service.uploadImage(formData,
            this.state.picture,
            context, (res) => {
                if (res.status === "ERROR") {
                    console.log("ERROR: ", res);
                    stopLoading();
                }
            });
    }

And the upload function -

export const uploadImage = (file, fileName, context, onDone) => {
    console.log(fileName)
    post(encodeURI("/api/upload-files/" + fileName  + "/" + context), file, (res) => {
        onDone(res.data);
    });
};

And the backend code, I am using FastAPI- Python for it-

@router.post("/upload-files")
async def image(image: UploadFile = File(...)):
    print(image.filename)
    return {"filename": image.filename}

I checked the values and the results are right on backend but on webpage it is showing 422: preprocessing error. Please give some idea what's the process or some hint so I can complete the code.