Axios onUploadProgress jumps at 100% even before the request is done

Question

I have a controller that calls multiple external api from Gmail API concurrently, and then saves the retrieved data into the database, all of this in ONE post request.

To start, I pooled the external api requests, map the results and save it to db.

In my Controller:

$resp = Http::pool(fn (Pool $pool) [
            $pool->as('pool-1')->withToken($user->token)->get('https://....call-1');
            $pool->as('pool-2')->withToken($user->token)->get('https://....call-2');
            $pool->as('pool-3')->withToken($user->token)->get('https://....call-3');
        ]);

collect($resp)->map(function ($req) {

    Email::firstOrCreate(...);
})

In my vue component:

const config = {
            onUploadProgress: progressEvent => {
                    console.log(`sent: ${Math.floor((progressEvent.loaded * 100) / progressEvent.total)}`)
                }
        }

axios.post(url, param, config).then(response => {}).catch(err => {})

Now, when I check in console.

It should be logging:

sent:0
sent:1
sent:2
...
sent:100

But instead, it automatically logs sent:100 even though the post request is still pending.

Is this a bug in chrome? or axios?, or perhaps it has something to do with external api calls?

Or if it isn't, can someone point out where I went wrong?