Route관련질의

안녕하세요 react router-dom 실습 중 문의드립니다

수업중 src의 index에서 pages의 index는 라우트가되는데

pages의 index에서 accounts의 index는 라우트가안되네요..

http://localhost:3000/accounts/signup 의 주소로 들어가고싶은데

틀린부분을 못찾겠고 기존 질의를 봐도 해결이 잘안되서 질문드립니다

pages의 index.js 코드는 아래와같습니다

import React from "react";
import AppLayout from "components/AppLayout";
import {
    //BrowserRouter as Router,
    //Switch,
    Route,
    Routes
  } from "react-router-dom";
import About from "./About";
import Home from "./Home";
import AccountsRoutes from "./accounts";

function Root() {
    return (
    <AppLayout>
    <Routes>
        
        <Route exact path ="/" element={<Home/>} /> 
        <Route exact path ="/about" element={<About/>} /> 
        <Route path="/accounts" element={<AccountsRoutes/>} />
    </Routes>
    </AppLayout>
    );
    
}

export default Root;

pages/accounts 의 index.js 코드는 아래와같습니다

import React from "react";
import { Route, Routes} from "react-router-dom";
import Profile from "./Profile";
import Login from "./Login";
import Signup from "./Signup";

function AccountsRoutes({match}){
    return (
        <>
        <Routes>
        <Route exact path={match.url+ "/profile"} element={<Profile/>} />
        <Route exact path={match.url+ "/login"} element={<Login/>} />
        <Route exact path={match.url+ "/signup"} element={<Signup/>} />
        </Routes>

        </>
    );
}

export default AccountsRoutes;