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

export function setupMapPopups (map, $router, options = {}) {
  const wellsLayerIds = options.wellsLayerIds || DEFAULT_WELL_LAYER_IDS
  const aquiferLayerIds = options.aquiferLayerIds || [ AQUIFERS_FILL_LAYER_ID ]

  let clickedOnWell = false
  const popup = new mapboxgl.Popup()
  popup.on('close', () => {
    clickedOnWell = false
  })
  map.popup = popup

  wellsLayerIds.forEach((wellLayerId) => {
    map.on('click', wellLayerId, (e) => {
      // Check to see if we have already clicked on a well (could be an invisible EMS layer click)
      if (clickedOnWell) { return }
      clickedOnWell = true
      const feature = e.features[0]
      const contentDiv = createWellPopupElement($router, feature.properties, options)
      popup
        .setLngLat(getLngLatOfPointFeature(feature))
        .setDOMContent(contentDiv)
        .addTo(map)

const mapData = {
        contact: contact,
        pathLayerId: 'contact-route-' + contact.id,
        pointsLayerId: 'points-' + contact.id,
        hidden: false
      }
      const existingContact = this.state.currentContacts.find(item => item.id === contact.id)
      if (existingContact) {
        mapData.hidden = existingContact.hidden
      }
      this.mapDataStore.set(contact.id, mapData)
      this.addOrUpdateLayerForContact(mapData, locationsForContact)

      if (lastPoint) {
        const lastDate = formatRelativeTime(lastPoint.timestamp * 1000, { extended: true })
        const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(this.renderPopupMessage(contact.firstName, lastDate, null))
        if (mapData.marker) {
          // remove old marker
          mapData.marker.remove()
        }
        mapData.marker = new mapboxgl.Marker({ color: '#' + contact.color.toString(16) })
          .setLngLat([lastPoint.longitude, lastPoint.latitude])
          .setPopup(popup)
        if (mapData.hidden) {
          // the contact is hidden so don't show the contact's layers
          this.toggleContactLayer(contact.id, false)
        } else {
          mapData.marker.addTo(this.map)
        }
      }
    }
    return pointsForLayer

this.addSource();

        this.addMapLayers();

        // If REACT_APP_MAP_THEME is true, enable multiple map themes
        if (process.env.REACT_APP_MAP_THEME) {
            this.map.on('style.load', () => {
                this.addSource();

                // Always add the same layers after a style change
                this.addMapLayers();
            });
        }

        // Create a popup, but don't add it to the map yet.
        this.popup = new mapboxgl.Popup({});
    };

this.map.on('load', () => {
            this.initLayers();
            this.onMapMoved();

            this.map.on('moveend', this.onMapMoved);

            // Further chages on styles reinitilizes layers
            // this.map.on('style.load', () => {
            //     this.initLayers();
            //     this.onMapMoved();
            // });
        });


        this.popup = new mapboxgl.Popup({
            closeOnClick: false
        });
        this.popup.on('close', e => {
            if (this.selectedCycleway) {
                this.map.setFeatureState({ source: 'osm', id: this.selectedCycleway }, { highlight: false });
            }
            this.selectedCycleway = null;
        });

        this.hoverPopup = new mapboxgl.Popup({
            closeButton: false,
            className: 'hover-popup'
        });
        
        // Initialize map data center
        this.reverseGeocode(this.props.center);

protected putPopup() {
    if (this.popup) {
      this.popup.remove();
      this.popup = undefined;
    }

    if (!this.props.popup) {
      return;
    }
    const latlong = [this.props.popup.lnglat.lng, this.props.popup.lnglat.lat];
    const el = document.createElement('div');
    el.classList.add('idly-gl');
    render(SelectorPopup(this.props.popup.ids, this.props.actions), el);
    this.popup = new Popup()
      .setLngLat(latlong)
      .setDOMContent(el)
      .addTo(this.gl);
  }

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)

constructor() {
    super();
    this._mbMap = null;
    this._tooltipContainer = document.createElement('div');
    this._mbPopup = new mapboxgl.Popup({
      closeButton: false,
      closeOnClick: false,
    });
    this._mbDrawControl = new MapboxDraw({
      displayControlsDefault: false,
      modes: mbDrawModes
    });
    this._mbDrawControlAdded = false;
  }

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});
  }