Rendering external image import in react-native via loop

Question

I am working on a react-native project that has an Image Gallery where users can select a variety of images as their wallpaper but I am having a tough time rendering the images.

my imagedata.js file

const nature = [ { id: 1, path: '../../../assets/images/wallpapers/nature/nature_1.png', }, { id: 2, path: '../../../assets/images/wallpapers/nature/nature_2.png', }, { id: 3, path: '../../../assets/images/wallpapers/nature/nature_3.png', }]

RenderImageComponent.jsx

{selectedCategory?.map((item, key) => (
 <Pressable key={item.id}>
     <Image
         source={require(item.path)}
          style={styles.imageCategory}
      />
     </Pressable>
  ))}

from react-native doc the above method is wrong, what approach does anyone here think I can use to achieve this the images have to be locally and the component is re-useable because there are other image categories other than nature