How to append JSX to DOM in React?

I want to append something to my DOM.

let parent = document.getElementById("TabContainer");
let settings = 
<Box id="test">
  <GlobalSettings activeTab={"test"}></GlobalSettings>
</Box>
                
parent.appendChild(settings);

I get the following error

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.

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.

I hope someone can help me :)

Thx