MapBox Smooth Transition of Resizing Map

I have a website for CVOID-19 that displays cases on a MapBox map. One of the buttons on the website hides the case info so you get the the full map. The width transition of the case info box works nicely, but it leaves the map un-resized. Thankfully there is a method conveniently named map.resize() that resizes the map into it's appropriate size after the width of the case info box goes down to zero using a transitionend event. However the resizing isn't transitioned at all and it ends up looking incredibly janky with the sudden resizing of the map out of no where.

This is the solution I came up with, on the start of the transition you call the map.resize() function every 10 ms, and then you stop the interval once the transition has ended, it ends up looking quite a bit smoother.

let mapResizer;

countryPanel.addEventListener("transitionstart", (e) => {
    if (e.target == countryPanel) {
        mapResizer = setInterval(map.resize, 10);
    }
})

countryPanel.addEventListener("transitionend", (e) => {
    if (e.target == countryPanel) {
        if (e.target.classList.contains("hide")) {
            showBtn.hidden = false;
        }
        clearInterval(mapResizer);
    }
})

Here is the website displaying the effect when you click the hide UI button (the little arrow pointing to the left): https://people.rit.edu/ajr6974/330/Project%203/