How to properly pass headers when using SWR

[MatD1]

Hi all! I have decided to attempt to move majority of my API function to SWR as it simply allows me to do so much more!

Problem

However I am having a huge issue where I cannot figure out how to properly pass headers into SWR, I've looked at the docs and more and yet nothing seems to do the trick. I am using Twitch API, Next.js and NextAuth for handling tokens, sessions, etc. I have left my github repo bellow along with the code I am currently trying to use.

Seriously any help would be huge! - I am also no pro so don't be to harsh lol!

Note:

I console log the error return if an error occurs yet, when I access the page /dash it says failed to load yet there is no console log of an error?

Github Repo

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) => {
const { data: session, status } = useSession()
    axios
      .get(url, { 
        headers: { 
          'Authorization': `Bearer ${session.accessToken}`,
          'Client-Id': `${process.env.TWITCH_CLIENT_ID}`
        }})
      .then((res) => res.data);
        }
     
function Dash () {
  const { data, error } = useSWR(`https://api.twitch.tv/helix/streams/key?broadcaster_id=630124067`,fetcher)
  
  if (error) return (
    console.log(error),
    <div>Failed to load</div>
  )
  if (!data) return <div>loading...</div>

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

}

export default Dash