Mapbox feature state with promoteId

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.7.0/mapbox-gl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuid.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoiZGxiczAiLCJhIjoiY20wdGlpMmc2MHJqaDJsczVtNXRvN2ZneCJ9.47aVkXUGN8JNldnZUjj-nA";

function generateRandomPoint(center, radius) {
  const x0 = center.lng;
  const y0 = center.lat;
  // Convert Radius from meters to degrees.
  const rd = radius / 111300;

  const u = Math.random();
  const v = Math.random();

  const w = rd * Math.sqrt(u);
  const t = 2 * Math.PI * v;
  const x = w * Math.cos(t);
  const y = w * Math.sin(t);

  const xp = x / Math.cos(y0);

  // Resulting point.
  return { lat: y + y0, lng: xp + x0 };
}

const center = { lat: 35.6764, lng: 139.65 };

function generateFeatureCollection() {
  const featureCollection = { type: "FeatureCollection", features: [] };
  for (let i = 0; i < 10000; i++) {
    const { lat, lng } = generateRandomPoint(center, 10000);
    const feature = {
      type: "Feature",
      geometry: {
        type: "Point",
        coordinates: [lng, lat]
      },
      properties: {
        id: uuid.v4()
      }
    };
    featureCollection.features.push(feature);
  }
  return featureCollection;
}

const map = new mapboxgl.Map({
  container: "map", // container ID
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: "mapbox://styles/mapbox/standard", // style URL
  zoom: 10, // starting zoom
  center: [center.lng, center.lat] // starting position
});

map.on("load", () => {
  map.addSource("points", {
    type: "geojson",
    data: generateFeatureCollection(),
    promoteId: 'id',
    // generateId: true,
  });

  // Add a layer to use the image to represent the data.
  map.addLayer({
    id: "points",
    type: "circle",
    source: "points", // reference the data source
    paint: {
      "circle-color": "#abcdef",
      "circle-stroke-width": 1
    }
  });
  map.addLayer({
    id: "points-hover",
    type: "circle",
    source: "points", // reference the data source
    paint: {
      "circle-color": "#fff",
      "circle-stroke-width": 1,
     ...