One scene is overlapping on an other scene

[MrRaam]

I'm trying to have multiple scenes in my react-three-renderer application, I have referred your code, and i'm able to render the scene correctly. However, The issue right now is when I click on another scene that particular object in the scene overlaps with the already existing scene's object. I have used dispose, and refs.remove but no luck. Kindly look into this

Expected Behaviour: " the container should dispose previous scene information when tried to clicking on the next scene."

Note: i'm calling the model data dynamically and i'm not using the switch because there are more models to be loaded.

class WebVR extends React.Component {
  static propTypes = {
    width: React.PropTypes.number.isRequired,
    height: React.PropTypes.number.isRequired,

  };

  constructor(props, context) {
    super(props, context);

    this.cameraPosition = new THREE.Vector3(0, 0, 12);

     this.state = {
      meshPosition: new THREE.Vector3(0, 5, 0),
      torsoScale: new THREE.Vector3(4.8, 4.5, 4.5),
      lightIntesity: 0.6,
      obj: 'torso.obj',
      mtl: 'torso.mtl',
      path: '/',

    };

this.renderObjGraveObject = this.renderObjGraveObject.bind(this);
this.loadObjGrave = this.loadObjGrave.bind(this);
this.lightPosition = new THREE.Vector3(5, 2, 2);
    this.lightTarget = new THREE.Vector3(0, 0, 0);

    this._onAnimate = () => {
       this.controls.update();

    };
  }

  loadObjGrave() {
   this.refs.group.remove(this.state.object);
    this.renderObjGraveObject();
  }

  renderObjGraveObject() {
    this.THREE = THREE;
    const group = this.refs.group;
    const mtlLoader = new MTLLoader();
    mtlLoader.setBaseUrl(this.state.path);
mtlLoader.setPath(this.state.path); 
mtlLoader.crossOrigin = '0';
return (
      mtlLoader.load(this.state.mtl, materials => {
        materials.preload();
        const objLoader = new this.THREE.OBJLoader();
        objLoader.setMaterials(materials);
        objLoader.setPath(this.state.path);
        objLoader.load(this.state.obj, object => {

          object.traverse( function( child ) { if ( child instanceof THREE.Mesh ) {

        }
          }});
          group.add(object);
          this.setState({object});
        })
      })
    )
  }

componentDidMount(){
   const controls = new OrbitControls(this.refs.camera);
   this.controls = controls;
   this.renderObjGraveObject();  
}

   componentWillUnmount() {
     this.refs.group.remove(this.state.object);
    this.controls.dispose();
    delete this.controls;
  }

  render() {

    const {
      width,
      height,
    } = this.props;

  const {
      meshPosition,
       lightIntesity,

    } = this.state;

    var aspectratio= width / height;
    var cameraprops = {fov:75,
          aspect:aspectratio,
          near:0.1,
          far:1000,
          position:this.cameraPosition
          };
    return (<React3
      mainCamera="camera" // this points to the perspectiveCamera below
      width={width}
      height={height}
      clearColor={0x79589F}

      onAnimate={this._onAnimate}
    >
      <scene>

        <perspectiveCamera
        ref="camera"
          name="camera"
          {...cameraprops}

        />

        <ambientLight
            color={'white'}
          />
          <directionalLight
            color={'#f3f0ea'}
            intensity={lightIntesity}

            castShadow

            shadowMapWidth={1024}
            shadowMapHeight={1024}

            shadowCameraLeft={120}
            shadowCameraRight={-20}
            shadowCameraTop={120}
            shadowCameraBottom={-20}

            shadowCameraFar={3 * 20}
            shadowCameraNear={20}

            position={this.lightPosition}
            lookAt={this.lightTarget}
          />

          <group
            ref='group'
            position={meshPosition}
            scale={this.state.torsoScale}
            castShadow
            receiveShadow

          />

      </scene>
    </React3>);
  }
}

`