How can I pass the argument up to the onClick function when it is called by reference inside return tag in reactjs?

I want to pass the argument 'product' which I got from map function inside Image tag to the onclick function {handleProductQuickView} which is declared above.

I want to pass slug to the setModalData inside onclick function which will give product details from the slug object.

I tried it by passing it as an argument to the onclick function inside Image tag but that did not worked.

         export default function HomePageStructure({title, swiperNext, swiperPrev}) {

               **function handleProductQuickView( product ) {
               setModalData(product.slug)
               setModalView("PRODUCT_DETAILS");
               return openModal();**

          return (
             <>
                   {data?.pages?.map((products, _idx) => (
                       <Fragment key={_idx}> 
                           {products?.data?.map((product) => (
                               
                                <motion.div key={product.id}>

                                    <SwiperSlide className='grid grid-cols-3 md:grid- 
                                                            cols-4 lg:flex 
                                                lg:justify-center lg: items-start' 
                                                key={product.id} >

                                        <div className='border-1  border-gray-500'>
                                   <Image
                                      className='max-w-100 h-100 '
                                    **onClick = {handleProductQuickView(product)}**
                                      role="button"
                                     src={product.image?.original ?? 
                                          siteSettings?.product?.placeholderImage}
                                     height={200}
                                     width={200}
                                                
                                     objectFit="contain"
                                     className="product-image"
                                            />
                                            <span className='text-sm items-center 
                   justify-center flex '>
                                                {product.name}
                                            </span>
                                        </div>
                                
                                    </SwiperSlide>

                                </motion.div>
                            ))}
                        </Fragment>
                ))}
               
                </Swiper>
            </>
         </div>