getting error while getting data from firbase

Question

this was the error i was receiving-

ReferenceError: item is not defined

I was trying to get the data(image and text) from Firebase then using that data in the product as different parts of div. so that the code automatically make different products with different data

product holder

import Image from 'next/image';
import React from 'react';
import {app, database} from "../firebaseConfig"
import {collection , addDoc, getDocs} from "firebase/firestore"
import Product from './Product';


const Portfolio = ({products}) => {
  const collectionRef = collection(database, 'images')

  const getData = () => {
    getDocs(collectionRef).then((response) => {
      console.log(response.docs.map((item) => {
        return {...item.data(), id: item.id};
      }))
    })
  }

  return (
    <div className="grid grid-flow-row-dense md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 md:-mt-52 mx-auto ">
            {item.data
            .map(({id, title, price, description, category,image}) => (
                <Product
                    key={id}
                    id={id}
                    image={image}                
                />
            ))}
    </div>
  );
};

export default Portfolio;

product

import React from 'react'
import getData from "./Portfolio"

function Product({id, image}) {

  const product ={
    id,
    image,
  }
    return (
        <div className='max-w-[1240px] mx-auto py-16 text-center'>
          <button>Travel Photos</button>
          <div className='grid grid-rows-none md:grid-cols-5 p-4 gap-4'>
            <div className='w-full h-full col-span-2 md:col-span-3 row-span-2'>
              <Image
                src= {image} 
                id='myImage'
                alt='/'
                layout='responsive'
                width='677'
                height='451'
              />
            </div>
          </div>
        </div>
      );
}

export default Product