Mapbox - Creating a layer acting as a mask for another layer

Question

I'm currently working with react-map-gl (6.1.21) and I'm encountering an issue that I've no idea how to solve

I have data for a heatmap and I render this in a layer. This works fine

<Source
          id="heatmap-source"
          type="geojson"
          data={{
            type: 'FeatureCollection',
            features: heatmapData.map((point) => ({
              type: 'Feature',
              properties: {},
              geometry: {
                type: 'Point',
                coordinates: point,
              },
            })),
          }}
        >
          <Layer
            id="heatmap-layer"
            type="heatmap"
            source="heatmap-source"
            paint={{
              'heatmap-weight': {
                type: 'exponential',
                property: 'density',
                stops: [
                  [0, 0],
                  [6, 1],
                ],
              },
              'heatmap-intensity': {
                stops: [
                  [0, 0],
                  [20, 1],
                ],
              },
              'heatmap-color': [
                'interpolate',
                ['linear'],
                ['heatmap-density'],
                0,
                'rgba(0, 0, 255, 0)',
                0.1,
                'rgba(255, 0, 0, 0.5)',
                0.3,
                'rgba(255, 255, 0, 0.7)',
                0.5,
                'rgba(0, 255, 0, 0.9)',density
                1,
                'rgba(0, 255, 255, 1)',
              ],
              'heatmap-radius': {
                stops: [
                  [0, 1],
                  [20, 100],
                ],
              },
            }}
          />
        </Source>

I have another layer that renders in black where there are buildings on the map. This works fine as well

        <Source id="building-source" type="vector" url="mapbox://mapbox.mapbox-streets-v8">
          <Layer
            id="building-layer"
            type="fill-extrusion"
            source-layer="building"
            paint={{
              'fill-extrusion-color': 'black',
              'fill-extrusion-opacity': 0.6,
            }}
          />
        </Source>

Now the issue is, I would like the heatmap layer to be rendered only on the building layer. The heatmap colors should only fill the buildings polygones, and not the roads / parks / rivers, ...

I've been battling the whole day with combinations of heatmap-opacity, filter, fill-extrusion and couldn't find any solution

Thank you for your help