Canvas isn't display OBJ file after loading and rendering via WebGL

Questions
1

I’m uploading a OBJ file to my react app. The file loads, i call animation but nothing appears but the canvas. I don’t see any errors in the console so I’m not sure where to go from here. I’ve tried two different OBJ files, one large and one small with the same result.

Here is a link to my dev server which is logging the loading status and loaded scene, http://40.114.68.103:3000/

import React, { useEffect, useRef, useCallback } from 'react';
const THREE = require('three')
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader';


export function TestScene() {
  const [update, setUpdate] = React.useState(null);
  const mountRef = useRef(null);
  
  
  useEffect(() => {

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0,100,0); 
  camera.lookAt(scene.position);
  const light = new THREE.AmbientLight( 0x404040, 10 )
  const renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x111111, 1);
  const loader = new OBJLoader();
  renderer.setSize(window.innerWidth, window.innerHeight);

  mountRef.current.appendChild(renderer.domElement);

  const animate = function () {
      window.requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };


  loader.load(

      'dreamCity.obj',

      function (object) {

        scene.add(object);
	scene.add(light);
        camera.position.z = 1000;
	animate()


      },
      function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');

      },
      function (error) {

        console.log(error);

      }
    );


  }, [])


  return <>
    <h1 id='test' style={{ color: 'black' }}>blahhh</h1>
    <div ref={mountRef} />
  </>
}