Looking for help with memory issues integrating Three with React

I have a React Component that is basically the Obj and Mtl loader example ported over to run in a react component on ComponentDidMount. The Obj and Mtl values are passed as props from the state in the parent. What I’m having issues with is when the props change to load a new model, all the three code only runs on mount, so I’m clearing the scene, removing the canvas tag, then running the entire script again in ComponentDidUpdate. This seems pretty inefficient, and slows down after 6 or 7 model switches. I’m wondering if anyone could help me with the proper way to do this that doesn’t result in wasted memory? Thanks in advance.

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

class ThreeContainer extends React.Component {

    componentDidMount(){
        let MODEL = this.props.model;
        let MTL = this.props.mtl;
        const container = document.getElementById('OBJ');
        var camera, scene, renderer;
        let mouseX = 0, mouseY = 0;
        let windowHalfX = window.innerWidth / 2;
        let windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function init() {

            //container = document.getElementById("OBJ");
            document.body.appendChild( container );
            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
            //export model flip z scale 3
            camera.position.z = 500;
            camera.position.x = 200;

            // scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color( 0xdddddd );
            var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
            scene.add( ambientLight );
            var pointLight = new THREE.PointLight( 0xffffff, 0.5 );
            camera.add( pointLight );
            scene.add( camera );


            // model
            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };


            var onError = function ( xhr ) { };
            THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.setPath( 'obj/' );
            mtlLoader.load( MTL, function( materials ) {
            materials.preload();
            var objLoader = new THREE.OBJLoader();
            objLoader.setMaterials( materials );
            objLoader.setPath( 'obj/' );
            objLoader.load( MODEL, function ( object ) {
                    object.position.x = 0;
                    object.position.y = 0;
                    scene.add( object );
                }, onProgress, onError );
            });

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            container.appendChild( renderer.domElement );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            window.addEventListener( 'resize', onWindowResize, false );
        }


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


        function onDocumentMouseMove( event ) {
            mouseX = ( event.clientX - windowHalfX ) / 1;
            mouseY = ( event.clientY - windowHalfY ) / 1;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render(){
            camera.position.x += ( mouseX - camera.position.x ) * .1;
            camera.position.y += ( - mouseY - camera.position.y ) * .1;
            camera.lookAt( scene.position );
            renderer.render( scene, camera );
        }

    }

    componentDidUpdate(){
      var camera, scene, renderer;
      var canvas = document.querySelector('canvas');
      var gl = canvas.getContext('webgl');
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);


      //remove old canvas
      var wrap = document.getElementById("OBJ");
      if (wrap.hasChildNodes()) {
      wrap.removeChild(wrap.childNodes[0]);
      }

      let MODEL = this.props.model;
      let MTL = this.props.mtl;
      const container = document.getElementById('OBJ');

      let mouseX = 0, mouseY = 0;
      let windowHalfX = window.innerWidth / 2;
      let windowHalfY = window.innerHeight / 2;

      init();
      animate();

      function init() {

          //container = document.getElementById("OBJ");
          document.body.appendChild( container );
          camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
          //export model flip z scale 3
          camera.position.z = 500;
          camera.position.x = 200;

          // scene
          scene = new THREE.Scene();
          scene.background = new THREE.Color( 0xdddddd );
          var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
          scene.add( ambientLight );
          var pointLight = new THREE.PointLight( 0xffffff, 0.5 );
          camera.add( pointLight );
          scene.add( camera );


          // model
          var onProgress = function ( xhr ) {
              if ( xhr.lengthComputable ) {
                  var percentComplete = xhr.loaded / xhr.total * 100;
                  console.log( Math.round(percentComplete, 2) + '% downloaded' );
              }
          };


          var onError = function ( xhr ) { };
          THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
          var mtlLoader = new THREE.MTLLoader();
          mtlLoader.setPath( 'obj/' );
          mtlLoader.load( MTL, function( materials ) {
          materials.preload();
          var objLoader = new THREE.OBJLoader();
          objLoader.setMaterials( materials );
          objLoader.setPath( 'obj/' );
          objLoader.load( MODEL, function ( object ) {
                  object.position.x = 0;
                  object.position.y = 0;
                  scene.add( object );
              }, onProgress, onError );
          });

          renderer = new THREE.WebGLRenderer();
          renderer.setPixelRatio( window.devicePixelRatio );
          renderer.setSize( window.innerWidth, window.innerHeight );
          container.appendChild( renderer.domElement );
          document.addEventListener( 'mousemove', onDocumentMouseMove, false );
          window.addEventListener( 'resize', onWindowResize, false );
      }


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


      function onDocumentMouseMove( event ) {
          mouseX = ( event.clientX - windowHalfX ) / 1;
          mouseY = ( event.clientY - windowHalfY ) / 1;
      }

      function animate() {
          requestAnimationFrame( animate );
          render();
      }
      function render(){
          camera.position.x += ( mouseX - camera.position.x ) * .1;
          camera.position.y += ( - mouseY - camera.position.y ) * .1;
          camera.lookAt( scene.position );
          renderer.render( scene, camera );
      }
    }

    render() {
        return <div id="OBJ"/>
    }
}

export default ThreeContainer;