SEO and NextJS APP wrapped into `use client` provider

I have the following provider that wraps my entire NextJS APP:

'use client';

import { useScrollToHash } from '@/hooks/use-scroll-to-hash';
import { useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';

interface Props {
  children: React.ReactNode;
}

export default function ClientProviders({ children }: Props) {
  const router = useRouter();
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    setIsReady(true);
  }, [router]);

  if (isReady) {
    return children;
  }
}

So it returns null until isReady is set to true. Will it have any negative impact on my SEO and I should remove it or it’s fine?

When I remove it, I have a plenty of error during my build like useMediaQuery is a client-only hook. I did what was mentioned here https://stackoverflow.com/a/78209620/24587344 and then I’ve got another error: document is not defined. I found that I have a component form-select that uses:

menuPortalTarget={document.body}

so I did

menuPortalTarget={typeof window !== 'undefined' ? document.body : undefined}

and now application is succesfully built but when I navigate to server side page, I’ve got an error:

Hydration failed because the initial UI does not match what was rendered on the server.

and Fallback component from Suspense is not more rendered and instead the page is instantly loaded but with layout different that normally probably because of this useMediaQuery hoook because I see that initially some mobile only components are rendered and they disappear instantly once full page is client side rendered.

I would appreciate help!