Issue with mapping array of images in React component

Hi, i have a question. I am trying to map an array of images but it displays null in the console. What could be the issue?here is the code: import React, {useState, useEffect} from 'react'
import {client} from '../../lib/client'
import { urlFor } from '../../lib/client'
import {FaCrown} from 'react-icons/fa'
import {AiOutlineShoppingCart} from 'react-icons/ai'
import { Link } from 'react-router-dom'
import Sectionhead from '../Sectionhead/Sectionhead'
import { Button, Card, CardActionArea, CardActions, CardContent, CardMedia, Grid} from '@mui/material'
import './product.css'





const Products = () => {
const [product, setProduct] = useState([])

useEffect(() =>{
client.fetch(

).then((data) => setProduct(data)).catch(console.error)
}, [])
console.log(product)

return (
<>
<section className='products'>
<Sectionhead icon={<FaCrown/>} title='Products' className='head'/>
<Grid container justify='center' spacing={1}>
{
product.map((product) => (
<Grid item key={product.slug.current} xs={12} sm={6} md={4} lg={3}>
<Card sx={{flexGrow: 1}} className='custom-card'>
<CardActionArea>
<CardMedia component="img" title={product.name} height='200' className="card-image"/>
<CardContent className='content'>
<h3>{product.name}</h3>
</CardContent>
</CardActionArea>
<CardActions className='h4'>
<h4>Ksh.{product.price}</h4>
</CardActions>

<CardActions className='actions-content'>
<Button
size="large"
className="batoni"
sx={{fontFamily:'Sono'}}
>
<Link to={

/product/${product.slug.current}

}><AiOutlineShoppingCart /> SHOP</Link> </Button>
</CardActions>
</Card>
</Grid>
))
}
</Grid>
</section>
</>
)
}

export default Products

Hi, here is the method how I used to get my images array:
groq`*[_type == 'page' && slug.current == $slug][0]{
_id,
_createdAt,
"images": images[].asset->url,
title,
"slug": slug.current,
content,
}`,

not yet my console is still displaying null here is the schema: exportdefault {    name: 'product',
    title: 'Product',
    type:'document',
    fields: [
        {
            name: 'image',
            title: 'Image',
            type: 'array',
            of: [{type: 'image'}],
            options: {
                hotspot: true,
            }
        },
        {
            name:'name',
            title:'Name',
            type:'string',
        },
        {
            name:'slug',
            title:'Slug',
            type:'slug',
            options: {
                source:'name',
                maxLength:90,
            }
        },
        {
            name:'price',
            title:'Price',
            type:'number',
        },
        {
            name:'details',
            title:'Details',
            type:'string',
        }
    ]
}

Your name on schema written as "image", however in your query you name it as "images". So both of these names have to be same