I can't use NavLink outside <Router> component

I'm building a React application with react-router-dom. To add more animations to my pages, I use framer-motion to create transitions between the pages of the application but I don't want the navbar to be animated and regenerated every times I navigate between my routes. So to I made sure that the navbar not animate by not including it in my router.

The problem is that it renders a blank page and when I go in the console, there are many errors like :

> Uncaught Error: useLocation() may be used only in the context of a
> <Router> component.

>
> The above error occurred in the <NavLink> component:

Here is my code:

App.tsx

import React from "react";
import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import { AnimatePresence } from "framer-motion";

import Home from "./pages/Home/Home.tsx";
import About from "./pages/About/About.tsx";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/about",
    element: <About /> 
  }
]);

function App() {
  return(
    <>
      <Navbar />
      
      <AnimatePresence mode="wait">
        <RouterProvider router={router} />
      </AnimatePresence>
    </>
  )
}

export default App;

Navbar.tsx

import React from "react";
import styled from "@emotion/styled";
import { NavLink } from "react-router-dom";

export default function Navbar(props: React.AllHTMLAttributes<HTMLElement>) {
  return (
    <NavbarDiv>
      <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
        Home
      </NavLink>
      <NavLink to="/" className={({ isActive }) => isActive ? "active" : ""}>
        About
      </NavLink>
    </NavbarDiv>
  )
}

const NavbarDiv = styled.div`
  width: 100%;
  height: 85px;
  background-color: #242424;
  color: var(--background-color);
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
`;

The links in the Navbar must be rendered within a routing context. Refactor the code a bit to create a layout route that renders Navbar and an Outlet component for the nested routes the layout route renders.

Example:

import React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Outlet,
} from "react-router-dom";
import { AnimatePresence } from "framer-motion";
import Home from "./pages/Home/Home.tsx";
import About from "./pages/About/About.tsx";
import Navbar from "./components/Navbar";

const AppLayout = () => (
  <>
    <Navbar />
    <AnimatePresence mode="wait">
      <Outlet />
    </AnimatePresence>
  </>
);

const router = createBrowserRouter([
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Home />,
      },
      {
        path: "/about",
        element: <About /> 
      }
    ]
  },
]);

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

export default App;