progress bar with promise for multiple axios post request in reactjs

So i have one file upload component which can be used wherever needed. There is below line inside uploadFiles function which is in FileWidget.jsx file:

promises.push(axios.post('http://127.0.0.1:8000/api/upload', fileData, axiosConfig));

Using above line, i am pushing all axios post request into array and later on getting the responses which is needed. So far so good.

But the thing is i want to display progress bar which display progress of individual post request. There is axiosConfig variable which performs the progress bar related logic. But it's getting called when i pushed post request into array and not getting called when actual request happens. So not getting actual progressbar. so how to solve it?

what i tried

if i will replace promises.push with actual post request then it will shows the progress bar with actual progress but it will become sync process. i.e. one file will upload then another one etc. which is not i want.

await axios.post('http://127.0.0.1:8000/api/upload', fileData, axiosConfig)
    .then((res) => {
        let uploadResponse = [];
        var element = document.getElementById("progressBar" + fieldName + j);
        element.classList.remove("progress-bar-striped");
        element.classList.remove("progress-bar-animated");
        uploadResponse = {
            "orgFileName": res.data.originalName,
            "newName": res.data.newName,
            "fileStatus": res.status,
            "fileDestination": destinationfolder,
            "order": i
        }
        allFilesData.push(uploadResponse);
    })
    .catch((err) => {
        console.log('err', err);
    });

Full code

fileUploader/FileWidget.jsx

import React, { Component } from "react";
import PropTypes from 'prop-types';
import HtmlTemplate from "./HtmlTemplate";
import FileValidations from "./FileValidations";
import axios from 'axios';
class FileWidget extends Component {
    constructor(props) {
        super(props);
    }

    fileUploadFun = async (formID) => {
        let form = document.getElementById(formID);
        const allFiles = form.getElementsByClassName('file_widget_class');

        const response = await this.uploadFiles(allFiles, formID);
        return {
            status: true,
            response: response
        };
    }

    uploadFiles = async (allFiles, formID) => {
        let finalResponse = [];
        let inputData = [];
        let promises = [];

        console.log(formID);
        //@logic Loop through all the input type files
        for (let i = 0; i < allFiles.length; i++) {

            //@logic creating constant variables for storing props values.
            const fieldName = allFiles[i].attributes.name.value;

            //@logic now loop thorugh each uploaded files
            let allFilesData = [];
            for (let j = 0; j < allFiles[i].files.length; j++) {
                //@logic load percentbar component

                const fileObject = allFiles[i].files[j];

                //@logic file data array end
                let percentage = 0

                let axiosConfig = {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    },
                    onUploadProgress: (progressEvent) => {
                        percentage = parseInt(Math.round((progressEvent.loaded / progressEvent.total) * 100))
                        let progress = document.getElementById("progress" + fieldName + j);
                        let progressBarElement = document.getElementById("progressBar" + fieldName + j);
                        progress.classList.remove("hidden");
                        document.getElementById("progressBar" + fieldName + j).style.width = percentage + "%"
                        document.getElementById("progressBar" + fieldName + j).innerHTML = fileObject.name + " ( " + percentage + " % )"
                    },
                };

                /* now upload individual file on server */
                let fileData = new FormData();
                fileData.append('fieldName', fieldName);
                fileData.append('uploadOn', uploadon);
                
                promises.push(axios.post('http://127.0.0.1:8000/api/upload', fileData, axiosConfig));
            }
            await Promise.all(promises).then(function async(results) {
                results.forEach(function async(res, i) {
                    let uploadResponse = [];
                    uploadResponse = {
                        "orgFileName": res.data.originalName,
                        "newName": res.data.newName,
                        "fileStatus": res.status,
                        "fileDestination": destinationfolder
                    }
                    allFilesData.push(uploadResponse);
                });
            });

            //@logic creating resize array with different size options given in props
            inputData = {
                fieldName: fieldName,
                filesData: allFilesData,
            };
            await finalResponse.push(inputData);
        }

        // return output
        return finalResponse;
    }
}

export default FileWidget;

File from above function is getting called:
Register.jsx

import React, { Component } from "react";
import FileWidget from '../fileUploader/FileWidget';
import axios from 'axios';

class Register extends Component {
    onSubmitFun = async (e) => {
        e.preventDefault();
        const FileWidgetObj = new FileWidget;
        const output = await FileWidgetObj.fileUploadFun('register_from');
        console.log("output", output.response);
        // DO whatever with output
    }
}