Images not loading in react while looping even after using require

I have created an array with title and images but when I am using the map to extract the image, the image path is getting printed as a string. I also tried using require keyword but the error is coming stating "require is not defined".I also tried moving my assets(images) into the src folder but that is also not working. I am using snowpack.

const Img = [
  [
    {
      title: "Recommended to you",
      img: "assets/images/badging2.jpg"
    },
  ],
  
  [
    {
      title2: "hello",
      img1 : "../../public/assets/images/badging7.jpg"
    },
  ]
];

export default Img;

This is my map function:-

     <div>
         {Img[0].map((item) => {
           return <p>{item.img}</p> 
          })}
    </div>   

// output - assets/images/badging2.jpg

Try returning like this return <img src={item.img} />