so I have previous fetch from database and it’s working properly fine, but when I tried to fetch a single data from my database, I get this

Warning: Cannot update a component (Router) while rendering a
different component (EventPageDetail). To locate the bad setState()
call inside EventPageDetail, follow the stack trace as described in
https

So what I did here is, I created a page, and then call the component and then call the server-action

app/events/[eventId]/page.tsx

const EventDetailPage = () => {
  return (
    <>
        <EventPageDetail />
    </>
  )
}

components/admin/admin-events-detail.tsx

"use client";

import { getDataById } from "@/data-query/appointment";
import { useParams } from "next/navigation";
import React from "react";

export default  function EventPageDetail() {
  const { eventId } = useParams();
  const data = getDataById(eventId)
  console.log(data)
  return <div>EventPageDetail</div>;
}

And this is my server action

data-query/appointment.ts

'use server'

export async function getDataById(id: string){
  try {
    const data = await db.appoinmentSchedule.findUnique({
      where: {
        id:id
      }
    })

    return data
  } catch (error) {
    return error
  }
}