Missing documentation

I stumbled onto something that works but is not documented and I'd like to understand if it should be avoided.

The setup: Non react application renders various react components in few places.

I've noticed couple of components that do the following:

function Foo(props){
    return <div>
        Some content
        <div id="placeholder"></div>
    </div>
}
ReactDOM.render(<Foo/>, domRef)

Somewhere else in the application ReactDOM.render(<Bar/>, document.getElementById("placeholder")). The "placeholder" being the dom element rendered by the <Foo /> component.

I couldn't find anything in the React docs and Stackoverflow describing how/if this should work. Any light on the subject would be much appreciated.

I have also opened a this: https://stackoverflow.com/questions/66134211/reactdom-render-one-react-component-inside-the-render-tree-of-another

issueで説明されているReactDOM.renderの例から始め、既存のReactドキュメントと比較します。別のコンポーネントによって生成されたDOM要素へのレンダリングがサポートされているのか、それとも避けるべきなのかを判断し、その指針をドキュメント化したうえで、ページがここで提起されたネストされたレンダリングのケースを扱っていることを確認します。