How to onclick view product details using commercejs retrieve method

can you guys help? I want to retrieve data from an array by using the products id.

<CardActionArea component={Link} value={product.id} to="/ViewProduct" onClick={() => getProductId(product.id)}>
<Product product={product} onAddToCart={onAddToCart} />
</CardActionArea>

const [productId, setProductId] = useState({});
const [details, setDetails] = useState([]);

const getProductId = (productId) => {
        setProductId(productId) 
    }

    console.log(productId)

    const fetchDetails = async () => {
        setDetails(await commerce.products.retrieve(productId));
          }));
    };

I always get this error with the same empty array. enter image description here

[enter image description here][2]

and after I click view I get an empty array [2]: https://i.stack.imgur.com/q5Adv.png