Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component : <p>I'm trying to render LaTeX strings in a React project.
Although I use the <code>react-mathjax</code> React components, I want to get an HTML string made from the LaTeX strings in order to concatenate it and the other strings and set it by dangerouslySetInnerHTML.</p>

<h2>My current code I tried</h2>

<p>Sample code is here: <a href="https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx" rel="noreferrer">https://github.com/Nyoho/test-react-project/blob/component2string/src/components/tex.jsx</a></p>

<ol>
<li>LaTeX strings are given as strings</li>
<li>Make an empty DOM <code>aDom</code> by <code>document.createElement('span')</code> (in background. not in the document DOM tree.)</li>
<li>Render a LaTeX string by <code>ReactDOM.render</code> into <code>aDom</code></li>
<li>After rendering, get a string by <code>aDom.innerHTML</code> or <code>.outerHTML</code></li>
</ol>

<h2>Problem</h2>

<p>The value of <code>aDom.innerHTML</code> (or <code>.outerHTML</code>) is <code>"&lt;span&gt;&lt;span data-reactroot=\"\"&gt;&lt;/span&gt;&lt;/span&gt;"</code> (almost empty)
although <code>aDom</code> has a perfect tree that MathJax generated.</p>

<p>Briefly,</p>

<ol>
<li><code>aDom</code>: 🙆</li>
<li><code>aDom.outerHTML</code>: 🙅</li>
</ol>

<p><a href="https://i.stack.imgur.com/2Q2v8.png" rel="noreferrer">A screenshot console.log of <code>aDom</code> and <code>aDom.outerHTML</code></a></p>

<h2>Question</h2>

<p>How can I get the 'correct' HTML string from <code>aDom</code> above?</p>
