Getting a 401 ERROR while setting up a Commercejs React app (JavaScript Mastery Youtube)

Question

I've been following the JavaScript mastery tutorial and haven't had any issues with my API key until now (Day 28/39). I'm getting "❌ HTTP ERROR [401] Type: The provided API key is not valid." and "Uncaught (in promise) 401 received index.js 1" However I haven't changed the key whatsoever. The only thing I can think of is that the practice cart I was using expired and my code is searching for the specific Token. I've tried regenerating a new API key and replacing it in .env. I've even installed dotenv and made sure .env was in the root. This is my first post on here so please let me know if I've left out any info.

App.js

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



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 handleRemoveFromCart = async (productId) => {
        const {cart} = await commerce.cart.remove(productId);

        setCart(cart);
    }

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

        setCart(cart);
    }


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

    // console.log(cart);


    return (
        <Router>
            <div>
                {/* <Navbar totalItems= {cart?.total_items}/> */}
                <Navbar/>
                <Routes>
                        
                         {/* <Route path='/' exact component={Home} /> */}
                         <Route path='/' element={<Products products = {products} onAddToCart = {handleAddToCart}/>} />
                         <Route path='/cart' element={
                            <Cart 
                                cart={cart} 
                                handleUpdateCartQty={handleUpdateCartQty}
                                handleRemoveFromCart={handleRemoveFromCart}
                                handleEmptyCart={handleEmptyCart}/>
                            } 
                            />
                        <Route path='/checkout' element={
                            <Checkout cart={cart}/>}>
                            

                        </Route>
      
                </Routes>
                
                
            </div>
        </Router>

    )
}

export default App;

commerce.js

import Commerce from "@chec/commerce.js";

export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);

.env

REACT_APP_CHEC_PUBLIC_KEY=xxxx;

NODE_PATH=./src