Getting a 401 error when trying to connect to Apple Music API

export default function MyComponent() {
  const { isLoading, error, data } = useQuery(
    "songs",
    async () => {
      const response = await fetch(
        "https://api.music.apple.com/v1/catalog/us/search?term=beach+bunny"
      );
      console.log(response.headers); // log the response headers
      const data = await response.json();
      return data.results;
    },
    {
      headers: {
        Authorization: `Bearer ${"thisiswheremytokenis"}`,
      },
    }
  );

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error fetching data: {error.message}</div>;
  }

  return (
    <div>
      <h1>Songs</h1>
      <ul>
        {data.map((song) => (
          <li key={song.id}>{song.attributes.name}</li>
        ))}
      </ul>
    </div>
  );
}

It's just a simple react component thats using react-query and I cannot for the life of me figure out why it's not working. I know my Token works because when I verify it with the curl command in the docs it gives me code 200.