I have an app where I render thumbnails via map and wrap them in a which links to a function which then handles with the image press. The issue is that instead of the 29 thumbnails I have mapped when I enter the view I get 58 images. And they are all duplicated with no value.

Ex. I tap on the first image and it detects that it's image number 0 and then handles the rest. I tap on image number 30 and it detects that it's image number 0 but then does nothing.

I have tried taking that part and creating a new child components with it using React.memo but that only made it so that the duplicate images no longer have the styling of the original ones, so instead of getting displayed in a grid they just arrange one under another.

Here's my code (I have not included absolutely everything since I have other parts which are not relevant):

function VideosScreen({ navigation }) {
  const video = React.useRef(null);
 
<
  const [videos, setVideos] = useState([]); - 
  const [modalVisible, setModalVisible] = useState(false);
  const [youtubeLink, setYoutubeLink] = useState("");
> - from a different part but may be useful for context
 
 
const imageURL = [
    require("../assets/images/video_thumbnails/w1.jpg"),
[..28 other thumbnails..]
];
 
const handleImagePress = (index) => {
    navigation.navigate(
      "IndividualVideo",
      { pathing: index },
      { imageIndex: index }
    );
    console.log(index, "in videos.js");
  };
 
return (
 
<SafeAreaView>
          <View style={styles.container}>
            {imageURL.map((imageURL, index) => (
              <Pressable key={index} onPress={() => handleImagePress(index)}>
                <Image source={imageURL} style={styles.item} />
              </Pressable>
 
[..]
 
const styles = StyleSheet.create({
[..]
  container: {
    marginTop: 20,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    rowGap: 10,
    columnGap: 10,
    fontFamily: "Avenir",
  },
  item: {
    width: 384,
    height: 216,
  },
 

What is the issue? Thanks a lot