isError not updated when NextJS API fails

const Providers = ({ children }) => {
  return (
    <QueryClientProvider client={new QueryClient({
    defaultOptions: {
      queries: {
        throwOnError: true,
        retry: 3,
      },
    },
  })}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
};

export default function UserAccount() {
  return (
    <PageProtected>
      ...
    </PageProtected>
  );
}

export default function PageProtected({ children }: { children: JSX.Element }) {
  const status = usePageProtected();

  return <LoadingComponent />;
}

export default function usePageProtected() {
  const { isAuthenticated, isInitializing } = useAuth();

  const { isFetched, isLoading, data, isError } = useGetSelfUser();

  console.log(
    `isInitializing-${isInitializing}-isFetched-${isFetched}-isLoading-${isLoading}-isAuthenticated-${isAuthenticated}-isError-${isError}`
  );

  return PageCheckStatus.LOADING;
}

const useGetSelfUser = () => {
  const queryKey = queries.user.self.all();

  return useQuery({
    queryKey,
    queryFn: async () => {
      try {
        const response = await fetch(`/123`);
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      } catch (error) {
        console.log("error", error);
      }
    },
  });
};