adding popup for cluster

hello there, i m using modern ui and i am trying to add a popup window over cluster marker to display names of devices that are being clustered when hovering over cluster marker.
i managed to add this popup window using tooltip function. the only issue is that i can seem to be able to add names of devices in there.
this is my code in short.

const updateClusterTooltip = useCallback((event) => {
    const features = map.queryRenderedFeatures(event.point, {
      layers: ['clusters'],
    });

    if (features.length > 0) {
      const cluster = features[0];
      const totalPoints = cluster.properties.point_count;
      const newTooltipContent = ` <div>
      Total points: ${totalPoints}
      <br/>
      Devices: ${totalPoints}
      </div>`;
      setTooltipContent(newTooltipContent);
    } else {
      setTooltipContent(null);
    }
  }, []);
.
.
.
  return (
    <div>
      {tooltipContent && (
        <div
          className="tooltip"
           // eslint-disable-next-line
          dangerouslySetInnerHTML={{ __html: tooltipContent }}
          style={{
            position: 'absolute',
            padding: '8px',
            borderRadius: theme.spacing(2),
            background: 'rgba(0, 0, 0, 0.7)',
            color: '#fff',
            maxWidth: '300px',
            pointerEvents: 'none',
            zIndex: 9999,
            transform: 'translate(-50%, -50%)',
            left: '-10000px',
            top: '-10000px',
          }}
        />
      )}
    </div>
  );
};

export default MapPositions;