Return WebGL Renderer in Typescript Component

Questions
1

I am trying to create a GLTF viewer in a typescript component module, and am struggling when I return the domElement or the container that I put it in, I get an error stating that
Objects are not valid as a React child (found: [object HTMLDivElement]).rgs[]

I am assuming it is because I am trying to return the object directly and not an html string (for example I know that <img src='folder/image/> works).

I am 100% new to both Javascript and Typescript so I really appreciate any ideas.

Here is the Typescript Module

import * as React from 'react';
import { Component, ComponentMeta, ComponentProps, SizeObject } from 
'@inductiveautomation/perspective-client';
import { observer } from 'mobx-react';
import * as THREE from '../include/three.module.js';
import { OrbitControls } from '../include/OrbitControls.js';
import { GLTFLoader } from '../include/GLTFLoader.js';

export const COMPONENT_TYPE = "ThreeD.display.Viewer";

export interface ViewerProps {
    color: string;  
}

@observer
export class Viewer extends Component<ComponentProps, any> {
render() {
    const container = document.createElement( 'div' );

    const camera: any  = new THREE.PerspectiveCamera( 45, window.innerWidth / 
window.innerHeight, 0.25, 100 );
    const scene: any = new THREE.Scene();
    const renderer: any  = new THREE.WebGLRenderer({ antialias: true });
    const controls: any  = new OrbitControls( camera, renderer.domElement );
    const loader: any = new GLTFLoader();

    init();
    render();

    function init() {
        camera.position.set( - 25, 15, 15);

        let ambientLight = new THREE.AmbientLight( 0x404040 );
        let directionalLight1: any  = new THREE.DirectionalLight( 0xC0C090 );
        let directionalLight2: any  = new THREE.DirectionalLight( 0xC0C090 );

        directionalLight1.position.set( - 100, - 50, 100 );
        directionalLight2.position.set( 100, 50, - 100 );

        scene.add( directionalLight1 );
        scene.add( directionalLight2 );
        scene.add( ambientLight );

        loader.setPath( 'models/Trapezoid/' );
        loader.load( 'Trapezoid.glb', function ( gltf: { scene: any } ) {
            scene.add( gltf.scene );
            render();

            } );

        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 0.8;
        renderer.outputEncoding = THREE.sRGBEncoding;
        container.appendChild( renderer.domElement );

        const pmremGenerator = new THREE.PMREMGenerator( renderer );
        pmremGenerator.compileEquirectangularShader();

        controls.addEventListener( 'change', render ); 
        controls.minDistance = 2;
        controls.maxDistance = 100;
        controls.target.set( 0, 0, - 0.2 );
        controls.update();
        window.addEventListener( 'resize', onWindowResize, false );
        }

    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
        render();
        }


    function render() {
        renderer.render( scene, camera );
        }

    //This is presumably where the error is coming from
    return(container);

    }
}

// this is the actual thing that gets registered with the component registry
export class ViewerMeta implements ComponentMeta {

getComponentType(): string {
    return COMPONENT_TYPE;
}

// the class or React Type that this component provides
getViewClass(): React.ReactType {
    return Viewer;
}

getDefaultSize(): SizeObject {
    return ({
        width: 360,
        height: 360
        });
    }
}