title: Use react hook inside a axios config file
body: <p>i have a axios config file, and i call react hook {Auth Context} in that file with the purpose to fetch the token in react context api. but i got an error like this <strong>&quot;React Hook 'useAuth' cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function&quot;</strong></p>
  <p><strong>AuthContext.js</strong></p>
  <pre><code>import React, { useContext, createContext, useState } from &quot;react&quot;;
  
  const AuthContext = createContext();
  
  export function useAuth() {
    return useContext(AuthContext);
  }
  
  export function AuthProvider({ children }) {
    const [currentToken, setCurrentToken] = useState(&quot;&quot;);
    const [isAuth, setIsAuth] = useState(false);
  
    function login(token) {
      setCurrentToken(token);
      setIsAuth(true);
    }
  
    const value = {
      login,
      currentToken,
      isAuth,
    };
  
    return &lt;AuthContext.Provider value={value}&gt;{children}&lt;/AuthContext.Provider&gt;;
  }
  </code></pre>
  <p>and my axios config file something like this</p>
  <p><strong>AxiosConfig.js</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  import { useAuth } from &quot;./AuthContext&quot;;
  
  const { currentToken } = useAuth(); //my Reeact Context
  
  export default axios.create({
    baseURL: &quot;http://127.0.0.1:8000&quot;,
    headers: {
      &quot;Content-type&quot;: &quot;application/json&quot;,
      Authorization: `Bearer ${currentToken}`,
    },
  });
  
  </code></pre>
  <p>what is the best way to achieve that goal ?</p>
  <p>Thank you in advance</p>