This is my API routes file, in this API routes I get the id from session in auth.ts file:

export async function GET(request: Request) {
  const session = await auth()

  const bookings = await prisma.booking.findMany({
    where: {
      user_id: {
        equals: session?.user.id
      }
    },
    include: {
      user_book: {
        select: {
          name: true,
          email: true,
          image: true,
          nomor_hp: true,
        },
      },
      mobil_book: {
        select: {
          merk: true,
          type: true,
          nomor_plat: true,
          persneling: true,
          bahan_bakar: true,
          image: true,
          tarif: true,
        },
      },
    },
  });
  return NextResponse.json({ bookings: bookings }, { status: 200 });
}

This is my function file to get the data and return JSON:

export async function getBooking() {
  const res = await fetch("http://localhost:3000/api/booking")
    // The return value is *not* serialized
    // You can return Date, Map, Set, etc.
   
    if (!res.ok) {
      // This will activate the closest `error.js` Error Boundary
      return new Error('Failed to fetch data')
    }
   
    return res.json()
};

I want to display data where current user can get their data, but I’m confused, in API routes the data is empty, and then in component the data is still display, any guess anyone?

• this is my component ss
• this is my api routes ss