How to send an image and additional data body using fetch

Question

I'm trying to upload an image to a serverless function on firebase. I'm sending the request like this:

const updateProfileImage = (image) => {
        fetch(
            "http://localhost:5001/yelpcamp-d57d1/us-central1/uploadImage",
            {
                // Your POST endpoint
                method: "POST",
                headers: {
                    // Content-Type may need to be completely **omitted**
                    // or you may need something
                },
                body: JSON.stringify({
                    image: image,
                    userID: userID,
                }),
            }
        )
            .then(
                (response) => response.json() // if the response is a JSON object
            )
            .then(
                (success) => console.log(success) // Handle the success response object
            )
            .catch(
                (error) => console.log(error) // Handle the error response object
            );
    };

But I'm only receiving this on the other end:

 {"image":{},"userID":"*ID*"}

I'm not sure why the image data was removed, what is the correct way to do this?

The image file is retrieved from a HTML input like so:

<input
            name={id}
            id={id}
            type="file"
            style={{
                width: "0.1px",
                height: "0.1px",
                opacity: "0",
                overflow: "hidden",
                position: "absolute",
                zIndex: "-1",
            }}
            onChange={(e) => {
                uploadImage(e.target.files[0]);
            }}
/>

Thanks!