Zoom-in and zoom-out move in wrong directions with Maptiler

Question

I am trying to use this API https://docs.maptiler.com/angular/ in my Angular project. I can create an normal map but when I zoom in or out my marker move in the completely wrong direction.

I tried change my scss and .ts in a hundered different ways. No idea why it moves wrong. Is it translated to the wrong position, but why?

My HTML:

<div class="map-wrap">
  <div class="map" #map></div>
</div>

My Component:

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Map, MapStyle, Marker, config } from '@maptiler/sdk';
import {getContainingImportDeclaration} from "@angular/compiler-cli/src/ngtsc/reflection/src/typescript";

@Component({
  selector: 'app-main-map',
  templateUrl: './main-map.component.html',
  styleUrls: ['./main-map.component.scss']
})

export class MainMapComponent implements OnInit, AfterViewInit, OnDestroy {
  map: Map | undefined;

  @ViewChild('map')
  private mapContainer!: ElementRef<HTMLElement>;

  ngOnInit(): void {
    config.apiKey = '4oaTVIMMIidsdNOe0mb'; //NOT A REAL KEY
  }

  ngAfterViewInit() {
    const initialState = { lng: 15.421371, lat: 47.076668, zoom: 14 };

    this.map = new Map({
      container: this.mapContainer.nativeElement,
      style: MapStyle.WINTER,
      center: [initialState.lng, initialState.lat],
      zoom: initialState.zoom
    });

    new Marker({color: "#FF0000"})
      .setLngLat([15.421371,47.076668])
      .addTo(this.map);
  }

  ngOnDestroy() {
    this.map?.remove();
  }
}

My SCSS:

.map-wrap {
  position: relative;
  width: 100%;
  height: 100vh
}

.map {
  top: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

I tried so many combinations of solutions, but I do not know what is wrong.