Nested Routes Issue with React Router

Question

I'm encountering an issue with nested routes in my React application using React Router. I have a setup where certain routes are only accessible when the user is authenticated. However, when I try to access a nested route such as /home, I'm getting an error saying "No routes matched location /home". Can someone help me understand what's causing this issue and how I can fix it?

Description: I have a React application where I'm using React Router for routing. I want to restrict access to certain routes only to authenticated users, so I'm using AuthenticatedTemplate from @azure/msal-react to achieve this.

import { Route, Routes, Navigate } from "react-router-dom";
import { AuthenticatedTemplate } from "@azure/msal-react";
import Dashboard from "./Dashboard";

const App = () => {
  return (
    <div>
      <Header />
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route
          path="/"
          element={
            <AuthenticatedTemplate>
              <Route path="home" element={<Home />} />
              <Route path="party" element={<Party />} />
              <Dashboard />
            </AuthenticatedTemplate>
          }
        />
        <Route path="*" element={<Navigate to="/login" />} />
      </Routes>
    </div>
  );
};