How to use the mapbox-gl.Marker function in mapbox-gl

onClick(evt) {
      // add a marker on the map wherever you clicked
      new mapboxgl.Marker().setLngLat(evt.lngLat).addTo(map);
      console.log('clicked at', evt.lngLat);
    },

center: [location.position.Longitude, location.position.Latitude],
        zoom: 13,
      })
      let el = document.createElement('div')
      el.className = 'marker'
      el.style = 'display:inline-block;'
      ReactDOM.render((
        
          
        
      ), el)
      this.map.addControl(new mapboxgl.NavigationControl(), 'top-left')
      this.map.addControl(new mapboxgl.FullscreenControl({ container: document.querySelector('body') }))
      this.map.on('mousemove', this.handleMouseStart)
      this.map.on('mouseout', this.handleMouseOut)
      new mapboxgl.Marker(el)
        .setLngLat([location.position.Longitude, location.position.Latitude])
        .addTo(this.map)
      console.log(this.fixedHeaderEl.current.clientHeight)
      this.setState({
        headerHeight: this.fixedHeaderEl.current.clientHeight,
      })
    }

    (function(d, s, id) {
      // if(!document.querySelector('#moovit-jsw')){
      let js, fjs = d.getElementsByTagName(s)[0]
      js = d.createElement(s)
      js.id = id
      js.src = 'https://widgets.moovit.com/wtp/pl'
      fjs.parentNode.insertBefore(js, fjs)
      // }

poiMarker.map((location) => {
          var el = document.createElement('div')
          el.className = 'marker-icon'
          el.innerHTML = location.marker
          // make a marker for each feature and add to the map
          const m = new mapboxgl.Marker(el)
            .setLngLat([location.longitude, location.latitude])
            .addTo(this.map)
          m.location = location
        })
      }

ngAfterViewInit() {
    this.markerInstance = new Marker(this.content.nativeElement, { offset: this.offset });
    this.markerInstance.setLngLat(this.feature ? this.feature.geometry!.coordinates : this.lngLat!);
    this.MapService.mapCreated$.subscribe(() => {
      this.MapService.addMarker(this.markerInstance!);
    });
  }

function markerFactory(name, long, lat, img, map){
			let markerDomEl = document.createElement('div')
			markerDomEl.className = 'mapMarker'
			markerDomEl.name = name
			markerDomEl.style.backgroundImage = img

			new mapboxgl.Marker(markerDomEl)
				.setLngLat([long, lat + 0.001])
				.setPopup(new mapboxgl.Popup({ offset: 25 })
					.setHTML('<h5>' + markerDomEl.name + '</h5>'))
				.addTo(map)
		}
		markerFactory(this.meetingPlace.name, this.meetingPlace.coordinates.longitude, this.meetingPlace.coordinates.latitude, 'url(../DestPin.png)', this.map)

createDomMoveMarker(coord: number[], data) {
    const el = document.createElement('div');
    el.className = 'moveMarkerIcon';
    const marker = new mapboxgl.Marker(el, { offset: [0, -15] }).setLngLat(coord);
    marker.data = data;
    return marker;
  }

renderPositionMarker(geolocation) {
        if (this.renderedPositionMarker !== null) {
            this.renderedPositionMarker.remove();
        }
        const htmlElement = document.createElement('div');
        htmlElement.id = 'geolocation-marker';
        this.renderedPositionMarker = new MapboxGL.Marker({ element: htmlElement });
        this.renderedPositionMarker.setLngLat([geolocation.longitude, geolocation.latitude]);
        this.renderedPositionMarker.addTo(this.mapbox);
    }

addMarker() {
    const {feature, map} = this.props;

    const markerEl = document.createElement('div');
    ReactDOM.render(this.renderMarker(), markerEl);

    const popupEl = document.createElement('div');
    ReactDOM.render(
      ,
      popupEl,
    );

    const popup = new mapboxgl.Popup({offset: 50}).setDOMContent(popupEl);

    const marker = new mapboxgl.Marker({
      element: markerEl,
      offset: [0, -30],
    })
      .setLngLat(this._featureLngLat())
      .setPopup(popup)
      .addTo(map);

    this.setState({marker});
  }

addMarker() {
    const {feature, map} = this.props;

    const markerEl = document.createElement('div');
    ReactDOM.render(this.renderMarker(), markerEl);

    const popupEl = document.createElement('div');
    ReactDOM.render(
      ,
      popupEl,
    );

    const popup = new mapboxgl.Popup({offset: 50}).setDOMContent(popupEl);

    const marker = new mapboxgl.Marker({
      element: markerEl,
      offset: [0, -30],
    })
      .setLngLat(this._featureLngLat())
      .setPopup(popup)
      .addTo(map);

    this.setState({marker});
  }