Ant design Upload component only work on second try

Question

I'm using Ant Design upload component, every thing work fine but only on second try. When my page first load, the upload button is rendering with a + icon. When I first select a file, I can see that handleUpload() is called because of the upload button changing icon. But no request is sent to the endpoint (according to the network tool in firefox and my api logs). The console.log in handleUpload is showing a response stuck at 0% completion. If I try a second time (or more), it's working perfectly. Why don't this work on the first try ?

Here is my Upload component :

return <div id="main-image">
                {recipe.mainImage ? (
                    <img src={recipe.mainImage} alt="avatar" />
                ) : (
                    <Upload
                        listType="picture-card"
                        showUploadList={false}
                        withCredentials
                        action="http://127.0.0.1:8000/http/upload-file?path=images/"
                        accept="image/*"
                        beforeUpload={(file) => {return true}}
                        onChange={handleUpload}
                    >
                        {uploadButton}
                    </Upload>
                )}
                </div>

And my handleUpload function :

const handleUpload = (info) => {
    console.log(info);
    if (info.file.status === 'uploading') {
      setUploading(true);
      return;
    }
    if (info.file.status === 'done') {
        setUploading(false);
        setRecipe({
            ...recipe,
            mainImage: info.file.response.fileUrl
        })
        return;
    }
};

upload button :

const uploadButton = (
    <div>
        {uploading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{marginTop: 8}}>Upload your image</div>
    </div>
);

EDIT : On the first try, here is the info.file logged in the console by handleUpload() function :

lastModified: 1682889865932
lastModifiedDate: undefined
name: "Hotpot.png"
originFileObj: File { … }
percent: 0
size: 111193
status: "uploading"
type: "image/png"
uid: "rc-upload-1696332634018-7"

There is no response inside. In the info return by Upload component, there is also no event object. Instead I have a object with a lot of empty objects containing function names.

Answer 1

So it turned out that the button that was supposed to fire the upload request had a normal icon and a "loading" icon. When the upload begins, the icon was changed which cause the button to be reloaded before the request was fired.