How can I show the count of points in the particular latitude and longitude in Mapboxgl?

问题

I want to show the marker as well as the number of points available in a particular latitude and longitude.

I expect something Similar as above.

But i have added another 2 layers to show different color and number on it. If I do this way, I am getting "undefined" error while showing popup. Since the data takes from the other layer. If it takes from layer "locations" it works as expected. But when we have multiple occurences popup content shows "undefined". Below is my implementation output and code

 map.on('load', function () {

  map.addSource("place", {
    type: "geojson",
    data: liveData,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50 
  });

 map.addLayer({
    "id": "locations",
    "type": "circle",
    "source": "location",
    "paint": {
      "circle-radius": 7,
      "circle-color": "#FFF000",
      "circle-stroke-width": 4,
      "circle-stroke-color": "#FFFFFF"
    }

  });

     map.addLayer({
      id: "clusters",
      type: "circle",
      source: "location",
      filter: ["has", "point_count"],
      paint: {
          "circle-color": {
              property: "point_count",
              type: "interval",
              stops: [
                  [0, "#FFF000"],
                  [2, "#DC143C"],
              ]
          },
          "circle-radius": {
              property: "point_count",
              type: "interval",
              stops: [
                  [0, 7],
                  [2, 7],
              ]
          }
      }
  });

  map.addLayer({
      id: "cluster-count",
      type: "symbol",
      source: "location",
      filter: ["has", "point_count"],
      layout: {
          "text-field": "{point_count_abbreviated}",
          "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
          "text-size": 12,
          "text-offset": [0, 5]
      }
  });

 map.on('click', 'locations', function (e) {
    let htmlString = "";
    for (let i = 0; i < e.features.length; i++) {
      htmlString = htmlString + e.features[i].properties.description;
      if (i != e.features.length - 1) {
        htmlString = htmlString + "</br>";
      }
    }
    new mapboxgl.Popup()
      .setLngLat(e.features[0].geometry.coordinates)
      .setHTML(htmlString)
      .addTo(map);

  });
 }

My working fiddle

I want to achieve this as first picture or popup should work in my approach?