Authorization token fails when using string interpolation in React component

Here is my code

import { useEffect, useState } from "react"
import { useAuth0 } from '@auth0/auth0-react';
import axios from 'axios'
 
const useAxiosRequest = async (url) => {
  const { getAccessTokenSilently } = useAuth0();
  const [data, setData] = useState(null);
  const [error, setError] = useState("");

  useEffect(() => {
    console.log(url);
    async function fetchData(url){
      try {
          const token = await getAccessTokenSilently({
            authorizationParams: {
              audience: url, 
              scope: 'user:admin', 
            }
          })
          console.log(token);
          const options = {
            method: "get",
            url: url,
            headers: {
              Authorization: `Bearer ${token}`
            }
          }
          const response = await axios(options)
          console.log(response.data);
          setData(response.data);
      } catch (e) {
        console.log(e)
        setError(e)
      }
    }
    fetchData(url)
  }, [url]);
  return { data, error};
}
export default useAxiosRequest

getAccessTokenSilently() retrieves the right token as seen by my console.log. But when i try to interpolate the token variable, i get a 401 (unauthorized) response. If i hardcode my token, I get my data from my API. I inspected the request in chrome dev tools and it is sending the right authorization object. Am I crazy?

Hi @gueronlj,

Welcome to the Auth0 Community!

Were you able to figure this out? I would expect string interpolation to work correctly in the code you posted.

Also, you are saying the request has the correct header when you inspect it in dev tools? Can you post an example of what you are seeing when you get the 401?