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 problem is that as an alternative of the 29 thumbnails I’ve mapped once I enter the view I get 58 pictures. 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 youngster elements with it utilizing React.memo however that solely made it in order that the duplicate pictures now not have the styling of the unique ones, so as an alternative of getting displayed in a grid they simply prepare one beneath one other.

This is my code (I’ve not included completely every little thing 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 distinct 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 model={kinds.container}>
            {imageURL.map((imageURL, index) => (
              <Pressable key={index} onPress={() => handleImagePress(index)}>
                <Picture supply={imageURL} model={kinds.merchandise} />
              </Pressable>
 
[..]
 
const kinds = StyleSheet.create({
[..]
  container: {
    marginTop: 20,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "heart",
    rowGap: 10,
    columnGap: 10,
    fontFamily: "Avenir",
  },
  merchandise: {
    width: 384,
    peak: 216,
  },
 

What’s the situation? Thanks rather a lot