Code stops working after applying Orbit Controls

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>THREE.JS</title>
    <link rel="stylesheet" href="index_styles.css" />
</head>
<body>
    

    <script src="./js/three.js"></script>
    <script src="./js/OrbitControls.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 1000 );

        const renderer = new THREE.WebGLRenderer();
        // renderer.setPixelRatio(window.devicePixelRatio)
        renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
        document.body.appendChild( renderer.domElement );

        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshStandardMaterial( { color: 0x00ff00 } );
        const cube = new THREE.Mesh( geometry, material );
        scene.add( cube );

        const pointLight1 = new THREE.PointLight(0xffffff);
        pointLight1.position.set(5,0,10);
        const pointLight2 = new THREE.PointLight(0xffffff);
        pointLight2.position.set(-5,-5,10);
        const lightHelper = new THREE.PointLightHelper(pointLight1)

        const ambientLight = new THREE.AmbientLight(0xffffff);

        scene.add(pointLight1, pointLight2, lightHelper)

        renderer.render( scene, camera );

        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        camera.position.setZ(10);
        controls.update();

        let increasing = true;

        function animate() {
            requestAnimationFrame( animate );

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            if (cube.position.x <= 20 && increasing) {
                cube.position.x += 0.1
                increasing = true;
            } else if (cube.position.x > 20 || !(increasing)) {
                cube.position.x -= 0.1
                increasing = false;
                if (cube.position.x <= 0) {
                    increasing = true;
                }
            }

            controls.update();

            renderer.render( scene, camera );
        };

        animate();
    </script>
    
</body>
</html>

Everything in the code works if I do not include the line for OrbitControls. What am I doing wrong because as soon as I create the controls variable, the display is all black and the green cube disappears? I have included before and after pictures of what the display looks like with and without the code for orbit controls. Before:1 After:2