Badge on Cart not updating itself unless I refresh the Page - reactjs

Question

App.js Code
import React, { useState, useEffect } from 'react';
import Products from './components/Products/Products';
import Navbar from './components/Navbar/Navbar';
import { commerce } from './lib/commerce';
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 item = await commerce.cart.add(productId, quantity);
setCart(item.cart);
};
useEffect(() => {
fetchProducts();
fetchCart();
}, []);
commerce.cart.empty();
console.log(cart);
return (
<div>
<Navbar totalItems={cart.total_items} />
<Products products={products} onAddToCart={handleAddToCart} />
</div>
);
}
export default App;
NavBar.js
import React from 'react'
import { AppBar, Typography, Toolbar, IconButton, Badge, Menu, MenuItem } from '#material-ui/core'
import { ShoppingCart } from '#material-ui/icons'
import useStyles from './styles'
const Navbar = ({ totalItems }) => {
const classes = useStyles();
return (
<>
<AppBar position='fixed' className={classes.appBar} color='inherit' >
<Toolbar>
{/* THIS WILL BE ON LEFT */}
<Typography variant='h6' color='inherit' className={classes.title}>
<img src="https://image.shutterstock.com/image-photo/image-260nw-611143775.jpg" alt="e-commerce" className={classes.image} height="25px" />
E-store
</Typography>
{/* THIS IS USE TO TAKE AS MUCH SPACE AS WE WANT INORDER TO SEPERTE LEFT AND RIGHT */}
<div className={classes.grow} />
{/* FOR RIGHT PART */}
<div className={classes.button}>
<IconButton aria-label='Show Items' color='inherit'>
<Badge overlap="rectangular" badgeContent={totalItems} color='secondary'>
<ShoppingCart />
</Badge>
</IconButton>
</div>
</Toolbar>
</AppBar>
</>
)``
}
export default Navbar
**commerce.js**
import Commerce from "#chec/commerce.js";
export const commerce = new Commerce(
"HERE_MY_API_KEY"
);
I am getting an error: "Cannot read properties of undefined (reading 'total_items')" but everything looks good on refreshing. On clicking the button the error occurs but after refreshing, the error is gone and I can see my result.
The main problem is that I need to refresh the page. this problem also arises when I add items to the cart. The items get added but are not shown in the console.

Answer 1

Edit: I edited my post to add the whole APP.js component.
import React, { useState, useEffect } from 'react';
import Products from './components/Products/Products';
import Navbar from './components/Navbar/Navbar';
import { commerce } from './lib/commerce';
const App = () => {
const [products, setProducts] = useState([]);
const [cart, setCart] = useState({});
const fetchProducts = async () => {
const { data } = await commerce.products.list();
setProducts(data);
};
const fetchCart = async () => {
const cartItems = await commerce.cart.retrieve();
setCart(cartItems);
};
const handleAddToCart = async (productId, quantity) => {
const item = await commerce.cart.add(productId, quantity);
// I am not sure how your cart object is structured
// but you should add the new item (item.cart)
// to the existing elements.
setCart((cartItems) => [...cartItems, item.cart]);
};
useEffect(() => {
fetchProducts();
fetchCart();
}, []);
useEffect(() => {
console.log(cart);
}, [cart]);
// I don't know why you empty your cart.
// explain in the comments and I'll change it if need be
// commerce.cart.empty();
return (
<div>
{products.length>0 && cart && cart?.total_items && (
<>
<Navbar totalItems={cart.total_items} />
<Products products = {products} onAddToCart=
{handleAddToCart} />
</>
)}
</div>
);
}
export default App;