[Bug]: Artifacts appearing when zooming in on a RasterLayer

[glappsi]

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 = '<CUSTOM_TILES>';

const TileLayer = ({
  name
}) => {
  return (
    <RasterSource
      id={name}
      tileSize={256}
      tileUrlTemplates={[
        `${TILESERVER}/${name}/{z}/{x}/{y}.png"`
      ]}
    >
      <RasterLayer
        id={name}
        sourceID={name}
        style={{
          visibility: 'visible'
        }}
      />
    </RasterSource>
  );
};

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 }) => (
          <TileLayer
            key={name}
            name={name}
          />
        ))}
      </MapView>
    );
  }
}

Observed behavior and steps to reproduce

When zooming in with my custom RasterLayer being rendered, after a certain threshold, artifacts start to appear (s. screenshots). It only affects certain of my custom layer (big, red circles), others (green, smaller polygons) are not affected. It gets worse the bigger the circles get. For smaller circles it starts between zoom 15 and 16, for larger ones between 14 and 15. The larger the zoom the bigger the artifacts. I also built this feature for a web application using leaflet.js, where this issue does not appear, so I figured it must be MapBox related.

Expected behavior

No response

Notes / preliminary analysis

No response

Additional links and references

No response

[github-actions[bot]]

Lint failed :sob:

Please fix the errors in your code example - More info.:

error: 'name' is missing in props validation (react/prop-types) at example.jsx:23:3:
  21 | 
  22 | const TileLayer = ({
> 23 |   name
     |   ^
  24 | }) => {
  25 |   return (
  26 |     <RasterSource

1 error found.```