How do I cease map() rerendering?

I’ve an app the place I render thumbnails through map and wrap them in a which hyperlinks to a perform which then handles with the picture press. The difficulty is that as a substitute of the 29 thumbnails I’ve mapped once I enter the view I get 58 photos. And they’re all duplicated with no worth.

Ex. I faucet on the primary picture and it detects that it is picture quantity 0 after which handles the remaining.
I faucet on picture quantity 30 and it detects that it is picture quantity 0 however then does nothing.

I’ve tried taking that half and creating a brand new little one elements with it utilizing React.memo however that solely made it in order that the duplicate photos now not have the styling of the unique ones, so as a substitute of getting displayed in a grid they simply prepare one beneath one other.

Here is my code (I’ve not included completely the whole lot since I’ve different components which aren’t related):

perform VideosScreen({ navigation }) {
  const video = React.useRef(null);
 
<
  const [videos, setVideos] = useState([]); - 
  const [modalVisible, setModalVisible] = useState(false);
  const [youtubeLink, setYoutubeLink] = useState("");
> - from a unique half however could also be helpful 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 movies.js");
  };
 
return (
 
<SafeAreaView>
          <View fashion={types.container}>
            {imageURL.map((imageURL, index) => (
              <Pressable key={index} onPress={() => handleImagePress(index)}>
                <Picture supply={imageURL} fashion={types.merchandise} />
              </Pressable>
 
[..]
 
const types = StyleSheet.create({
[..]
  container: {
    marginTop: 20,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "middle",
    rowGap: 10,
    columnGap: 10,
    fontFamily: "Avenir",
  },
  merchandise: {
    width: 384,
    peak: 216,
  },
 

What’s the concern? Thanks rather a lot