React-Native sending img name as prop to child not working

Question

I'm trying to send the corresponding name of an img down as a prop to a child like so:

      <Page
        item={item}
        translateX={translateX}
        index={index}
        key={item.route}
      />

Where the item object has a prop called name, with the name of the img like so:

  {
    route: "ReactQuiz",
    bgColor: "#88dded",
    secondary: "#7cc5d9",
    fontColor: "#1c2c4c",
    name: "React",
  },

And I'm trying to use the img in my Page component:

import { Dimensions, StyleSheet, Text, View, Image } from "react-native";
import React from "react";
import Animated, {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
} from "react-native-reanimated";
import RectangleButton from "./RectangleButton";

interface PageProps {
  item: {
    route: any;
    bgColor: string;
    fontColor: string;
    secondary: string;
    logo?: React.ReactNode;
    name: string;
  };
  index: number;
  translateX: Animated.SharedValue<number>;
}

const { width, height } = Dimensions.get("window");
const SIZE = width * 0.7;

const Page: React.FC<PageProps> = ({ item, index, translateX }) => {

  return (
    <Animated.View
      style={[
        styles.container,
        { backgroundColor: `${item.bgColor}` },
      ]}
    >
      <View
        style={{
          height: height * 0.5,
          justifyContent: "space-between",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <Image source={require(`../assets/${item.name}.png`)} />
      </View>
    </Animated.View>
  );
};

export default Page;

const styles = StyleSheet.create({
});

It's not the name of the img that's incorrect, nor the format (all images in my data are png).

But react is screaming at me and telling me it can't be done. How else can I dynamically generate images from data?