Javascript – How to write navlink properly?

Nav link isnt working in browser it says: Uncaught TypeError: Cannot destructure property ‘future’ of ‘React.useContext(…)’ as it is null. I have used NavLink in others projects and it worked normally.

or

he above error occurred in the component:

at NavLinkWithRef (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=e0f9a68a:4832:21)
at li
at ul
at div
at Sidebar (http://localhost:5173/src/Sidebar.jsx?t=1706876271727:25:33)
at div
at App

Sidebar.jsx NavLink is the problem

import { useState } from "react";
import "./styles/Sidebar.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAdd, faHouse, faList } from "@fortawesome/free-solid-svg-icons";

import { NavLink } from "react-router-dom";

const Sidebar = () => {
  const [sidebar, setSidebar] = useState("sidebar");
  const [display1, setDisplay1] = useState("Home");
  const [display2, setDisplay2] = useState("Create");
  const [display3, setDisplay3] = useState("Recipes");

  const toggleSidebar = () => {
    setDisplay1(sidebar === "sidebar" ? <FontAwesomeIcon icon={faHouse} /> : "Home");
    setDisplay2(sidebar === "sidebar" ? <FontAwesomeIcon icon={faAdd} /> : "Create");
    setDisplay3(sidebar === "sidebar" ? <FontAwesomeIcon icon={faList} /> : "Recipes");
    setSidebar(sidebar === "sidebar" ? "hiddenbar" : "sidebar");
  };

  return (
    <div className={sidebar}>
      <div className="burger" onClick={toggleSidebar}>
        <div className="part"></div>
        <div className="part"></div>
        <div className="part"></div>
      </div>

      <ul className="sidebarList">
        <li className="sidebarListItem">{display1}</li>
        <li className="sidebarListItem">
          <NavLink to="/Create">{display2}</NavLink>
        </li>
        <li className="sidebarListItem">{display3}</li>
      </ul>
    </div>
  );
};

export default Sidebar;

App.jsx looks like this

import './styles/App.css'
import Sidebar from "./Sidebar";

import Home from './Home';
import CreateRecipe from './CreateRecipe';
import Recipes from './Recipes';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {


  return (
   <div className="App">

    <Sidebar/>


    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/Create" element={<CreateRecipe/>}/>
        <Route path="/Recipes" element={<Recipes/>}/>
      </Routes>
    </BrowserRouter>
   </div>
  )
}

export default App;

When I delete NavLink everything works fine so there is sth wrong with it.