title: How to append JSX to DOM in React?
body: <p>I want to append something to my DOM.</p>
  <pre><code>let parent = document.getElementById(&quot;TabContainer&quot;);
  let settings = 
  &lt;Box id=&quot;test&quot;&gt;
    &lt;GlobalSettings activeTab={&quot;test&quot;}&gt;&lt;/GlobalSettings&gt;
  &lt;/Box&gt;
                  
  parent.appendChild(settings);
  
  </code></pre>
  <p>I get the following error</p>
  <pre><code>Argument of type 'Element' is not assignable to parameter of type 'Node'.
    Type 'Element' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 47 more.
  </code></pre>
  <p>Box is a normal div and GlobalSettings is my own component.
  I know it's maybe bad practice to manipulate the DOM like this, but for me it seems to be an easy way.
  Btw this code runs in the onClick function from a Button.</p>
  <p>I hope someone can help me :)</p>
  <p>Thx</p>