Reactjs – How can I send an image inside a form in a state variable in react to a django backend

I am trying to send an image to be stored in the backend. The image is stored in a react useState that is updated when the user changes the the input form and is sent to its django backend api. The api accepts other inputs, not just the image, that are strings. So to send the request I store everything in an useState and make the request in an async function. The api has been tested to work on postman, the problem is I don’t know too well how to make the request. The image is an optional parameter and therefore it works perfect just with the other inputs, without the image.

Previously, I ignored the image and went along with the other inputs to make the request, which worked perfectly. I did this by putting everything in an object. Although when I put the image in the same object it stops working. I looked around and I found out to send images I need to use the FormData constructor and so I did, but I encountered a few problems.

This is how my form component looks like:

export default function Component() {
    const [ image, setImage ] = useState<File>();


    const handleImageChange =  (e: React.ChangeEvent<HTMLInputElement>) => {
        const file = e.target.files?.[0];
        console.log('file', file)
        setImage(file);
    }

    const handleSubmit = async (e: any) => {
        const dummy_info = {
           name: "hello",
           start_date: "2024-01-01"
        }


        e.preventDefault();
  

        const formData = new FormData();


        formData.append('name', info.name);
        formData.append('start_date', info.start_date);
        
        if (image) formData.append('event_picture', image);

        const res = await apiService.post('<backend_api_url>', formData, {
                            "Content-Type": "multipart/form-data"
                       });

    }

    return (
            <form onSubmit={handleSubmit}>
              
                <input
                    // value={info.event_picture || ''}
                    className="self-center" id="image" type="file" accept="image/*"
                    onChange={handleImageChange}
                    />
                <button type="submit">Submit</button>
            </form>
    )
}

I have the following apiService object that I use to make these calls reliably, although I think this may be where one of the issues is:

const apiService = {
    post: async function(url: string, data?: any, extraHeaders?: any): Promise<any> {
        console.log('post', url, data);
        try {
            const token = await getAccessToken();
            const headers = {
                'Authorization': `Bearer ${token}`,
                "Content-Type": "application/json",
                'Accept': 'application/json',
            };

            if (extraHeaders) {
                Object.assign(headers, extraHeaders);
            }

            return new Promise((resolve, reject) => {
                fetch(`${process.env.NEXT_PUBLIC_API_HOST}${url}`, {
                    method: 'POST',
                    body: data,
                    headers: headers
                })
                    .then(response => response.json())
                    .then((json) => {
                        console.log('Response:', json);

                        resolve(json);
                    })
                    .catch((error => {
                        reject(error);
                    }))
            })
        } catch (e) {
            console.error('error fetching data', e);
        }

    },
}

When adding an image and making this request, I get as a response the following {detail: 'Multipart form parse error - Invalid boundary in multipart: None'}

I know the FormData object is not empty since I console.log it and it returns the values (for the image: ['event_picture', File])

note: I am using Nextjs and thank you in advance