I have made a webpage with react router v6, apparently the routes are ok, but when I render my page in github for a second time , it gives a 404. That doesn't happen when I use my localhost. I was told to use BrowserRouter or Hashrouter but it gives an error

bundle.js:47865 Uncaught Error: You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

So, I decided to leave it like this that works ok, but not properly in github

import React, { useState } from "react";
import Homepage from "./pages/homepage/Homepage";
import Slider from "./components/slider/Slider";
import Header from "./components/nav/Nav";
import Products from "./pages/product/Product";
import ScrollToTop from "./components/ScrollToTop";
import CheckOut from "./pages/checkout/Checkout";
import HorizontalLinearStepper from "./pages/stepper/Stepper";
import { Routes, Route } from "react-router-dom";
import {
  CartContext,
  CounterContext,
  TotalContext,
  ShippingContext,
} from "./context/AppContext";

function App() {
  let count = useState(0); // Number of items added into cart
  let [cart, setCart] = useState([]); // Array to store the items
  let [total, setTotal] = useState([]);
  let [shippingDetails, setShippingDetails] = useState({});
  console.log("cart", cart);

  return (
    <CartContext.Provider value={[cart, setCart]}>
      <TotalContext.Provider value={[total, setTotal]}>
        <CounterContext.Provider value={count}>
          <ShippingContext.Provider
            value={[shippingDetails, setShippingDetails]}
          >
            <div>
              <Header />
              <Slider />
              <ScrollToTop />
              <Routes>
                <Route path="/" element={<Homepage />} />
                <Route path="/products" element={<Products />} />
                <Route path="/checkout" element={<CheckOut />} />
                <Route path="/payment" element={<HorizontalLinearStepper />} />
              </Routes>
            </div>
          </ShippingContext.Provider>
        </CounterContext.Provider>
      </TotalContext.Provider>
    </CartContext.Provider>
  );
}

Can anybody understand what is happening? Thanks a lot!