Estoy tratando de crear una aplicación de compras donde, si el carrito está vacío, muestra un div que dice "carrito de compras está vacío". Pero recibo un error de tipo que dice "Cannot read properties of undefined (reading length)." Estoy pasando accesorios a mi Cart.js y estoy realmente atascado. ¿Alguna sugerencia?

 import React from 'react'; // import 'semantic-ui-css/semantic.min.css' import { Routes, Route } from 'react-router-dom' import { useState } from 'react'; import Nav from './components/Nav'; import NavTwo from './components/NavTwo'; import HotSandwiches from './pages/HotSandwiches'; import Home from './pages/Home'; import ColdSandwiches from './pages/ColdSandwiches'; import ChickenMeals from './pages/ChickenMeals'; import Chocolate from './pages/Chocolate'; import Drinks from './pages/Drinks'; import FruitSnacks from './pages/FruitSnacks'; import SaltySnacks from './pages/SaltySnacks'; import GumandMints from './pages/GumandMints'; import Toiletries from './pages/Toiletries'; import Cart from './components/Cart'; const App = () => { const [cartItems, setCartItems] = useState([]) return ( <div> <Nav /> <NavTwo /> <Routes> <Route path='/' element={<Home />} /> <Route path='hotsandwiches' element={<HotSandwiches />} /> <Route path='coldsandwiches' element={<ColdSandwiches />} /> <Route path='chickenmeals' element={<ChickenMeals />} /> <Route path='chocolate' element={<Chocolate />} /> <Route path='drinks' element={<Drinks />} /> <Route path='fruitsnacks' element={<FruitSnacks />} /> <Route path='saltysnacks' element={<SaltySnacks />} /> <Route path='gumandmints' element={<GumandMints />} /> <Route path='toiletries' element={<Toiletries />} /> <Route path='cart' element={<Cart />} cartItems={cartItems} /> </Routes> </div> ); } export default App;

 import React from 'react'; const Cart = ( {cartItems} ) => { return ( <div> Cart items <div> {cart Items . length() === 0 ? <div> No items in cart </div> : <div> Hello </div>} </div> </div> ); } export default Cart;