Reference a React Element before its declared in JSX

Question

I am implementing react-native-zss-rich-text-editor in my project and am having a issue where the RichTextToolbar needs a function that returns a ref to a RichTextEditor component.

If I order the RichTextEditor before the RichTextToolbar it works fine

<RichTextEditor
  ref={(r) => this.richtext = r}/>
<RichTextToolbar
    getEditor={() => this.richtext}/>

But I would like to first render the RichTextToolbar and then the RichTextEditor which throws an exception

    <RichTextToolbar
        getEditor={() => this.richtext}/>  <-----
    <RichTextEditor
      ref={(r) => this.richtext = r}/>