Overlapping Layer Events

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class="relative w-full aspect-[9/16] max-h-[70vh] sm:max-h-full sm:aspect-video"
  standardControls
>
  {#each layers as { data, color }, i}
    <GeoJson id="layer{i + 1}" data={{ type: 'FeatureCollection', features: data }}>
      <CircleLayer
        {eventsIfTopMost}
        paint={{
          'circle-color': color,
          'circle-radius': ['get', 'radius'],
        }}
        on:click={(e) => {
          lastEvent[i] = e.detail.features?.[0];
        }}
        on:mouseleave={(e) => {
          lastEvent[i] = undefined;
        }}
        on:mousemove={(e) => {
          lastEvent[i] = e.detail.features?.[0];
        }}
      />
    </GeoJson>
  {/each}
</MapLibre>