Why is my Mapbox Fullscreen control not exiting on fullscreen button click?

I was trying to use Mapbox in my Angular project. Currently the map is placed inside a parent component. Somewhat like this:-

<div id="map" class="match-parent" #map></div>
<div class="mapviews">
    <button  id="controls"class="Satellite" (click)="satteliteView()"></button>
    &nbsp;
    <button id="controls" class="Terrain" (click)="terrainView()"></button>
    &nbsp;
    <button id="controls" class="FourGLTE" (click)="bandChange('outdoor')"></button>
    &nbsp;
    <button  id="controls"class="FiveG" (click)="bandChange('vehicle')"></button>
    &nbsp;
</div>

And the fullscreen control is added to the map like this:-

this.map.addControl(new mapboxgl.FullscreenControl({container: document.getElementById("map")}), 'bottom-right');

The full screen is working fine on clicking the full screen expand button. But it wont exit it on clicking that button on the full screen active mode. It exits on clicking Escape button or the cross at the top. What is the reason behind this?