react-integration | Converts web components into React components | Frontend Utils library

From that error message:

Hooks can only be called inside of the body of a function component.

You are not calling a hook from inside the body of a function component. So you are breaking the rules of hooks.

According the rules of hooks you can only call a hook from the top level of a react function component. If you are not inside a functional component, then you cannot use a react hook*.

From the docs:

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

That means you need to call useStores from within a functional component.

Something like:

You can't return a react component from the function you pass to .nodeContent(), it must be an HTML string. Since you want to render an existing react component you can use ReactDOMServer.renderToStaticMarkup to get the equivalent HTML string.

According to docs, you need to call makeAutoObservable: