how do I get my add to cart button to work in React (cart is not iterable) issue comes up in console?

Question

When I click my add to cart button on the page it comes up with the error 'cart is not iterable' in console not sure what Im doing wrong as Im not sure I really understand the error. I have a separate shop and cart page. The shop has ad addtoCart button which works Thanks in Advance.

import React, { useState } from 'react';
import './Product.css';
import './Imagegallery.js';


export default function Product(product, cart, setCart){



const prod=product


const addToCart = (product) => {
let newCart = [...cart];
let itemInCart = newCart.find(
 (item) => prod.product.name === item.name
);
if (itemInCart) {
 itemInCart.quantity++;
} else {
 itemInCart = {
   ...product,
   quantity: 1,
 };
 newCart.push(itemInCart);
 }
 setCart(newCart);
 };



 return (
 <>
  <h1>Product Page</h1>
  <div className="products">
    <div className="product">
    <h3>{prod.product.name}</h3>
    <h4>£{prod.product.cost}</h4>
      <p>{prod.product.description}</p>
      <br />
        <button onClick={() => addToCart(product)}>
          Add to Cart
        </button>
        <section>
   <div className="image-gallery">
  <img className="gallery-highlight" img src={prod.product.image} alt=. 
 {prod.product.name} />
 <div className="image-preview">
    <img src={prod.product.image2} className="image-active" />
    <img src={prod.product.image3} />

<br />

    </div>

    </div>
</section>
</div>
</div>
</>
);
}