Reactjs – Rendering json data is not showing

I’m trying to create a data and render it in my app, however it doesn’t show, and I don’t know if I’m doing something wrong or what exactly.

Here is my code.

Projects.js:

import Res2 from './images/Res/res2.jpg'
import Res3 from './images/Res/res3.jpg'
import Res4 from './images/Res/res4.jpg'
import Res5 from './images/Res/res5.jpg'
import Res6 from './images/Res/res6.jpg'
import ResMain from './images/Res/ResMain.jpeg'
export const Projects = [
    {
      title: "Res",
      mainImage: ResMain,
      images: [{Res1}, {Res2}, {Res3}, {Res4}, {Res5}, {Res6}],
      id: 1
    }
  ];

HProject.js

import {Projects} from "../../Projects";
const HProject = () => {
    return ( 
        <>
        {Projects.map(data => {
            <div className="col-12 col-md-4" key={data.id}>
                <div className="card" >
                    <img className="card-img-top" src={data.mainImage} alt="Card image" />
                    <div className="card-body">
                        <h4 className="card-title">{data.title}</h4>
                        {/* <p className="card-text">Some example text.</p>
                        <a href="#" className="btn btn-primary">See Profile</a> */}
                    </div>
                </div>
            </div>}
        )}
        </>
     );
}
 
export default HProject;

and then I’m using <HProject /> in the place I want it to be shown