I'm trying to implement a <Routes> element inside another <Routes> element, but it doesn't seem to be working. I followed the official tutorial here but it's not working for some reason.

Here is my code:

App:

class App extends Component {
    render(){
       return (
          <div className='App'>
             <Routes>
                 <Route path="/" element={<HomePage/>} />
                 <Route path="/pricing" element={ <PricingPage/> } />
                 <Route path="/signup" element={< SignupPage/> } />
                 <Route path="/login" element={< LoginPage/> } />
                 <Route path="/dashboard/*" element={ <Dashboard/> } />
             </Routes>
          </div>
       );
     }
   }

Dashboard:

export class Dashboard extends Component{

render(){
    return(
        <div className="Dashboard">
            <DashboardHeader/>
            <DashboardContainer/>
            <Routes>
                <Route link="/" element={<DashboardHome/>}/>
                <Route link="/subscribers" element={<DashboardSubscribers/>}/>
            </Routes>
        </div>
    );
}
}

I've tried everything but nothing seems to work. Console doesn't return any errors.