Click on clusters doesn't properly centered on zoom level < 5

**mapbox-gl-js version**: 2.6.1

**browser**: Chrome, Safari

### Steps to Trigger Behavior
If you use the provided official example on [Create and style clusters](https://docs.mapbox.com/mapbox-gl-js/example/cluster/) and have groups of location that separated quite far to each other then the click on a cluster will behavior strangely on zoom level 1-5.

When you click the cluster, it will zoom in but the item inside the cluster will not be at the center of the map. But if you go to a deeper zoom level first before click on the cluster, then it will zoom in and set the item inside the cluster in the center of the map.

Here's the GeoJSON used for testing, contain group of coordinates in Uganda and The Philippines: [geojson_source](https://res.cloudinary.com/dg6qbkif4/raw/upload/v1641537130/location_sample_ml9eaw.json).

1. Go to zoom level 3
2. Click on a cluster
3. See the result

Below is the demonstration I made, by using the code in https://docs.mapbox.com/mapbox-gl-js/example/cluster/ and change the geojson source to https://res.cloudinary.com/dg6qbkif4/raw/upload/v1641537130/location_sample_ml9eaw.json

### Link to Demonstration

https://jsfiddle.net/65rjmf7n/1/

### Expected Behavior
Zoom in and see the points inside the cluster at the center of the map.

### Actual Behavior
Zoom in but the points inside the cluster is not visible or placed in the right/left side of the screen.

Start with the official Create and style clusters example and the linked JSFiddle, reproducing the issue at zoom level 3 with the supplied GeoJSON. Trace the cluster click behavior in the mapbox-gl-js code; done means clicking a cluster at zoom levels 1–5 centers the resulting points as expected.

Written by the indexing model from the issue text.