useAuthToken hook is not working with Auth0. it returns null

<Auth0Provider 
    domain="redacted" 
    clientId="redacted" 
    authorizationParams={{
        redirect_uri: window.location.origin,
    }}
    useRefreshTokens={true}
    cacheLocation="localstorage">
    <ConvexProviderWithAuth0 client={convex}>
        <App />
    </ConvexProviderWithAuth0>
</Auth0Provider>

<Auth0Provider 
    domain="redacted" 
    clientId="redacted" 
    authorizationParams={{
        redirect_uri: window.location.origin,
    }}
    useRefreshTokens={true}
    cacheLocation="localstorage">
    <ConvexProviderWithAuth0 client={convex}>
        <App />
    </ConvexProviderWithAuth0>
</Auth0Provider>

import { useAuthToken } from "@convex-dev/auth/react";
const token = useAuthToken();

//later on
<button onClick={
    async () => {
        alert(token);
    }
}>Get Token</button>
//Alerts null when clicked and is null in my api requests

import { useAuthToken } from "@convex-dev/auth/react";
const token = useAuthToken();

//later on
<button onClick={
    async () => {
        alert(token);
    }
}>Get Token</button>
//Alerts null when clicked and is null in my api requests