Unable to generate CheckoutToken using commerce.js

Question

so I have problem generating my CheckoutToken. I'm using commerce.js and I tried console logging the token but it doesn't appear. I wonder if it has something to do with syntax or if I failed to Route the cart in Checkout and doesn't know where to look.

Checkout.jsx

import React, { useEffect, useState  } from 'react';
import { Paper, Stepper, Step, StepLabel, Typography, CircularProgress, Divider, Button } from 
'@material-ui/core';

import { commerce } from '../../../lib/commerce';
import useStyles from './styles'
import AddressForm from '../AddressForm';
import PaymentForm from '../PaymentForm';

const steps = ['Shipping address', 'Payment details'];

const Checkout = ({ cart }) => {
const [activeStep, setActiveStep] = useState(0);
const [checkoutToken, setCheckoutToken] = useState(null);
const classes = useStyles();

useEffect(() => {
    const generateToken = async () => {
        try {
            const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });

            console.log(token);

            setCheckoutToken(token);
        } catch (error) {

        }
    }

    generateToken();
 }, []);

 const Confirmation = () => (
    <div>
        Confirmation
    </div>
 );

 const Form = () => activeStep === 0
    ? <AddressForm />
    : <PaymentForm />
 return (
 <>
 <div className={classes.toolbar} />
 <main className={classes.layout}>
 <Paper className={classes.paper}>
    <Typography variant='h4' align="center">Checkout</Typography>
    <Stepper activeStep={0} className={classes.stepper}>
        {steps.map((step) => (
            <Step key={step}>
                <StepLabel>{step}</StepLabel>
            </Step>



        ))}
    </Stepper>
    {activeStep === steps.length ? <Confirmation /> : <Form />}
 </Paper>
 </main>
 </>
 );
 }

 export default Checkout;

App.jsx

import React, { useState, useEffect } from "react";
import { commerce } from './lib/commerce';
import { Products, Navbar, Cart, Checkout } from './components';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

// import Products from './components/Products/Products';
// import Navbar from './components/Navbar/Navbar';



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

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

  setProducts(data);

 }

 const fetchCart = async () => {
  setCart(await commerce.cart.retrieve())
 }

 const handleAddToCart = async (productId, quantity) => {
  const { cart } = await commerce.cart.add(productId, quantity);

  setCart(cart);
 }

 const handleUpdateCartQty = async (productId, quantity) => {
 const { cart } = await commerce.cart.update(productId, { quantity});

 setCart(cart);

 }

 const handleEmptyCart = async () => {
  const { cart } = await commerce.cart.empty();

  setCart(cart);
 }

 const handleRemoveFromCart = async (productId) => {
  const { cart } = await commerce.cart.remove(productId);

  setCart(cart);
  }

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

 console.log(cart);


 return (
 <Router>
 <div>
  <Navbar totalItems={cart.total_items} />
  <Routes>
    <Route path= "/" element={<Products products = {products} onAddToCart= 
  {handleAddToCart}/>}/>
    {/* <Products  products={products} onAddToCart={handleAddToCart} /> */}
    {/* </Route> */}

    <Route path= "/cart" element= {<Cart cart={cart}
    handleUpdateCartQty ={handleUpdateCartQty}
    handleRemoveFromCart ={handleRemoveFromCart}
    handleEmptyCart ={handleEmptyCart}
    />} />


    <Route path= "/checkout" element= {<Checkout checkout ={Checkout}/>}/>
      {/* <Checkout cart={cart} /> */}
   </Routes>
   </div>
   </Router>
   );
   };

Any help would be appreciated !