Error component is rendering below every component? – Javascript

error page is rendering below every component
i want error page to render when the url is not acceptable
but its not working help me with these

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Routes,
} from "react-router-dom";
import { Navbar, Sidebar, Footer } from "./components";

import {
  Home,
  SingleProduct,
  Cart,
  Checkout,
  Error,
  About,
  Products,
  PrivateRoute,
} from "./pages";

function App() {
  return (
    <Router>
      <Navbar />
      <Sidebar />
      <Routes>
        <Route exact path="/" element={<Home />} />
      </Routes>
      <Routes>
        <Route exact path="/about" element={<About />} />
      </Routes>
      <Routes>
        <Route exact path="/cart" element={<Cart />} />
      </Routes>
      <Routes>
        <Route exact path="products">
          <Route index element={<Products />} />
          <Route exact path=":productId" element={<SingleProduct />} />
        </Route>
      </Routes>
      <Routes>
        <Route exact path="/checkout" element={<Checkout />} />
      </Routes>
      <Routes>
        <Route path="*" element={<Error />} />
      </Routes>
      <Footer />
    </Router>
  );
}

export default App;

i am expecting error page to load on weird url and its working but it also redners in every single url and it renders below my other components