React - Log Out UseContext

I would like to create a log out with useContext - ReactJS. For this, I would like to empty my useContext.

This is my App.jsx:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { useState } from "react";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import HeaderAuth from "./components/templates/header-auth";
import Header from "./components/templates/header";
import Login from "./components/authentification/login";
import Register from "./components/authentification/register";
import Password from "./components/authentification/password";
import HomePage from "./components//homePage";
import Profile from "./components/authentification/profile";
import Footer from "./components/templates/footer";
import "./app.scss";

// CONTEXTS
import User from "./contexts/userContext";

export default function App() {
  const [user, setUser] = useState(null);

  return (
    <main id="App" className="App">
      <ToastContainer position="top-left" autoClose={5000} />
      <User.Provider value={{ user, setUser }}>
        <Router>
          {user ? <Header /> : <HeaderAuth />}
          <Routes>
            <Route exact path="/" element={<Login />} />
            <Route exact path="/register" element={<Register />} />
            <Route
              exact
              path="/login/identity/forgotten-password"
              element={<Password />}
            />
            <Route exact path="/hp" element={<HomePage />} />
            <Route exact path="/profile" element={<Profile />} />
          </Routes>
          <Footer />
        </Router>
      </User.Provider>
    </main>
  );
}

And this is what I tried to code -> my dropdown where I put the log out button:

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

// CONTEXT
import User from "../../../contexts/userContext";

export default function Menu() {
  const [currentUser, setCurrentUser] = useContext(User);
  const navigate = useNavigate();

  const handleLogOut = () => {
    setCurrentUser({});
    navigate("/");
  };

  console.log(currentUser);

  return (
    <ul className="menuProfile">
      <li>
        <NavLink to="/profile">Mon profil</NavLink>
      </li>
      <li>
        <button type="button" onClick={handleLogOut}>
          Déconnexion
        </button>
      </li>
    </ul>
  );
}

I don't know why, but I get this error:

Do you have any idea why I get this error?

Thanks a lot !

Change this line:
const [ currentUser, setCurrentUser ] = useContext(User);

To this one:
const { currentUser, setCurrentUser } = useContext(User);

You are getting that error because you are trying to destructure the context value as an array, but it's an object.

You destructure the ctx as an array.

Replace the first line of your Menu component with the following

const { currentUser, setCurrentUser } = useContext(User);