Cannot click button due to canvas

I have created a webpage which uses three.js to render objects. However, I am unable to click the buttons. I think its because the canvas rendered by three.js doesn't allow any clicking. Below is my code:

<body>
    <!-- <h3>Tester</h3> -->
    <div class="container">
        <audio autoplay loop>
            <source src="audio/Menu_music.mp3" type="audio/mpeg">
        </audio>
        <h1 unselectable="on" class="animate-character">GAME</h1>
        
        <button class="button-57" role="button"><span class="text">Single Player</span><span>GO</span></button>
        <button class="button-57" role="button", id = "multiGameButton"><span class="text">Multi Player</span><span>GO</span></button>
    
    </div>
    <script src="https://threejs.org/build/three.js"></script>
    <script src="GLTFLoader.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="FontLoader.js"></script>
    <script>
        let scene, camera, renderer;

        function init() {
            scene = new THREE.Scene();
            const spaceTexture = new THREE.TextureLoader().load('space.jpg');

            camera = new THREE.PerspectiveCamera(40, window.innerWidth/window.innerHeight,1,5000);

            controls = new THREE.OrbitControls(camera, document.body)
            controls.addEventListener('change', renderer);


         
            
            renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            let loader = new THREE.GLTFLoader();
            loader.load('./vehicle.glb', function(gltf){
                car = gltf.scene.children[0];
                car.scale.set(2,2,2)
                scene.add(gltf.scene);
                animate();
            });

            ;

        }
        function animate() {
            car.rotation.y += 0.01;
            renderer.render(scene, camera);
            requestAnimationFrame(animate);
        }
        init();
    </script>

    <script type="text/javascript">
        document.getElementById("multiGameButton").onclick = function () {
            location.href = "../index.html";
            console.log("MultiButton pressed");
        };
    </script>

I have tried setting the z-index property for both canvas or button but it didn't work.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum