title: Cannot destructure custom hook inside Context: TypeError: Cannot destructure property '' of 'Object(...)(...)' as it is null
body: <p>I'll receive the following error:
  <code>TypeError: Cannot destructure property 'isAuthenticated' of 'Object(...)(...)' as it is null.</code> When I try to use a function from a custom hook inside my AuthContext.</p>
  <p>I have a function written in a custom hook (useWeb3.ts), like:</p>
  <pre><code>import { useContext } from &quot;react&quot;;
  import { useLocation, useNavigate } from &quot;react-router-dom&quot;;
  import Web3 from &quot;web3&quot;;
  import { AuthContext } from &quot;../context/AuthContext&quot;;
  import { FormatPublicKey } from &quot;./utils/FormatPublicKey&quot;;
  
  const useWeb3 = () =&gt; {
    const { isAuthenticated, setIsAuthenticated, web3, setWeb3, setUserInfo } = useContext(AuthContext);
  
  const getCurrentProvider = () =&gt; {
      let provider;
      if (window.ethereum) {
        provider = window.ethereum;
      } else if (window.web3) {
        provider = window.web3.currentProvider;
      } else {
        console.log(&quot;Non-Ethereum browser detected. You should consider trying MetaMask!&quot;);
      }
      return provider;
    };
  
    return {
      getCurrentProvider,
    };
  };
  
  export default useWeb3;
  </code></pre>
  <p>And I want to call this function (getCurrentProvider) inside my context file, like:</p>
  <pre><code>import { createContext, useState } from &quot;react&quot;;
  import useWeb3 from &quot;../components/useWeb3&quot;;
  import { UserInfoProps } from &quot;../types/UserInfoProps&quot;;
  export const AuthContext = createContext&lt;any&gt;(null);
  
   export const AuthContextProvider = (props: any) =&gt; {
    
    const initializeState = JSON.parse(localStorage.getItem(&quot;userAccount&quot;)!);
    const [isAuthenticated, setIsAuthenticated] = useState&lt;boolean&gt;(false);
    const [isAuthenticating, setIsAuthenticating] = useState&lt;boolean&gt;(false);
    const [authError, setAuthError] = useState&lt;string&gt;(&quot;&quot;);
    const [provider, setProvider] = useState(null);
    const [web3, setWeb3] = useState(null);
    const [userInfo, setUserInfo] = useState&lt;UserInfoProps | null&gt;(initializeState || null);
    const { getCurrentProvider } = useWeb3();
  
  
    const providerValue = {
      isAuthenticated,
      setIsAuthenticated,
      isAuthenticating,
      setIsAuthenticating,
      authError,
      setAuthError,
      provider,
      setProvider,
      web3,
      setWeb3,
      userInfo,
      setUserInfo
    };
  
    return (
      &lt;AuthContext.Provider value={providerValue}&gt;
        {props.children}
      &lt;/AuthContext.Provider&gt;
    );
  };
  </code></pre>
  <p>The AuthContext is wrapped around App inside my index, see:</p>
  <pre><code>const root = ReactDOM.createRoot(document.getElementById(&quot;root&quot;) as HTMLElement);
  root.render(
    &lt;React.StrictMode&gt;
      &lt;AuthContextProvider&gt;
        &lt;App /&gt;
      &lt;/AuthContextProvider&gt;
    &lt;/React.StrictMode&gt;
  );
  
  </code></pre>
  <p>I already read some similar problems and that was solved by changing some imports/exports. But somehow I still receive the error. The error does come up as soon as I call this line of code : <code>const { getCurrentProvider } = useWeb3();</code> inside the AuthContext.tsx</p>
  <p>Thanks in advance</p>