Bootstrap 5 Progress Bar not updating from JavaScript event handler [duplicate]

I am uploading an Excel file in the browser using a standard file object and have an event handler so that when the file is selected I kick off a function that parses through the Excel file. I am using a Progress bar to illustrate progress of this parsing to the user. Every time I complete a sheet of the Excel file I attempt to update the progress bar. However, the progress bar only updates at the end of the function and does not show the increments. I have an extract of my code below. Any advice would be greatly appreciated.

// This function is called to process uploaded Excel file
async function handleFileAsync(e) {

    // Create reference to file object
    var files = e.target.files;

    // Read in the Excel file data
    const file = files[0];
    const data = await file.arrayBuffer();
    const workbook = XLSX.read(data, { cellStyles: true });
    var numsheets = 0;

    // Declare variable to denote if error count sheet was found
    var errorcountfound = false;

    // Search for Error Count worksheet
    for (i = 0; i < workbook.SheetNames.length; i++) {

        // Increment the number of sheets if not an error one
        if (workbook.SheetNames[i] != 'ERROR COUNT' && workbook.SheetNames[i] != 'ERROR LIST')
            numsheets++;

        // Check for error count
        if (workbook.SheetNames[i] == 'ERROR COUNT') {

            // Create reference to the error sheet
            var errorsheet = workbook.Sheets[workbook.SheetNames[i]];

            // Flag that error sheet was found
            errorcountfound = true;

        }


    }

    // Declare variables to store parsed SQL
    var processedsheets = 0;

    // Loop through the list of worksheets
    for (i = 0; i < workbook.SheetNames.length; i++) {

        // Ignore the error List sheet
        if (workbook.SheetNames[i] != 'ERROR LIST' && workbook.SheetNames[i] != 'ERROR COUNT') {

            // update the processed sheets count
            processedsheets++;

            // Update the progress bar
            var progress = Math.round(((parseFloat(processedsheets) / parseFloat(numsheets))) * 100);
            $('.progress-bar').attr('aria-valuenow', progress).css("width", progress + '%');
            $('.progress-bar').text(progress + '%');

        }

    }

    // Show the Upload Button
    $("#prduploadbtn").removeClass('d-none');

}

// Add event handler for change to the PRD file
document.getElementById("prdFile").addEventListener("change", handleFileAsync, false);

HTML progress bar

            <div class="progress" style="height: 40px;">
          <div id="uploadprogress" class="progress-bar progress-bar-striped progress-bar-animated text-center" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>