in my react native app I use react-native-maps to show some custom markers on a google map, i wan to execute an action as prop when a user clicks on a custom marker but I can’t seem to get this to work for some reason?

My custom marker:

const areEqual = (prevProps, nextProps) => {
  return (
    prevProps.place.coordinates.lat === nextProps.place.coordinates.lat &&
    prevProps.place.coordinates.lng === nextProps.place.coordinates.lng
  );
};

const UserMapPin = memo((props) => {
  const [trackView, setTrackView] = useState(true);
  const navigation = useNavigation();
  const root = useStore();

  const changeTrackView = useCallback(() => {
    setTrackView(false);
  }, []);

  const greyOutPlace = () => {
    return root.userStore.beenThereIds.includes(props.place.id);
  };

  const onPressedIcon = () => {
    Alert.alert('Marker Pressed');
    if (props.onPress) {
      props.onPress(props.place);
    }
  };

  return (
    <Marker
    onCalloutPress={onPressedIcon}
      tracksViewChanges={trackView}
      tracksInfoWindowChanges={false}
      key={props.key}
      coordinate={{
        latitude: Number(props.place.coordinates.lat),
        longitude: Number(props.place.coordinates.lng)
      }}
    >
      
      <TouchableOpacity
        activeOpacity={0.6}
        //onPress={onPressedIcon}
        style={{
          zIndex: 999999999999999,
          elevation: 4,
          borderWidth: 0,
          alignItems: 'center',
          justifyContent: 'center',
          borderColor: 'white',
          width: 100,
          height: 100,
          overflow: 'hidden',
          borderRadius: 100 / 2
        }}
      >
        <View style={{ width: 80, height: 80, borderRadius: 80 / 2, position: 'relative' }}>
          <FastImage
            onLoadEnd={changeTrackView}
            fadeDuration={0}
            source={{
              uri: `${env.BASE_URL}${props.place.images[0]}`,
              priority: FastImage.priority.high
            }}
            style={{
              width: 80,
              height: 80,
              borderRadius: 80 / 2,
              borderWidth: 3,
              backgroundColor: 'rgb(235,235,235)',
              borderColor: 'white'
            }}
            resizeMode="cover"
          />
          <View
            style={{
              width: 30,
              height: 30,
              borderRadius: 30 / 2,
              position: 'absolute',
              bottom: 5,
              right: 5,
              alignItems: 'center',
              justifyContent: 'center',
              backgroundColor: root.uiStore.secondaryColor,
              borderWidth: 2,
              borderColor: 'white'
            }}
          >
            <Text
              allowFontScaling={false}
              style={{
                fontSize: 14,
                color: 'white',
                textAlign: 'center',
                fontFamily: 'IBMPlexSans-Medium'
              }}
            >
              {props.index + 1}
            </Text>
          </View>
        </View>
      </TouchableOpacity>
     
    </Marker>
  );
}, areEqual);

export default UserMapPin;

and how I show markers on my map:

<MapView style={{ width:'100%',height:mapHeight,position:'absolute',top:0,left:0,right:0,bottom:-25 }}  ref={mapRef} pitchEnabled={true} rotateEnabled={false} zoomEnabled={true} scrollEnabled={true} 
        onMapReady={ ()=>{onMapReady()}}  showsUserLocation={ false } initialRegion={{
            latitude: Number(root.userStore.user.lat),
            longitude: Number(root.userStore.user.lng),
            longitudeDelta: 0.01,
            latitudeDelta: 0.01
        }}


        onRegionChangeComplete={ region => { handleRegionChange(region) }}>

         
           {root.userStore.myPlan.places[root.userStore.selectedDayIndex].map((place,index) => (

<YouTourCustomMarker onPress={() => handleMarkerPress(place)} place={place} index={index}></YouTourCustomMarker>
                
            ))}

          
        </MapView>