title: How to pass a React reference to the innermost component?
body: <p>I am importing an external library component and I need to pass a react reference to the innermost DOM element which is not directly accessible to me.</p>
  <p>Example</p>
  <p><code>const myRef = useRef(null)</code></p>
  <p>If I use ref to this external library component:</p>
  <p><code>&lt;Cell ref={myRef} className=&quot;outer&quot; &gt; Hello &lt;/Cell&gt;</code>,</p>
  <p>It will render below in the browser:</p>
  <pre><code>&lt;div class=&quot;outer&gt; /*ref is applied here */
     &lt;span class=&quot;wrapper&quot;&gt;
        &lt;span class=&quot;target&quot;&gt;Hello &lt;/span&gt;  /*How to pass ref to this dom? */
     &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Some suggested using ForwardRef, but I am not sure how to use it when I don't know ahead what the final DOM element will be.</p>