Vitepress use external library react library

Question

Facing a pretty wierd bug. I want to use the external react library like this https://shoelace.style/frameworks/react in the vitepress. While running the app in the dev with npm run docs:dev is works fine but doesn't when the build is served.

The error thrown is Uncaught TypeError: Cannot read properties of null (reading 'useRef')

This is the code playground for the same: https://stackblitz.com/edit/vite-dnqmyv?file=docs%2FFooBar.jsx,docs%2Findex.md,docs%2F.vitepress%2Fconfig.ts

My thoughts here is that this is due to the components getting rendered on the server maybe. But I have tried to cover this up by following methods:

• Rending (& importing) after the mount

    onMounted(async () => {
        const {default: FooBar} = await import("./FooBar.jsx")
        const root = createRoot(el.value)
        root.render(createElement(FooBar, {}, null))
    })

• Using ClientOnly provided by vitepress for rendering on the Client

    <ClientOnly><div ref="el" /></ClientOnly>

Additional Context:

• I am using vitepress for the ssg for the docs. I really liked the UI.
• I am using @vitejs/plugin-react for using react in vitepress.