I have an infinite loop within my hook but app works as expected, i'm confused...

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}

import zustand from ...

export function useGetTickets(tenantId?: any) {
  const setTickets = useTicketStore((state) => state.setTickets);
  const isApiError = useTicketStore((state) => state.isApiError);
  const setIsApiError = useTicketStore((state) => state.setIsApiError);

  const { isLoading, isError, data } =
    trpc.getTicketsWithPhotos.getAll.useQuery(undefined, {
      onSuccess: (data) => {
        console.log("data", data);
        setIsApiError(false);
        setTickets(data.tickets);
      },
      onError: (e) => {
        showToastCustomError(
          "Sever Error",
          "We cannot connect to our servers, please try again later or contact support",
          8000
        );
        setIsApiError(true);
        return console.error(e.message);
      },
    });

  return { data, isLoading, isApiError };
}