[Bug]: Strange Artifacts when rendering a RasterLayer and zooming in

Mapbox Implementation

Mapbox

Mapbox Version

10.19.1

React Native Version

0.74.5

Platform

iOS

@rnmapbox/maps version

10.1.33

Standalone component to reproduce

import React from 'react';
import {
  MapView,
  ShapeSource,
  LineLayer,
  Camera,
  RasterSource,
  RasterLayer
} from '@rnmapbox/maps';

const aLine = {
  type: 'LineString',
  coordinates: [
    [-74.00597, 40.71427],
    [-74.00697, 40.71527],
  ],
};

const TILESERVER = '<OUR_TILESERVER>';

class BugReportExample extends React.Component {
  render() {
    const layers = [{name: 'consume_with_pedestrian_zones'}];
    return (
      <MapView style={{flex: 1}}>
        <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
         {layers.map(({ name }) => (
           <RasterSource
            key={name}
            id={name}
            tileSize={256}
            tileUrlTemplates={[
              `${TILESERVER}/${name}/{z}/{x}/{y}.png"`
            ]}
          >
            <RasterLayer
              id={name}
              sourceID={name}
              style={{
                visibility: 'visible',
                rasterOpacity: 14
              }}
            />
          </RasterSource>
        ))}
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

The map gets displayed correctly and the layers render. On higher zoom levels everything looks fine, but there is a threshold when strange artifacts, semi transparent black rectangles, start to appear (s. screenshots attached). When I zoom in more and more it gets worse and worse. Its also not the same behavior for all RasterLayers, I have some layers only representing schools, which are green polygons, that do not have this problem. Only the layers with those larger, red circles are affected. The bigger the circles, the bigger the artifacts.
We use the same layers in our web application using leaflet.js, which renders just fine, so I guess it is an Mapbox issue.

Expected behavior

Those semi transparent, black rectangles should not be there.

Notes / preliminary analysis

No response

Additional links and references

No response

Start with the provided iOS reproduction using RasterSource and RasterLayer at the stated versions, then trace the mobile raster rendering path. Compare affected layers with the unaffected school polygons and verify the result by reproducing the zoom threshold; done means the semi-transparent black rectangles no longer appear as zoom increases.