title: How to put sub-internal component into another external component in react using useRef?
body: <p>I am using functional component in react.</p>
  <p>You can see default component structure here,
  <a href="https://i.stack.imgur.com/ZxMqv.png" rel="nofollow noreferrer">Default Component structure</a></p>
  <p>I have created a component i.e. <strong>Section1</strong> which 3 internal component namely, <strong>Component1</strong>, <strong>Component2</strong> and <strong>Component3</strong> the working of these internal component are totally dependent on each other using internal state.</p>
  <blockquote>
  <p>And neither state or component is exposed/accessible outside of component <strong>Section1</strong>.</p>
  </blockquote>
  <p>I am trying to achieve this, <a href="https://i.stack.imgur.com/3Mxnj.png" rel="nofollow noreferrer">Expected structure</a></p>
  <p>I am trying to mount <strong>Component3</strong> inside <strong>Component4</strong> which is inside component <strong>Section2</strong>.</p>
  <p>I accomplished this using <code>useRef</code> &amp; <code>ReactDOM.render</code>. What I did is exposed the reference of <strong>Component4</strong> outside of <strong>Section2</strong> as <code>component4Ref</code>. So that it will be accessible in <strong>Section1</strong> component. As we know, <code>component4Ref.current</code> return mounted element Node of <strong>Component4</strong>. Using this element and <code>ReactDOM.render</code>, I mounted <strong>Component3</strong> inside <strong>Component4</strong> like this.</p>
  <blockquote>
  <p><code>ReacDOM.render(Component3, component4Ref.current)</code></p>
  </blockquote>
  <p>But I am getting a warning in console.</p>
  <blockquote>
  <p>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.</p>
  </blockquote>
  <p>Is this right approach ?
  Is there better way of doing this ?</p>
  <p>here is <a href="https://codesandbox.io/s/patient-forest-6rgz2" rel="nofollow noreferrer">Sandbox link</a>,</p>
  <p>Thanks, in advance.</p>