How to define another Routes inside a Routes component in a child component?

These are my routes in App.js

import Accounting from "./pages/Accounting/Accounting";

const  App  = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/dashboard">
          <Route index element={<Dashboard />} />
          <Route path="add-test" element={<Tests />} />
          <Route path="accounting" element={<Accounting />} />
        </Route>
        <Route path="login" element={<Login />} />
        <Route path="stepper" element={<Stepper />} />
        <Route path="verify" element={<Verify />} />
      </Routes>
    </BrowserRouter>

and as you can see, there are 3 routes in my <Route path="/dashboard"> and each one has a page.

Now, for example, I want to add a few more routes to the accounting path so that I don't separate the sidebar and newbar on the page every time.

this is my accounting pages:

import React from "react";
import Navbar from "../shared/Navbar";
import Sidebar from "../shared/Sidebar";
import SettingsPanel from "../shared/SettingsPanel";
import Footer from "../shared/Footer";
import AccountingAll from "../../components/Accounting/AccountingAll";
import AddTest from "../../components/Tests/AddTest/AddTest";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Accounting = () => {
  return (
    <>
      <div className="container-scroller rtl">
        <Navbar />
        <div className="container-fluid page-body-wrapper">
          <Sidebar />
          <div className="main-panel">
            <div className="content-wrapper">
              <Routes>
                <Route path="/add" element={<AccountingAll />}  />
                <Route path="/remove" element={<forExampleREmove />}  />
              </Routes>
              <SettingsPanel />
            </div>
            <Footer />
          </div>
        </div>
      </div>
    </>
  );
};

export default Accounting;

But it does not show this path for me: ‍‍http://localhost:3000/dashboard/accounting/add or http://localhost:3000/dashboard/accounting/remove

How can I do this routing so that the components are also loaded?