How to cast an HTMLElement to a React element?

I am working on a React application that uses an external library in Vanilla JS that creates DOM elements using document.createElement(...). Some of this data I want to insert into my React elements. If I have a simple application:
let sub = React.createElement('p', null, 'Made with React'),
main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));



It renders with the content

Made with React. If I try it with document.createElement instead, nothing is rendered.
let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', null, [sub])

React.render(main, document.getElementById('app'));



I have currently found a workaround using dangerouslySetInnerHTML.
let sub = document.createElement('p');
sub.innerText = 'Not React';
let main = React.createElement('div', {dangerouslySetInnerHTML: {__html: sub.outerHTML}});

React.render(main, document.getElementById('app'));



This renders but doesn't seem safe. What is the proper way to append HTMLElement as React child elements?