Hey friends, can anyone help me quickly?
Why do i keep getting undefned when i try to request data from Next js server component to the backend?:

"use server"


export async function getMasters() {
  console.log("request...")
  try {
    const response = await fetch(`http://localhost:4000/masters/public`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
    })
    const { data: masters } = await response.json()

    console.log({ masters })
    return masters
  } catch (error) {
    throw new Error("Something went wrong while fetching companies...")
  }
}

and in my RSC

import { getMasters } from "@action/master"
import { WelcomeModal } from "@/components/modal/WelcomeModal"
import { cn } from "@/lib/shadcn"
import { DashboardComponent } from "@dashboard/DashboardComp"
import * as React from "react"

interface MaxWidthWraperProps {
  children: React.ReactNode
  className?: string
}

const MaxWidthWraper = ({ children, className }: MaxWidthWraperProps) => {
  return (
    <div className={cn(`w-full max-w-[1500px] ${className ?? ""}`)}>
      {children}
    </div>
  )
}

export const dynamic = "force-dynamic"

export default async function DashboardPage() {
  const masters = await getMasters()

  console.log({ masters })

  return (
    <>
      <MaxWidthWraper>
        <DashboardComponent />

        {JSON.stringify(masters)}
      </MaxWidthWraper>

      <WelcomeModal />
    </>
  )
}

How do i fix it?