Renderizando o elemento three.js no React?

Estou tentando criar um componente React que renderize uma cena three.js. No entanto, sempre que tento montar o componente em vez de ver qualquer tipo de cena sendo renderizada, apenas vejo o texto[object HTMLCanvasElement] sendo mostrado.

Aqui está o meu componente:

import React from 'react';
import * as THREE from 'three';

class Cube extends React.Component {

    constructor() {
        super();
        this.animate = this.animate.bind(this);
        this.scene = new THREE.Scene();
        this.geometry = new THREE.BoxGeometry(200, 200, 200);
        this.material = new THREE.MeshBasicMaterial({
            color: 0xff0000,
            wireframe: true
        });
        this.mesh = new THREE.Mesh(this.geometry,this.material);
        this.scene.add(this.mesh);
        this.renderer = null;
        this.camera = null;
    }

    render() {
        if (typeof window !== 'undefined') {
            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
            this.camera.position.z = 1000;
            this.renderer = new THREE.WebGLRenderer();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
            return (
                <div dangerouslySetInnerHTML={{__html: this.renderer.domElement}}></div>
            );
        } else {
            return null;
        }
    }
}

export default Cube;

Eu recebi o código dopágina de pacote de três npm e tentou convertê-lo em um componente React. O que estou fazendo de errado que está fazendo a cena não renderizar?

questionAnswers(1)

yourAnswerToTheQuestion