Add to Cart button not working while routing using react-router-dom in Express

I made an e-commerce website using react and express where after clicking button it adds product to cart, but when i use react-router-dom "/cart" nothing shows up after clicking button what can be possible reason for this ? is there alternative method for this to work?

Heres my Products.jsx

import PropTypes from "prop-types";

const Products = ({ addToCart }) => {
  const items = [
    { id: 1, name: "Product 1", price: 100 },
    { id: 2, name: "Product 2", price: 200 },
    { id: 3, name: "Product 3", price: 300 },
  ];

  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Products</h1>
      {items.map((item) => (
        <div key={item.id} className="p-4 border rounded-lg shadow-lg">
          <h2 className="text-lg font-semibold">{item.name}</h2>
          <p className="text-gray-600">${item.price}</p>
          <button
            onClick={() => addToCart(item)}
            className="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600"
          >
            Add to Cart
          </button>
        </div>
      ))}
    </div>
  );
};

Products.propTypes = {
  addToCart: PropTypes.func.isRequired,
};

export default Products;

Heres Cart.jsx

import PropTypes from "prop-types";

const Cart = ({ cartItems }) => {
  return (
    <div className="p-4">
      <h1 className="mb-4 text-2xl font-bold">Cart</h1>
      {cartItems.length > 0 ? (
        cartItems.map((item) => (
          <div key={item.id} className="p-4 border rounded-lg shadow-lg">
            <h2 className="text-lg font-semibold">{item.name}</h2>
            <p className="text-gray-600">${item.price}</p>
          </div>
        ))
      ) : (
        <p>Your cart is empty.</p>
      )}
    </div>
  );
};

Cart.propTypes = {
  cartItems: PropTypes.array.isRequired,
};

export default Cart;

and App.jsx

import { Routes, Route } from "react-router-dom";
import Products from "./components/Products";
import Cart from "./components/Cart";
import { useState } from "react";
import PropTypes from "prop-types";

export default function App() {
  const [cartItems, setCartItems] = useState([]);

  const addToCart = (item) => {
    setCartItems((prevItems) => [...prevItems, item]);
  };

  return (
    <Routes>
      <Route path="/" element={<Products addToCart={addToCart} />} />
      <Route path="/cart" element={<Cart cartItems={cartItems} />} />
    </Routes>
  );
}

App.propTypes = {
  cartItems: PropTypes.array,
  addToCart: PropTypes.func,
};

Props are passed but When not routing it works fine but after routing it doesn't seem to work

Your code appears to be correct and should function as expected. However, if you're manually navigating to the /cart page in the browser, that could cause an issue. When you reload or visit the cart page directly, the application's state may be lost, which could affect the functionality. To avoid this, try to navigate within the application itself, rather than refreshing or directly entering the /cart URL.