Switching between map styles in Angular project using ngx-mapbox-gl causes error

[Safwene12]

I'm working on an Angular project (v14) where I'm using mapbox-gl (v0.54.1), ngx-mapbox-gl (v3.3.1), and @types/mapbox-gl (v0.51.12). I have successfully implemented Mapbox and everything works fine so far. However, I am now trying to implement a feature to switch between different map styles (e.g., from 'streets' to 'satellite'). Unfortunately, I keep encountering an error and haven't been able to resolve it.
//TypeScript map: Map; mapLoad$ = new AsyncSubject<Map>(); defaultLocation = [-71.31667230, 46.10154645]; mapMode: string = 'street'; ngOnInit() { this.mapLoad$.subscribe(map => { this.map = map; this.applyPreferences(); }); this.loadResources(); this.watchEvents(); } mapLoaded(event) { this.mapLoad$.next(event); this.mapLoad$.complete(); } changeMapMode(mapMode: string) { this.mapMode = mapMode; this.prefsService.setPreference(this.PREFERENCES_KEY, 'mapMode', mapMode); this.map.setStyle("mapbox://styles/mapbox/satellite-streets-v9") }

`// HTML
<mgl-map @mapAnimations class="mapbox-map" [style]="mapUrl" [maxZoom]="20"
[minZoom]="8"
[fitBounds]="mapBounds" [fitBoundsOptions]="{maxZoom: 14, padding: 150, duration:
2000}" (load)="mapLoaded($event)"
(moveStart)="userInteracted($event)">

<ng-container *ngIf="pinsHasLoaded">

<mgl-image id='pin-route-selected' [data]="pinRouteSelected">
<mgl-image id='pin-sideload-on_duty' [data]="pinSideLoadOnDuty">
EXT

navigation {{ 'control_center.recenter' | translate }}

<div class="mapMode-toggle">
  <mat-icon [inline]="true" (click)="changeMapMode('street')"
  [class.active]="mapMode == 'street'" matTooltip="{{'shared.street_style' | 
  translate}}">streetview</mat-icon>
  <mat-icon [inline]="true" (click)="changeMapMode('satellite-street')"
  [class.active]="mapMode == 'satellite-street'" matTooltip=" 
  {{'shared.satellite_street' | translate}}">satellite</mat-icon>
</div>

`

The error I'm encountering on click on changeMapMode :

I've tried several approaches but none seem to work. For instance,I have tried to add an attribute mapUrl and passed to the [style] property and then change it on click on changeMapMode but I get the exact same error.

I suspect the issue might be related to the version compatibility or the way I'm trying to switch styles. Any guidance or suggestions on how to properly switch between map styles would be greatly appreciated.

Thank you!