Bucles infinitos en React NextJs dentro de ganchos personalizados.

Hola, tengo un customHook dentro de un servicio que está siendo usado en una página. Uso useRouter para obtener el parámetro de consulta y obtengo un loop infinito. He intentado usar useCallBack pero incluso con ello sigue ocurriendo el loop.

Service customHook

public getUserSkillByUserId(
    userId: string,
    userSkillRequest?: IUserSkillRequest
  ): IFetchHook<iuserskill |="" void=""> {
    const [isLoading, setIsLoading] = useState<boolean>(false);
    const [error, setError] = useState<httperror |="" undefined="">(undefined);
    const [data, setData] = useState<iuserskill>();

const handleFetch = useCallback(() => {
  if (
    userSkillRequest &&
    userSkillRequest.jobCategoryIdList.every((element) => isNaN(element))
  )
    return;

  setIsLoading(true);
  setError(undefined);
  this.repository
    .getUserSkillByUserId(userId, userSkillRequest)
    .then((response) => {
      setIsLoading(false);
      setData(response.data);
    })
    .catch((e: HttpError) => {
      setIsLoading(false);
      setError(e);
    });
}, [userId, userSkillRequest]);

useEffect(() => {
  handleFetch();
}, [handleFetch]);

return { isLoading, error, data };
}

Page

“`
const JobDetail = (): JSX.Element => {
const { query, push } = useRouter();
const { jobid } = query;
const jobId = parseInt(jobid as string);

const USERID = 'USERID';
const JOBUID = 'JOBID';

const { data: userSkill, isLoading: userSkillIsLoading } =
userSkillService.getUserSkillByUserId(USERID, {
uid: JOBUID,
jobCategoryIdList: [jobId]
});

return (

<div> </div>

)
}
“`