i am providing src to Image tag by array of object but it is showing blank page rather showing images . have i done anything wrong here?

import React from 'react'
import Image from 'next/image'
import "./work.scss"

function Work() {
const workObject = [
{
path: "/work/1.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/2.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/3.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/4.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/6.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/7.webp",
desc:"Maccabi Tzair"
},
{
path: "/work/1.webp",
desc:"Maccabi Tzair"
},
]
return (

{workObject.map((obj) => {

})}

)
}

export default Work



i am providing src to Image tag by array of object but it is showing blank page rather showing images . have i done anything wrong here?please help i am trying it from an hour now
i am using next'js to build a image container it'll show on button clicked