How to put sub-internal component into another external component in react using useRef?

Question

I am using functional component in react.

You can see default component structure here, Default Component structure

I have created a component i.e. Section1 which 3 internal component namely, Component1, Component2 and Component3 the working of these internal component are totally dependent on each other using internal state.

And neither state or component is exposed/accessible outside of component Section1.

I am trying to achieve this, Expected structure

I am trying to mount Component3 inside Component4 which is inside component Section2.

I accomplished this using useRef & ReactDOM.render. What I did is exposed the reference of Component4 outside of Section2 as component4Ref. So that it will be accessible in Section1 component. As we know, component4Ref.current return mounted element Node of Component4. Using this element and ReactDOM.render, I mounted Component3 inside Component4 like this.

ReacDOM.render(Component3, component4Ref.current)

But I am getting a warning in console.

Warning: Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate.

Is this right approach ? Is there better way of doing this ?

here is Sandbox link,

Thanks, in advance.