Prop is not being passed to component but working with other components

Question

I'm in the process of building a merch e-commerce website for a client utilizing the commerce.js API however I've run into a problem. When passing the "cart" object as a prop to the checkout file it returns as an empty object which breaks the website. The web application passes the "cart" object as a prop in other parts of the code and works just fine. Is there something I'm doing wrong?

Code for reference:

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

import { commerce } from '../../../lib/commerce';

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);

    useEffect (() => {
        const generateToken = async () => {
            console.log(cart.id);
// returns as undefined
            try {
                const token = await commerce.checkout.generateToken(cart.id, { type: 'cart' });
                
                console.log(token);
                
                setCheckoutToken(token);

                console.log("Success!")
            } catch (error) {
                console.log(error); //Returns 404 Error Obv
                console.log("Didnt work")
            }
        }
        generateToken();
    }, []);

    const Confirmation = () => (
        <>
        
        Confirmation

        </>
    );

    const Form = () => activeStep === 0
    ? <Addressform  />
    : < Paymentform />
  return(
    <> 
...
    </>
  ); 
};

export default Checkout;