Inside *.astro page I have a React component, that has client:load directive. Inside the component I have another component that must be loaded only on client. How can I do it?

// pages/index.astro
import ComplexComponent from '../components/ComplexComponent'
...
<ComplexComponent client:load />
...

// components/ComplexComponent.tsx
...
export default function ComplexComponent() {
  ...
  return (
    <>
      <Component />
      <ClientOnly> // <---- ???
        <BrowserComponent/>
      </ClientOnly>
    </>
  )
}