Add popups to unclustered layer points

[JacobAstonUD]

I am trying to add clickable event so that when a user clicks on a single point on the unclustered layer (4px in radius) a single popup opens in relation to that point.

const [showPopup, togglePopup] = useState(false)

    <div>
      <ReactMapGL
        {...viewport}
        width="100%"
        height="400px"
        onViewportChange={(viewport) => setViewport(viewport)}
        mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
        mapStyle="mapbox://styles/mapbox/light-v9"
        interactiveLayerIds={[clusterLayer.id]}
        ref={mapRef}
      >
        <NavigationControl style={navControlStyle} />
        <FullscreenControl style={fullscreenControlStyle} />
        <Source
          id="deviceData"
          type="geojson"
          data={deviceData}
          cluster={true}
          clusterMaxZoom={14}
          clusterRadius={50}
        >
          <Layer {...clusterLayer} />
          <Layer {...clusterCountLayer} />
          <Layer {...unclusteredPointLayer} />
        </Source>
        {showPopup && <MapPopup  />}
      </ReactMapGL>
    </div>

If showPopup evaluates to true my MapPopup function is then called that has the Popup logic within there that maps over the array of locations I am passing to the parent function.

  function MapPopup() {
    return locations.map((point, i) => (
      <Popup
        key={i}
        latitude={Number(point.location.coordinates[1])}
        longitude={Number(point.location.coordinates[0])}
        closeButton={true}
        closeOnClick={true}
        onClose={() => togglePopup(false)}
        anchor="top"
        dynamicPosition={true}
        className="pop-up"
      >
        <div>{`Id: ${point.entityId}`}</div>
        <div>{`Location: ${point.location.coordinates[1]}, ${point.location.coordinates[0]}`}</div>
      </Popup>
    ))
  }

If anyone could help that would be amazing!

Thanks

[sheethalpatila]

you got aney solutions ?