I'm doing the youtube tutorial "ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe" and this error appeared when I was sending a new product object from the Commerce.js. (minute 45:50) I have the corresponding code:

import React, {useState, useEffect } from 'react';
import { commerce } from './lib/commerce'
import {Products, Navbar } from './components'

// to create a full function web shell app, we need a
// full api that is stored on commerce import
const App = () => {
  //new state
  const [products, setProducts] = useState([]);

  // fetch data from the commerce instance
  // fetch the products immediatelly on the aplication load
  const fetchProducts = async () => {
    // this is going to return a promise that we have to 
    // await to see what is inside of that promise
    const { data } = await commerce.products.list();
    // now the products are going to be populated
    setProducts(data);
  }
  

  /* this is to call the fetch product function and set
     products to the state, the empty list means that it's
     only going to render at the start */
  useEffect(() => {
    fetchProducts();
  },[]);

  console.log(products);

  return (
    <div>
      <Navbar/>
      <Products/>
    </div>
  );
}

export default App;

[It should have printed the object on the console, but instead I have the error]

(Error) https://i.stack.imgur.com/Symbp.png