Mapbox query Rendered Features does not return full country geometry

Question

I'm using mapbox and turf for a project. When I click on a country I want it to go to that country and display the whole country on the screen. So if I'm zoomed into a small country like Bhutan and I click on China I want it to zoom out and go up to show all of the country.

When I am zoomed out I can accomplish this and click any country and it will properly fitBounds but if I am already zoomed in it just moves slightly and doesn't zoom out. Here's the code

import mapboxgl from '!mapbox-gl'; // eslint-disable-line import/no-webpack-loader-syntax
import 'mapbox-gl/dist/mapbox-gl.css';
import bbox from '@turf/bbox';
...
map.current.on('click', 'countries-join', (e) => {
    const clickedPoint = [[e.point.x, e.point.y], [e.point.x, e.point.y]];
    const selectedFeatures = map.current.queryRenderedFeatures(clickedPoint, {layers['countries-join']});
    map.current.zoomTo(2) // I added this so it might zoom out before fittingBounds. It does not
    var bb = bbox({ type: 'FeatureCollection', features: selectedFeatures });
    map.current.fitBounds(bb, {padding: 50, linear: false});
});

If I console log the selectedFeatures when I'm zoomed out vs zoomed in it actually returns less geometry. Can anyone assist?