All custom images will not display on PointAnnotations - React Native Mapbox - @rnmapbox/maps

Question

Tried every possible solution found online, but I am still getting the same issue, it loads up only 1 image out of the 4 images I am trying to display.

I also tried to add a setTimeOut

<>
  {filteredList.map((item, i) => {
    return (
      <PointAnnotation
        coordinate={item.locations.coordinates}
        id={`pointAnnotation_${item._id}`}
        key={`pointAnnotation_${item._id}`}
        title={`current_${item._id}`}
        // anchor={{ y: 1, x: 0.5 }}
      >
        <View style={styles.locationWrapper}>
          <View style={styles.innerLocationWrapper}>
            <Image
              source={PIN}
              style={styles.imageStyle}
              resizeMode={'contain'}
            />
            <View
              style={[
                {
                  backgroundColor: item.dealType
                    ? DARK_PURPLE
                    : SELECTED_COLOR,
                },
                styles.kmWrapper,
              ]}>
              <Text style={styles.milesTextStyle}>
                {getDistance(item.locations)}
              </Text>
              {item.category && (
                <Ionicons
                  name={item.category.toLowerCase()}
                  color={WHITE}
                  size={10}
                />
              )}
            </View>
          </View>
        </View>
      </PointAnnotation>
    );
  })}
</>