features field is not contained even interactiveLayerIds is specified

[SuhaibMaraqa]

I have an issue where the features field is not in the event coming from onClick function in react-map-gl. Even though this is what the docs specified.

import { FC, useCallback, useEffect, useRef, useState } from 'react';
import {
  FullscreenControl,
  Layer,
  Map,
  MapRef,
  NavigationControl,
  Source,
  Popup,
  MapLayerMouseEvent,
} from 'react-map-gl';

import 'mapbox-gl/dist/mapbox-gl.css';
import { useGetMapSites } from 'helpers/siteProfileHelpers';
import { IFeature, IMapSite } from 'interfaces';

interface IProps {
  className?: string;
}

interface IMapImage {
  id: string;
  url: string;
}

const industries = [
  'Agriculture',
  'Construction',
  'Filming',
  'General',
  'Insurance',
  'Oil&Gas',
  'Solar',
  'T&D',
  'Telecom',
  'Wind',
];

const markersColors = ['green', 'grey', 'blue'];

const SitesMap: FC<IProps> = ({ className }) => {
  const mapBoxAccessToken = import.meta.env.VITE_MAP_BOX_ACCESS_TOKEN as string;

  const [mapSites, setMapSites] = useState<IFeature[]>([]);

  const { data, isLoading } = useGetMapSites();

  useEffect(() => {
    if (data && !isLoading) {
      const sites = data.sites.map(site => {
        site.featureObj.properties.icon = site.featureObj.properties.industry;

        return site.featureObj;
      });
      setMapSites(sites);
    }
  }, [data, isLoading]);

  useEffect(() => {
    console.log('mapSites: ', mapSites);
  }, [mapSites]);

  const [viewport, setViewport] = useState({
    latitude: 31.15912692970983,
    longitude: 35.74111968083642,
    zoom: 14,
  });

  const mapRef = useRef<MapRef>(null);

  const onMapLoad = useCallback(() => {
    mapRef.current?.resize();

    const customImages: IMapImage[] = [];

    industries.forEach(industry => {
      markersColors.forEach(color => {
        customImages.push({
          id: color + '-' + industry,
          url: `/src/assets/png/markers/${color}-${industry}-marker.png`,
        });
      });
      customImages.push({
        id: industry,
        url: `/src/assets/png/markers/${industry}-marker.png`,
      });
    });

    customImages.forEach(image => {
      mapRef.current?.loadImage(image.url, function (error, loadedImage) {
        if (error) throw error;
        if (!loadedImage) return;

        mapRef.current?.addImage(image.id, loadedImage);
      });
    });
  }, []);

  const addMapSitesOnMap = () => {
    return (
      <Source
        id='map-sites-source'
        type='geojson'
        data={{
          type: 'FeatureCollection',
          features: mapSites.map(site => site),
        }}
      >
        <Layer
          id='map-sites-layer'
          type='symbol'
          source='map-sites-source'
          layout={{
            'icon-image': ['get', 'icon'],
            'icon-size': 0.8,
            'icon-allow-overlap': true,
          }}
        />
      </Source>
    );
  };

  return (
    <div className={`h-full ${className ? className : ''}`}>
      <Map
        ref={mapRef}
        initialViewState={viewport}
        mapStyle='mapbox://styles/mapbox/streets-v12'
        mapboxAccessToken={mapBoxAccessToken}
        onMove={evt => setViewport(evt.viewState)}
        onLoad={onMapLoad}
        onMouseEnter={e => {
          if (!mapRef.current) return;

          mapRef.current.getCanvas().style.cursor = 'pointer';
        }}
        onMouseLeave={() => {
          if (!mapRef.current) return;

          mapRef.current.getCanvas().style.cursor = '';
        }}
        onClick={(e: MapLayerMouseEvent) => {
          console.log('e click', e);
        }}
        interactiveLayerIds={['map-sites-layer']}
        projection={{ name: 'globe' }}
        style={{
          borderRadius: '16px',
        }}
      >
        <NavigationControl position='top-right' />
        <FullscreenControl position='top-right' />

        {mapSites && addMapSitesOnMap()}
      </Map>
    </div>
  );
};

export default SitesMap;