Problem

I am trying to create a ThreeJS scene and need OrbitControls to properly build it. However, when I load the page, all my objects appear properly, including my gridHelper, but the OrbitControls do not work. I have checked the ThreeJS docs on how to correctly import the OrbitControls, and have made sure that the controls update, etc. There are no errors or warnings in vs code or the inspector.

Code

import './style.css'
import * as THREE from 'three';
import isTouchDevice from './util';
import { OrbitControls } from 'three/addons/controls/OrbitControls';

let useAntiAliasing = window.devicePixelRatio < 1;

const renderer = new THREE.WebGLRenderer({ antialias: useAntiAliasing, powerPreference: "high-performance", canvas: document.querySelector("#bg"), });

renderer.setPixelRatio(window.devicePixelRatio);


if (isTouchDevice()) {
  if (window.orientation == 90 || window.orientation == -90) renderer.setSize(screen.height, screen.width); // Includes space for the address bar and tabs.
  else renderer.setSize(screen.width, screen.height); // Includes space for the address bar and tabs.
} else {
    renderer.setSize(window.innerWidth, window.innerHeight);
}




const scene = new THREE.Scene();
const spaceTexture = new THREE.TextureLoader().load('2k_stars_milky_way.jpg');
scene.background = spaceTexture;
renderer.setClearColor(0xffffff, 0) 

const ambientLight = new THREE.AmbientLight(0xffffff)
scene.add(ambientLight)

const gridHelper = new THREE.GridHelper(200, 50)
scene.add(gridHelper)

let renderDistanceMax = 0;


if (window.innerWidth <= 768) renderDistanceMax = 600
else if (window.innerWidth >= 769 && window.innerWidth <= 1080) renderDistanceMax = 875
else renderDistanceMax = 900

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  renderDistanceMax
)

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 0);
controls.update();


function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

There is some code not included where I instantiate planets with their textures, however these planets show up correctly and spin as they are coded to, so I don’t think they have anything to do with the problem. If needed I will add that code to my question.