title: axois react-keycloak/web token in inteceptor
body: <p>I'm trying to use a request inteceptor with react-keycloak/web - however i get an array of errors when doing so.</p>
  <pre class="lang-js prettyprint-override"><code>import axios from 'axios';
  import { useKeycloak } from '@react-keycloak/web';
  
  const { keycloak } = useKeycloak();
  
  const instance = axios.create({
    baseURL: 'https://example.com/api/v1/',
    timeout: 30000,
  });
  
  instance.interceptors.request.use(
    (config) =&gt; {
      config.headers.Authorization = `${keycloak.token}`;
      return config;
    },
    (error) =&gt; {
      return Promise.reject(error);
    }
  );
  </code></pre>
  <p>but i get:</p>
  <blockquote>
  <p>React Hook &quot;useKeycloak&quot; cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks</p>
  </blockquote>
  <p>Now i have of course tried to create a function with for example GetToken():</p>
  <pre class="lang-js prettyprint-override"><code>function GetToken() {
    const { keycloak } = useKeycloak();
    return keycloak.token
  }
  </code></pre>
  <p>but doing so leaves me with:</p>
  <blockquote>
  <p>Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:</p>
  <ol>
  <li>You might have mismatching versions of React and the renderer (such as React DOM)</li>
  <li>You might be breaking the Rules of Hooks</li>
  <li>You might have more than one copy of React in the same app</li>
  </ol>
  </blockquote>
  <p>What am i doing wrong here?</p>