TypeError: Cannot read properties of undefined (reading ‘quantity’)

Ecommerce site using MERN. This is the Navbar.jsx component. Error shows cant read undefined ‘quantity’ on line 72.
ERROR MESSAGE
Uncaught TypeError: Cannot read properties of undefined (reading ‘quantity’)

import { Badge } from "@material-ui/core";
import { Search, ShoppingCartOutlined } from "@material-ui/icons";
import React from "react";
import styled from "styled-components";
import { mobile } from "../responsive";
import { useSelector } from "react-redux";
import { Link } from "react-router-dom";



const Navbar = () => {
  const quantity = useSelector(state=>state.cart.quantity)
  return (
    <Container>
      <Wrapper>
        <Left>
          <Language>EN</Language>
          <SearchContainer>
            <Input placeholder="Search" />
            <Search style={{ color: "gray", fontSize: 16 }} />
          </SearchContainer>
        </Left>
        <Center>
          <Logo>LAMA.</Logo>
        </Center>
        <Right>
          <MenuItem>REGISTER</MenuItem>
          <MenuItem>SIGN IN</MenuItem>
          <Link to="/cart">
          <MenuItem>
            <Badge badgeContent={quantity} color="primary">
              <ShoppingCartOutlined />
            </Badge>
          </MenuItem>
          </Link>
        </Right>
      </Wrapper>
    </Container>
  );
};

export default Navbar;

ERROR MESSAGE
Uncaught TypeError: Cannot read properties of undefined (reading 'quantity')
    at Navbar.jsx:72:1
    at useSelector.ts:182:1
    at memoizedSelector (use-sync-external-store-with-selector.development.js:78:1)
    at getSnapshotWithSelector (use-sync-external-store-with-selector.development.js:133:1)
    at mountSyncExternalStore (react-dom.development.js:16799:1)
    at Object.useSyncExternalStore (react-dom.development.js:17727:1)
    at useSyncExternalStore (react.development.js:1676:1)
    at useSyncExternalStoreWithSelector (use-sync-external-store-with-selector.development.js:144:1)
    at useSelector2 (useSelector.ts:249:1)
    at Navbar (Navbar.jsx:72:1)

How to solve this issue

I could not understand why it is showing undefined

EDIT:

Here are the redux files where i defined the schema:

file1 :cartRedux.js

import { createSlice } from "@reduxjs/toolkit";

const cartSlice = createSlice({
  name: "cart",
  initialState: {
    products: [],
    quantity: 0,
    total: 0,
  },
  reducers: {
    addProduct: (state, action) => {
      state.quantity += 1;
      state.products.push(action.payload);
      state.total += action.payload.price * action.payload.quantity;
    },
  },
});

export const { addProduct } = cartSlice.actions;
export default cartSlice.reducer;

File 2: store.js

import { configureStore, combineReducers } from "@reduxjs/toolkit";
import cartReducer from "./cartRedux.js";
import userReducer from "./userRedux.js";
import {
  persistStore,
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from "redux-persist";
import storageSession from 'redux-persist/es/storage/session.js'

const persistConfig = {
  key: "root",
  version: 1,
  storage:  storageSession,
};

const rootReducer = combineReducers({ user: userReducer, cart: cartReducer });

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

let persistor = persistStore(store);
export default persistor;