Creating module that uses webGL and React-Three-Fiber (three.js framework)

Problem Description

Trying to create a Divi module that contains React-three-fiber canvas to host a 3D scene. However I am not sure if this is possible wit Divi.

Steps To Reproduce

Following the how to create a module post. My Modules' jsx and php currently look like this.

JSX

// External Dependencies
import React, { Component, Fragment } from 'react';
import { Canvas } from '@react-three/fiber';
import { OrbitControls, Stats, Stars } from '@react-three/drei';

// Internal Dependencies
import './style.css';

class SimpleHeader extends Component {

  static slug = 'simp_simple_header';

  render() {
    return (
      <Fragment>
        <div>
          <Canvas>
            <Stars/>
          </Canvas>
        </div>
      </Fragment>
    );
  }
}

export default SimpleHeader;

PHP

<?php

class SIMP_SimpleHeader extends ET_Builder_Module {

    public $slug       = 'simp_simple_header';
    public $vb_support = 'on';

    public function init() {
        $this->name = esc_html__( 'Simple Header', 'simp-simple-extension' );
    }

    public function render( $unprocessed_props, $content = null, $render_slug ) {
        return '<div id="react-app"></div>',;
    }
}

new SIMP_SimpleHeader;

(removed the get_fields function as input is not needed)

After trying this I can see the tags in the html, but nothing is rendering. This is my first time trying to combine React with wordpress/php so I think I'm lacking some fundamental understanding. Any advice or help here is much appreciated.

Cheers

elegantthemes / create-divi-extension

Creating module that uses webGL and React-Three-Fiber (three.js framework) #514

Problem Description

Steps To Reproduce

Screenshot and/or gif