this my file ProductCard.jsx Here I added a handleFavouriteClick to be equivalent to the passed function and to use it in the add and remove files

export default function ProductCard(props) {
  const { id, title, pictures, sizes,  } = props.product
  const [favored, toggleFavored] = useFavorite(id)

 

  return (
   <div className="group">
       <Heart
          className={cn(
            'h-4 w-4 mt-1 cursor-pointer stroke-1',
            favored
              ? 'stroke-red-400 fill-red-400 animate-like'
              : 'stroke-gray-600 ',
          )}
          onClick={()=> props.handleFavouriteClick(props.product)}
        />
      </div>
      <Link to={`/products/${id}`}>
        <h3 className="mt-2 text-base font-light text-gray-600">{title}</h3>
      </Link>
    </div>
  )
}

and this is Home.jsx .here I passed to handleFavouriteClick the function adding a product imported from another file.when I click on the heart, the above error comes out

  const theme = useTheme();
  const { data } = useSearchProductsQuery();
  const isTablet = useMediaQuery(theme.breakpoints.down("md"));
  const [addFavouriteProduct] = useFavorite(product)
 return (
    <Container className="pl-10 pr-10">
      <Banner />
      <InsChapter/>
       <Chapter/>
       <Chapter2/>
      {isTablet ? (
    <SearchFilter/>
    ): null}
      <div style={{display:'flex', justifyContent:'center'}}>
  {isTablet ? null : (
         <SearchFilterSideBar/>
       )}     
      <div className="grid grid-cols-2 mt-4 gap-y-5 gap-x-2 sm:gap-y-10 sm:gap-x-4 lg:grid-cols-3">
        {React.Children.toArray(
          data?.content.map(product => <ProductCard handleFavouriteClick={addFavouriteProduct} product={product}/>),        
        )}  
      </div>
      </div>
    </Container>
  ) 
}

Please help me.