i created my api route to return me guild objects from discord

import { PartialGuild } from "@/app/types"
import { NextApiRequest } from "next"
import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"

async function getGuilds(token: string): Promise<PartialGuild[]> {
  const res = await fetch("https://discord.com/api/users/@me/guilds", {
    headers: {
      Authorization: token,
    },
  })
  return await res.json()
}

export async function GET(req: NextApiRequest) {
  const token = await getToken({ req })
  if (!token?.accessToken) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
  }
  const userGuilds = await getGuilds(`Bearer ${token.accessToken}`)
  const botGuilds = await getGuilds(`Bot ${process.env.DISCORD_BOT_TOKEN}`)

  const adminUserGuilds = userGuilds.filter(
    ({ permissions }) => (parseInt(permissions) & 0x8) === 0x8
  )

  const mutualGuilds = adminUserGuilds.filter((guild) =>
    botGuilds.some((botGuild) => botGuild.id === guild.id)
  )
  return NextResponse.json({ adminUserGuilds, mutualGuilds })
}

code for it ^

and it works, but only when i query it manually by typing the api link to browser, now how can i get that data in component cause using this code

export default async function Dashboard() {
  const res = await fetch("http://localhost:3000/api/user/getMutualGuilds")
  const servers = await res.json()
  console.log(servers)

  return (
    <div>
      <h1>{JSON.stringify(servers, null, 2)}</h1>
    </div>
  )
}

returns { "error": "Unauthorized" }