Unhandled Rejection (TypeError): Cannot read property 'products' of undefined

Question

I am creating an E-Commerce web shop following a tutorial.

I would like to display the products that I fetch from an API.

There's an error in my code:

Unhandled Rejection (TypeError): Cannot read property 'products' of undefined

at line:

const { data } = await commerce.products.list();

in App.js.

App.js

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

const App = () => {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const { data } = await commerce.products.list();

    setProducts(data);
  };

  useEffect(() => {
    fetchProducts();
  }, []);

  console.log(products);

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

export default App;

UPDATE

Contents of ./lib/commerce.js:

import Commerce from '@chec/commerce.js';
export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);