import { ConvexAuthProvider } from '@convex-dev/auth/react'
...
const { ENV } = useLoaderData<typeof loader>();
const [convex] = useState(() => new ConvexReactClient(ENV.CONVEX_URL));
...
<ConvexAuthProvider client={convex}>
  {children}
</ConvexAuthProvider>

import { ConvexAuthProvider } from '@convex-dev/auth/react'
...
const { ENV } = useLoaderData<typeof loader>();
const [convex] = useState(() => new ConvexReactClient(ENV.CONVEX_URL));
...
<ConvexAuthProvider client={convex}>
  {children}
</ConvexAuthProvider>

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at ConvexProviderWithAuth (node_modules/convex/dist/esm/react/ConvexAuthState.js:20:3)
    at AuthProvider (node_modules/@convex-dev/auth/dist/react/client.js:13:32)
    at ConvexAuthProvider (node_modules/@convex-dev/auth/dist/react/index.js:43:13)

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at ConvexProviderWithAuth (node_modules/convex/dist/esm/react/ConvexAuthState.js:20:3)
    at AuthProvider (node_modules/@convex-dev/auth/dist/react/client.js:13:32)
    at ConvexAuthProvider (node_modules/@convex-dev/auth/dist/react/index.js:43:13)