Three.js LoadingManager onProgress only working after finished?

I'm trying to make a loading screen with a HTML progress bar in three.js. I use a THREE.LoadingManager() to pass into my GLTFLoader. I use the onProgress method to get when every model is loaded, but it doesn't seem to work. It only works at the end, once everything is loaded (so basically it jumps from 0% to 98%). I think it has something to do with me using a wrapper function. Here is my code:

let loadingManager = new THREE.LoadingManager();

loadingManager.onProgress = function(url, loaded, total){
    document.getElementById('loading-progress').value = Math.round((loaded / total) * 100);
    document.getElementById('loading-progress-label').innerHTML = `${Math.round((loaded / total) * 100)}%`;
}

let loader = new THREE.GLTFLoader(loadingManager);

function load(asset, pos=[0, 0, 0], rot=[-Math.PI / 2, Math.PI, Math.PI], scale=[5, 5, 5], appendTo){
    loader.load(`Assets/${asset}.glb`, function(object){
        object.scene.position.set(pos[0], pos[1], pos[2]);
        object.scene.rotation.set(rot[0], rot[1], rot[2]);
        object.scene.scale.set(scale[0], scale[1], scale[2]);
        object.scene.name = asset;

        scene.add(object.scene);

        if(appendTo != undefined){
            appendTo.push(object.scene);
        }
    });
};

//Decoration
load('platform_grass', [-5, 4, -0.5]);
load('platform_grass', [-2, 3, -0.5], undefined, [5, 10, 5]);
load('rock_largeA', [1, 3, -1], undefined, [2, 2, 2]);
load('plant_bushDetailed', [-5, 1, -1], undefined, [3, 3, 3]);
load('plant_bushDetailed', [-2, 6, -1], undefined, [3, 3, 3]);

I'm pretty sure the problem has to do with me using the load function, rather than manually loading each asset. Any help is appreciated.

Thanks!

from Three.js LoadingManager onProgress only working after finished?