Force Rerender of React Functional Component

Question

I am using rnmapbox/maps in my project and want to display user images on the map. I cannot get the Images to show up. From my research, the answer is to rerenderthe image component, once the image is loaded. That makes sense, because when i add a console.log() to the onLoad method of an RN image , it appears in my console. So the images can be loaded I just need to refresh the component so that they also appear on the map, but i can figure out how :(

This is my UserMarker component

import React, { useEffect, useState } from "react";
import { View, Image, Text } from "react-native";

export const UserMarker: React.FC<{
  index: number;
  user: {
    geometry: { coordinates: [number, number] };
    properties: { spotifyImage: string };
  };
}> = ({ index, user }) => {
  const [imageLoaded, setImageLoaded] = useState<boolean>(false);

  function handleImageLoad() {
    console.log("loaded", index);
    setImageLoaded(true);
  }
  return (
    <View>
      <Image
        source={{ uri: user.properties.spotifyImage }}
        style={{ width: 100, height: 100, opacity: imageLoaded ? 1 : 0.5 }}
        onLoad={handleImageLoad}
      />
      <Text>test</Text>
    </View>
  );
};

and this is my map component:

<Mapbox.MapView
          style={styles.map}
          projection="globe"
          styleURL="somestyleurl"
          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,
            }}
          />
          {artists &&
            artists.map((user, index) => {
              return (
                <TouchableOpacity key={`usermarkerwrapper${index}`}>
                  <Mapbox.PointAnnotation
                    id={`usermarker${index}`}
                    key={`usermarker${index}`}
                    coordinate={user.geometry.coordinates}
                    onSelected={() =>
                      openArtistModal(user.properties.spotifyId)
                    }
                  >
                    <UserMarker user={user} index={index} />
                  </Mapbox.PointAnnotation>
                </TouchableOpacity>
              );
            })}
        </Mapbox.MapView>