Keep flyTo path centered while resizing

mapbox-gl-js version: v2.9.1

Question

I have a use case where I am flying to a location while simultaneously resizing the map container . The issue is that the map zooms to the incorrect location (it is offset up and to the left). Here is a condensed version of the code that I am using:

// This zooms the map to the location of a marker when clicked
marker.getElement().addEventListener("click", () => {
  map.current?.flyTo({
    center: [location.longitude, location.latitude],
    zoom: 14,
    duration: 4000,
  });
}

.
.
.

// This is the map element
// It uses framer motion to animate the scaling and calls the `resize()` function every frame during the animation
// If you don't know what framer motion is, it is a library which helps perform animations (in this case minimizing and maximizing a div)
return <Box
          ref={mapContainer}
          animate={props.minimized ? "mini" : "full"}
          onUpdate={() => map.current?.resize()}
        />

Here is a video demonstration of the issue: (When I click on the map it minimizes to the top-left corner. When I click a marker, the map minimizes to the top-left corner while also flying to the clicked location. When the map is simply minimizing but not flying to a location, it stays perfectly centered, but not when flying to a location.)

https://user-images.githubusercontent.com/13614780/175381581-bdb4340b-d29b-4453-bc70-ed22188efe33.mp4

Links to related documentation

https://docs.mapbox.com/mapbox-gl-js/example/flyto/