title: TypeError: Cannot destructure property 'currentUser' of 'Object(...)(...)' as it is undefined
body: <p>I'm trying to make a logOut function with firebase on React. I have the following code for the logOut function:</p>
  <pre><code>const [error, setError] = useState('');
      const { currentUser, logout } = useAuth();
  
      const handleLogout = async () =&gt; {
          try {
              await logout();
          } catch (error) {
              setError('Server error');
          }
      }
  </code></pre>
  <p>I'm calling that code on a Link because it is in a navBar:</p>
  <pre><code>&lt;Link className=&quot;nav-link&quot; to=&quot;/iniciosesion&quot; onClick={handleLogout}&gt;LogOut&lt;/Link&gt;
  </code></pre>
  <p>I'm importing useAuth like this:</p>
  <pre><code>import { useAuth } from '../context/AuthContext';
  </code></pre>
  <p>And this is what I have in my AuthContext.js:</p>
  <pre><code>import React, { createContext, useEffect, useState, useContext } from 'react'
  import { auth } from '../firebase' 
  
  const AuthContext = createContext();
  export const useAuth = () =&gt; useContext(AuthContext);
  export const AuthProvider = (props) =&gt; {
  
      const [currentUser, setCurrentUser] = useState({});
  
      useEffect(() =&gt; {
          auth.onAuthStateChanged((user) =&gt; {
              setCurrentUser(user);
          })
      }, [])
  
      const logout = () =&gt; auth.signOut();
      const value = { logout, currentUser };
  
      return (
          &lt;AuthContext.Provider value={value}&gt;
              {props.children}
          &lt;/AuthContext.Provider&gt;
      )
  }
  </code></pre>
  <p>I have searched up and I can't find a solution for this problem.</p>