In my React Project Router doesn't work well

Would you please help me solve my problem in my react router?
I have made three pages: App.js index.js Main.js, and some pages at y src/pages as Home, About, Contact,...

index.js:

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(<App />);

App.js:

import React from "react";
import "./App.css";
import Navbar from "./Navbar";
import Header from "./header";
import Footer from "./footer";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/js/bootstrap.js";

export default function App() {
  return (
    <div className="App">
      <Header />
     <Navbar />
      <Footer />
    </div>
  );
}

Main.js:

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "./pages/aboutus";
import Contact from "./pages/contactus";
import Services from "./pages/depressionadults";
import Home from "./pages/Home";
import Header from "./header";
import Navbar from "./Navbar";
import Footer from "./footer";

export default function Main() {
  return (
    <BrowserRouter>
    <Header />
    <Navbar />
      <Routes>
        <Route exact path="/" element={<Home />}>
          <Route path="/pages/depressionadults" element={<Services />} />
          <Route path="/pages/App" element={<About />} />
          <Route path="/pages/contactus" element={<Contact />} />
        </Route>
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

But just URL address changes and nothing happens about loading the components I've addressed to. It seems that App.js is not necessary and I should render <Main /> directly, but when I clear it nothing works at all. If I should do any changes in my index.html too?

I expect my Router works well, and I cannot find out where is the problem?

You are using the wrong component,
put <Main/> component instead of <App/> in index.js file.