Rounding Icons used in a SymbolLayer in React-Native Mapbox

Question

I am using a Mapbox map in React Native. I am displaying User Images on the Map using a ShapeSource and a Symbol Layer. I am fetching the images from the spotify API and i want to round them before rendering them on the map.

In mapbox GL there is the option to addImage, using some standard data types to represent images.
Is there somthing like this in RN mapbox? Or is there a style method to round icons used in a Symbol Layer?

Thats my Map component

import React, { useEffect, useState, useRef } from "react";
import Mapbox from "@rnmapbox/maps";
import { Text, StyleSheet } from "react-native";

export const Map: React.FC = () => {
  const shapeSource = useRef<Mapbox.ShapeSource>(null);

  const [users, setUsers] = useState<null | GeoJSON.FeatureCollection>(null);
  const [images, setImages] = useState<null | {
    [aritstId: string]: { url: string };
  }>(null);
  const [loading, setLoading] = useState<boolean>(true);

  function createImagesState(geoJSONFeatures: GeoJSON.FeatureCollection) {
    geoJSONFeatures.features.forEach((feature) => {
      setImages((images) => ({
        ...images,
        [feature.properties.spotifyId]: {
          url: feature.properties.spotifyImage,
        },
      }));
    });
  }

  async function fetchUsers() {
    const res = await fetch("my backend. Returns a geoJSON Collection");
    const userData: GeoJSON.FeatureCollection = await res.json();
    setUsers(userData);
    createImagesState(userData);
    setLoading(false);
  }

  function handleUserClick(user: any) {
    console.log(user);
  }

  useEffect(() => {
    fetchUsers();
  }, []);

  if (loading) {
    return <Text>loading...</Text>;
  }

  return (
    <Mapbox.MapView
      style={styles.map}
      projection="globe"
      styleURL="mapbox://styles/joostwmd/clnd9yvn603pb01qu0re65k2h"
      attributionEnabled={false}
      logoPosition={{ bottom: -20, left: 20 }}
      scaleBarEnabled={false}
    >
      <Mapbox.Camera
        zoomLevel={4}
        centerCoordinate={[13, 52]}
        animationMode={"flyTo"}
        animationDuration={0}
      ></Mapbox.Camera>
      <Mapbox.Atmosphere
        style={{
          spaceColor: "rgb(169, 168, 245)",
          horizonBlend: 0.02,
          highColor: "rgba(238, 238, 253, 1)",
          color: "rgba(255,250,240, 1)",
          starIntensity: 0.8,
        }}
      />

      <Mapbox.Images images={images} />
      <Mapbox.ShapeSource
        id="users"
        shape={users}
        onPress={(user) => handleUserClick(user)}
        ref={shapeSource}
        cluster={true}
        clusterRadius={50}
        clusterMaxZoomLevel={14}
      >
        <Mapbox.SymbolLayer id="pointCount" style={layerStyles.clusterCount} />
        <Mapbox.CircleLayer
          id="clusteredPoints"
          belowLayerID="pointCount"
          filter={["has", "point_count"]}
          style={layerStyles.clusteredPoints}
        />

        <Mapbox.SymbolLayer id="userIcons" style={layerStyles.icon} />
      </Mapbox.ShapeSource>
    </Mapbox.MapView>
  );
};

export default Map;

const layerStyles = {
  icon: {
    iconImage: ["get", "spotifyId"],
    iconAllowOverlap: true,
    iconSize: 0.3,
  },

  clusterCount: {
    textField: ["get", "point_count_abbreviated"],
    textSize: 12,
    textPitchAlignment: "map",
  },

  clusteredPoints: {
    circlePitchAlignment: "map",

    circleColor: [
      "step",
      ["get", "point_count"],
      "#51bbd6",
      100,
      "#f1f075",
      750,
      "#f28cb1",
    ],

    circleRadius: ["step", ["get", "point_count"], 20, 100, 30, 750, 40],

    circleOpacity: 0.84,
    circleStrokeWidth: 2,
    circleStrokeColor: "white",
  },
} as const;

const styles = StyleSheet.create({
  map: {
    flex: 1,
  },
});

Has someone an Idea how i could do this?

I tried to round the image using this function

async function loadUserImage(imgUrl: string): Promise<ImageData | undefined> {
    return new Promise((resolve, reject) => {
      const image = new Image();
      image.crossOrigin = "Anonymous";
      image.src = imgUrl;

      image.onload = () => {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

        if (canvas && context) {
          const targetSize = 25;
          const imageWidth = image.width;
          const imageHeight = image.height;
          const minDimension = Math.min(imageWidth, imageHeight);

          canvas.width = targetSize;
          canvas.height = targetSize;

          const scaleFactor = targetSize / minDimension;

          const xOffset = (targetSize - imageWidth * scaleFactor) / 2;
          const yOffset = (targetSize - imageHeight * scaleFactor) / 2;

          context.beginPath();
          context.arc(
            targetSize / 2,
            targetSize / 2,
            targetSize / 2,
            0,
            Math.PI * 2
          );
          context.clip();

          context.drawImage(
            image,
            xOffset,
            yOffset,
            imageWidth * scaleFactor,
            imageHeight * scaleFactor
          );

          const imageData = context.getImageData(0, 0, targetSize, targetSize);
          resolve(imageData);
        }
      };

      image.onerror = (error) => {
        reject(error);
        resolve(undefined);
      };
    });
  }

like this:

url: loadUserImage(feature.properties.spotifyImage)

but that crashed my app (this approach doesnt make to much sense to be fair...)