Почему роутинг не работает?

Question

[Константин]

Есть такая страница:

spoiler

import React from "react";
import "./Drawer.module.scss";
import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import Path from "./path/Path";
import PageTwo from "./path/PageTwo";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Path />}>
          <Route path="lists/*" element={<PageTwo />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

Далее идет это:

spoiler

import Slider from "../Components/Slider";
import React from "react";
import Сategories from "../Categories";
import { Route } from "react-router-dom";
import { Routes } from "react-router-dom";
import Footer from "../Footer";
import FreeShopping from "../FreeShopping";
import Header from "../Header";
import Lists from "../Sale/Lists";
import Sale from "../Sale/Sale";
import SHPandPAY from "../SHIPPING-AND__PAYMENT";
import Title from "../Title";
import ItemDiscount from "../Sale/Item-discount";
import ImageData from "../Components/ImageData";

function Path() {
  return (
    <>
      <Routes>
        <Route path="" element={<Title />} />
      </Routes>
      <Routes>
        <Route path="" element={<Header />} />
      </Routes>
      <Routes>
        <Route path="" element={<Сategories />} />
      </Routes>
      <Routes>
        <Route path="" element={<Slider slides={ImageData} />} />
      </Routes>
      <Routes>
        <Route path="" element={<Sale ItemDiscount={ItemDiscount} />} />
      </Routes>
      <Routes>
        <Route path="" element={<Lists />} />
      </Routes>
      <Routes>
        <Route path="" element={<SHPandPAY />} />
      </Routes>
      <Routes>
        <Route path="" element={<FreeShopping />} />
      </Routes>
      <Routes>
        <Route path="" element={<Footer />} />
      </Routes>
    </>
  );
}

export default Path;

и вторая страница сайта, но почему она не работает?

spoiler

import React from "react";
import { Route, Routes } from "react-router";
import Catalog from "../Another/Catalog";
import Footer from "../Footer";
import Header from "../Header";
import Title from "../Title";
import Сategories from "../Categories";

function PageTwo() {
  return (
    <>
      <Routes>
        <Route path="" element={<Catalog />} />
      </Routes>
    </>
  );
}

export default PageTwo;

Просьба, доведите роутинг до ума, покажите, пожалуйста, каким он ДОЛЖЕН быть и как он должен работать.

С меня огромная благодарность и могу даже денюжку на кошелек прислать, если это необходимо.