how to use react context with Tanstart SSR?

[fyepi]

I have a react app that heavily use react context and useContext . I tried to use tanstart but got this error
Error in renderToPipeableStream: Error: globalContext must be used within a GlobalContextProvider

I am trying to use HeroUI together with tanstart.

Here is the client.tsx. The rest is the same to the code in tanstart doc.

// app/client.tsx
/// <reference types="vinxi/types/client" />
import { HeroUIProvider } from '@heroui/react'
import { StartClient } from '@tanstack/react-start'
import { hydrateRoot } from 'react-dom/client'
import { createRouter } from './router'

import '@/styles/globals.css'

import { StrictMode } from 'react'
import { GlobalContextProvider } from '@/utils/global-context'

const router = createRouter()

hydrateRoot(
  document,
  <StrictMode>
    <HeroUIProvider
      navigate={(to, options) => router.navigate({ to, ...options })}
      useHref={(to) => router.buildLocation({ to }).href}
    >
      <GlobalContextProvider>
        <StartClient router={router} />
      </GlobalContextProvider>
    </HeroUIProvider>
  </StrictMode>
)

[schiller-manuel]

if you want to SSR then you should put those in the root route