I am trying to make a shopping app where if the cart is empty, it displays a div that says "shopping cart is empty." But I am getting a type error that says "Cannot read properties of undefined (reading length)." I am passing down props to my Cart.js and am really stuck. Any suggestions?

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;