Rendering external image import in react-native via loop [duplicate]

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