Issue to get correct url/path of related pages using react router

In my navbar when i hover over Resources there many items like Roadmap,Quiz etc,nw problem is when i click on Roadmap or any list except Methodology it shows https://base_url/#/roadmaps
but it must be
https://base_url/#/resources/roadmaps
because roadmaps are part of resources

App.js code

import ToolsRoutes from "./components/Tools/ToolsRoute";
import CtfRoute from "./components/CaptureTheFlag/CTFRoute";
import RoadmapsRoute from "./components/Learn/Roadmaps/RoadmapsRoute";
import VictimHelp from "./components/Other/Victimhelp/Victimhelp";
import Methodology from "./components/Resources/Methodology/MethodologyMain";
const App=()=>{
      #other code 
return(

 <ScrollToTop>
                    <Routes>
                        <Route index exact path={"/"} element={<Homepage />} />

                        <Route path={"/*"} element={<AuthRoute />} />

                        <Route exact path={"/victimhelp"} element={<VictimHelp />} />

                        <Route path={"/forum/*"} element={<ForumRoute />} />

                        <Route path={"/ctf/*"} element={<CtfRoute />} />
                        <Route path={"/ctf/mainpage"} element={<MainPage />} />

                        <Route exact path={"/leaderboard"} element={<Leaderboard />} />
                        <Route exact path={"courses/:title"} element={<Course />} />

                        <Route path={"/websecurity/*"} element={<WebSecurityRoutes />} />

**#following is roadmap component route which lie in different folder** 
                        <Route path={"/roadmaps/*"} element={<RoadmapsRoute />} />
                        <Route path={"/tools/*"} element={<ToolsRoutes />} />
                        <Route path={"/resources/methodology"} element={<Methodology />} />
                        <Route path={"/internship"} element={<Jobs />} />
                        <Route path={"/quiz"} element={<Quiz />} />
                        <Route path={"/createquiz"} element={<MakeQuiz />} />
                        <Route path={"/quiz/:type"} element={<QuizPage />} />
                        <Route path={"/interviewQuestions"} element={<InterviewQuestions />} />
<Route path={"*"} element={<NotFound />} />
                    </Routes>
                </ScrollToTop>
)
}

RodmapsRoute.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import { NotFound, Roadmap, Roadmaps } from "src/components/index";

const RoadmapsRoute = () => {
    return (
        <Routes>
            <Route index element={<Roadmaps />} />
            <Route path={":title"} element={<Roadmap />} />
            <Route path={"*"} element={<NotFound />} />
        </Routes>
    );
};

export default RoadmapsRoute;

Note : each component is in different folder