Cannot update a component (Router) while rendering a different component

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://reactjs.org/link/setstate-in-render

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

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

"use client";

import { getDataById } from "@/data-query/appointment";
import { useQuery } from "@tanstack/react-query";
import { useParams } from "next/navigation";
import React, { useEffect, useState, useTransition } from "react";

export default function EventPageDetail() {
 

  const {eventId} = useParams()
  
  const {data, error, isFetching} = useQuery({
    queryKey: ['data'],
    queryFn: getDataById(eventId)
  })

  return <div>EventPageDetail</div>;
}