How to make a folder static in react - reactjs

Question

I'm trying to get a picture from my folder with a path refer from my json and display it in FeaturedRooms.jsx.
...
src
components
FeaturedRooms.jsx
images
pages
Home.jsx
context.jsx
...
...
"images":[
{
"url":"../images/room-1.jpeg"
},
...
I'm using the context.jsx to handle and store the data.
const fetchUrl = async () => {
const resp = await fetch(url);
const respData = await resp.json();
const rooms = respData.rooms;
featured(rooms);
dispatch({ type: "ROOMS", payload: rooms });
};
useEffect(() => {
fetchUrl();
}, []);
const featured = (rooms) => {
let featuredRooms = rooms.filter((room) => room.room.featured === true);
dispatch({ type: "FEATURED_ROOMS", payload: featuredRooms });
};
And I'm trying to display it on the FeaturedRooms.jsx.
<div className="featured-wrapper">
{featuredRooms.map((rooms) => {
const { system, room } = rooms;
let images = room.images.map((image) => {
return image.url;
});
return (
<div className="room" key={system.id}>
<h2>{room.name}</h2>
<img src={images[0]} alt="featured-rooms" />
</div>
);
})}
</div>
But it's not working at all, is there a way for me to access it? And also, is there a way for me to make the images folder a static folder? Perhaps I will be accessing the images folder from a different folder.
edit: some more details.

Answer 1

Your folder structure is correct. What you need to do in your array is
...
"images":[
{
"url":require("../images/room-1.jpeg")
},
...
Then whenever you want to use this images array
images.map((item) =>(
<img src={item.url} />
))