Я использую React-Router-Dom для маршрутизации страниц и <Outlet/> для навигации. Однако он не работает так, как ожидалось

Я включил компонент Outlet в свою настройку, чтобы обеспечить плавную навигацию по всем страницам. Однако, несмотря на реализацию, он не отображается должным образом на каждой странице.

Приложение.js

import { createBrowserRouter,RouterProvider } from "react-router-dom";
import HomePage from "./Pages/home";
import Contact from './Pages/contact';
import AboutPage from "./Pages/About";
import RootLayout from "./Pages/Root";
import ProductPage from "./Pages/Product";
import ProductDetails from "./Pages/ProductDetails";

const router = createBrowserRouter([
  {
      path: '/',
      elements: <RootLayout />,
      errorElement: <ErrorPage />,
      children: [
        {path:'/', element:<HomePage />},
          { path: 'contact', element: <Contact /> },
          { path: 'about', element: <AboutPage /> },
          { path: 'product', element: <ProductPage /> },
          { path: 'product/:productId', element: <ProductDetails /> },
      ],
  },
]);


function App() {
  return (
  <RouterProvider router = {router} />
  );
}

export default App;

Маршрут.js

import {Outlet} from "react-router-dom";
import Navigation from "../components/navigation";

const RootLayout=()=>{
    return (
        <>
       <Navigation />
       <Outlet />
       </>
    )
}
export default RootLayout;

Навигация.js

import {NavLink} from 'react-router-dom';
const Navigation=()=>{
    return (
        <header>
            <nav>
                <ul>
                    <li><NavLink to='/' className = {({isActive})=>
            isActive? 'active': undefined
                    }
                    end
                    >Home</NavLink>
                    </li>
                    <li><NavLink to='/contact' className = {(isActive)=>
                        isActive?'active':undefined
                    }
                    end
                    >
                    Contact</NavLink>
                    </li>
                    <li><NavLink to='/about'>About</NavLink></li>
                </ul>
            </nav>
        </header>
    )
}

export default Navigation;

Навигация должна была появиться на каждой странице, но она не появляется ни на одной странице. Я использую Outlet, который является частью библиотеки React-Router-Dom. Предполагалось, что панель навигации будет отображаться на каждой странице.