Mobx is used with React.Lazy, the render method is executed many times when requesting data

[fx-2]

Intended outcome: When Mobx is used with React.Lazy, and the request is sent in the action, the component will only render the expected number of times

Actual outcome: When Mobx is used with React.Lazy, if the request is sent and the variable is set in the action, the component using React.Lazy will execute the render method hundreds of times. this is not normal

How to reproduce the issue: Here is CodeSandbox example:
https://codesandbox.io/s/youthful-david-00hzul?file=/src/App.js

Versions
react 18.2.0
mobx-react 7.6.0
mobx 6.7.0

[urugator]

Hm not sure if you can call React.lazy directly in render. Can you move const Test = lazy(() => import("./Test")); outside the component?

Then the warning:

Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead.

relates to
#3492

and is addressed by
#3590

[fx-2]

ok. I moved React.lazy to the constructor method and this works fine. thanks