Keep flyTo path centered while resizing

Nobody has claimed this yet.

**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:

```tsx
// 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 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/

The report names flyTo(), resize(), and the flyto example, but no source file or test. Start by reproducing the resize-and-fly sequence from that example and trace those API entry points; done means the target remains centered while the map container is resized during the flight.

Written by the indexing model from the issue text.