Next js: Hydration failed with React Query and React Cookie

Question

So i have narrowed the issue down to the fact that I am using the cookie.logged_in to enable the react query call. If I remove the enabled: !!cookies.logged_in and cookies.logged_in in the if condition, then the code works properly . I want a scenario where the code goes directly to show the children if the cookies.logged_in is unavailable and only tries to show the loading when both the query. loading is working and cookies.logged_in is actually available

This is my code

const AuthMiddleware: React.FC<AuthMiddlewareProps> = ({ children }) => {
    const [cookies] = useCookies(['logged_in']);
    const { setCurrentUser } = useContext(Context);

    const query = useQuery(['authUser'], () => getCurrentUserFn(), {
        enabled: !!cookies.logged_in,
        select: (data) => data,
        onSuccess: (response) => {
            setCurrentUser(response);
        },
        onError: () => {
            setCurrentUser({} as AuthUser);
        },
    });

    if (query.isLoading && cookies.logged_in) {
        return <LoadingScreen />;
    }

    return children;
};