How to fix Suspense boundary received an update before it finished hydrating when using startTransition in React

// Add to suspect components
useEffect(() => {
  console.log('Component mounted:', ComponentName);
}, []);

import { useEffect, useState } from 'react';

function useHydrated() {
  const [hydrated, setHydrated] = useState(false);

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

  return hydrated;
}

// In your component
function MyComponent() {
  const hydrated = useHydrated();

  // Only run client-side code after hydration
  useEffect(() => {
    if (!hydrated) return;

    // Safe to update state here
    dispatch(someAction());
  }, [hydrated]);
}

import { useSyncExternalStore } from 'react';

function useTheme() {
  const theme = useSyncExternalStore(
    // subscribe
    (callback) => {
      window.addEventListener('storage', callback);
      return () => window.removeEventListener('storage', callback);
    },
    // getSnapshot (client)
    () => localStorage.getItem('theme') || 'light',
    // getServerSnapshot (SSR)
    () => 'light' // Return consistent default for server
  );

  return theme;
}

import { startTransition } from 'react';

function MyComponent() {
  useEffect(() => {
    // Wrap the update in startTransition
    startTransition(() => {
      dispatch({ type: 'INIT' });
    });
  }, []);
}

import dynamic from 'next/dynamic';

const ClientOnlyComponent = dynamic(
  () => import('./ClientOnlyComponent'),
  { ssr: false }
);

function Page() {
  return (
    <Suspense fallback={<Loading />}>
      <ClientOnlyComponent />
    </Suspense>
  );
}

function App({ children }) {
  const [mounted, setMounted] = useState(false);

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

  return (
    <div suppressHydrationWarning>
      {mounted ? (
        <ThirdPartyProvider>
          {children}
        </ThirdPartyProvider>
      ) : (
        children
      )}
    </div>
  );
}