title: What's the alternative to use hooks inside non React component?
body: <p>I'm new to React and I have this function.</p>
  <pre><code>    import Axios from &quot;axios&quot;;
      
      const UserService = {
          getUserRole: (access_token: string = &quot;&quot;) =&gt; {
              return Axios({
                  method: &quot;get&quot;,
                  url: &quot;https://&lt;url&gt;/user/role&quot;,
                  headers: {
                      &quot;Authorization&quot;: `Bearer ${access_token}`
                  }
              }).then((response) =&gt; {
                  return response.data;
              }).catch((error) =&gt; {
                  console.log(error);
              });
          }
      }
  
  export default UserService
  </code></pre>
  <p>The <code>getUserRole</code> is used constantly by another component, for example</p>
  <pre><code>import UserService from &quot;../../../services/authentication/userService&quot;;
  import { useAuth } from &quot;react-oidc-context&quot;;
  
  ...
  
  const auth = useAuth();
  UserService.getUserRole(auth.user?.access_token);
  </code></pre>
  <p>As you can see, I have to constantly pass the <code>access_token</code> from <code>useAuth</code>. Is there any way I can call <code>useAuth</code> inside my <code>UserService</code> so I don't have to constantly pass the <code>access_token</code> from my component?</p>