I am attempting to switch my api usage to use SWR as it provides much more customisation options that I could very well benefit from. How ever the api GET request need to pass through 2 headers 'Authorization':Bearer ${session.accessToken} and 'Client-Id': ${process.env.TWITCH_CLIENT_ID} And after doing some research I found a couple of ways on how to do this but they are not working. The code below is what I have but when the page attempts to render it shows the screenshot bellow

How do I fix this or better yet can anyone show the proper way to send headers while using swr?

import axios from "axios";
import Link from "next/link";
import {
  VStack,
  Heading,
  Divider,
  Text,
  Box,
  Badge,
  Center,
} from "@chakra-ui/react";
import { useSession } from "next-auth/react"
import useSWR from 'swr'

const fetcher = (url, token) => {
const { data: session, status } = useSession()
    axios
      .get(url, { 
        headers: { 
          Authorization: `Bearer ${session.accessToken}` + token }})
      .then((res) => res.data);
        }
     
function Dash () {
  const { data, error } = useSWR([` https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067`, auth.token],fetcher)
  
  if(error) return <div>Error {data.error}</div>
  if(!data) return <div>loading...</div>

  return (
    <VStack>
      <Text>{data.data.stream_key}</Text>
    </VStack>
  )

}


export default Dash