Я не могу использовать NavLink вне компонента <Router>

Я создаю приложение React с помощью react-router-dom. Чтобы добавить больше анимации на свои страницы, я использую framer-motion для создания переходов между страницами приложения, но я не хочу, чтобы панель навигации анимировалась и обновлялась каждый раз, когда я перемещаюсь между своими маршрутами. Поэтому я убедился, что панель навигации не анимируется, не включив ее в свой маршрутизатор.

Проблема в том, что он отображает пустую страницу, и когда я захожу в консоль, появляется много ошибок, например:

Неперехваченная ошибка: useLocation() можно использовать только в контексте компонент.

Вышеупомянутая ошибка произошла в компоненте:

Вот мой код:

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);
`;