score:1

It's a little late, but I just stumbled across the same problem.

You can modify your code to create a ref to the div, which can then be treated as a normal HTML-element. First, create the div:

constructor(props) {
        super(props);

        this.container = document.createElement('div');
        this.reference = React.createRef();
    }

Then, you add the ref to the correct div:

render() {

        return (
            <div ref={this.reference}>
            </div>
        )
    }

You can append whenever you like, but I'd do it after the component mount:

componentDidMount()
{
    this.reference.current.appendChild(this.container());
}

See here for an implementation with functional components

score:2

DOCS:

ReactElements are not to be confused with DOM Elements.

You can create React Element through React.createElement.

this.container = React.createElement('div');

Related Query

More Query from same tag