Mapbox, JS API, Uber like Marker

Question

@ViewChild('mapbox', { static: true }) mapDivElement!: ElementRef;
  map: mapboxgl.Map | undefined;
  marker: mapboxgl.Marker | undefined;

  ngOnInit() {
    this.map = new mapboxgl.Map({
      accessToken: 'pk.eyJ1IjoiYWxiZXJ0b2FsZWphbmRybzEwIiwiYSI6ImNsaTIydm9iNjEyNnkzc21iY2t2djkwcGoifQ.FftaCYWGwc83vgJcHPAfDA',
      container: this.mapDivElement.nativeElement,
      style: 'mapbox://styles/mapbox/streets-v12',
      center: { lat: 43.238949, lng: 76.889709 },
      zoom: 12
    });

    this.map.addControl(new mapboxgl.NavigationControl());

    this.marker =  new mapboxgl.Marker({ color: 'red' })
      .setLngLat({ lat: 43.238949, lng: 76.889709 })
      .addTo(this.map);

    this.map.on('move', () => {
      this.marker?.setLngLat(this.map ? this.map.getCenter() : { lat: 43.238949, lng: 76.889709 });
    });
  }

My template is just: <div #mapbox class="map-container"></div>

Here the Marker is always in the center

But when I zoom in/out with two fingers, the map doesn't scale relative to the marker, so the marker position moves when I zoom with two fingers. (it changes because my marker is always in the center of the map)

I want it to be relative to the marker when I zoom with two fingers. So, when I scale the map with two fingers, the position of the marker does not change.

I would be glad if you could provide possible solutions in JavaScript or TypeScript. does not matter (framework, Google Maps, 2GIS, Mapbox)