Prevent raycaster effect using html/css

Question

<script type="importmap">
{
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
<div id="main_div_for_module" style="position: absolute; z-index: 100;">
<script type="module" >
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );


    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera( 75, innerWidth / innerHeight, 0.1, 1000 );
    camera.position.z = 100;

 
    var matrix = new THREE.Matrix4();
    var position = new THREE.Vector3();
    var raycaster = new THREE.Raycaster();
    var pointer = new THREE.Vector2();
    var color = new THREE.Color();


    const geometry = new THREE.BoxGeometry( 20, 20, 20 ); 
    var material = new THREE.MeshBasicMaterial(  );  
    var mesh_for_boxes = new THREE.InstancedMesh(geometry, material, 2);
    var dummy = new THREE.Object3D();

    dummy.position.x = 0;
    dummy.position.y = 0;
    dummy.position.z = 0;
    dummy.updateMatrix();
    mesh_for_boxes.setMatrixAt(0, dummy.matrix);
    mesh_for_boxes.setColorAt(0, color.set(0xffffff));  // 0xffff00

    
    dummy.position.x = 30;
    dummy.position.y = 0;
    dummy.position.z = 0;
    dummy.updateMatrix();
    mesh_for_boxes.setMatrixAt(1, dummy.matrix);
    mesh_for_boxes.setColorAt(1, color.set(0xffffff));  // 0xffff00

     
    scene.add(mesh_for_boxes);


    const OnMouseClick = (event)  => {
        pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        raycaster.setFromCamera(pointer, camera);
        const intersects = raycaster.intersectObject(mesh_for_boxes);

            // affect only first intersected object:
        if(Object.keys(intersects).length > 0) {
            var obj = intersects[0];
            mesh_for_boxes.setColorAt(obj.instanceId, color.set(0xff0000));
            mesh_for_boxes.instanceColor.needsUpdate = true;
        }
    }
    window.addEventListener('click', OnMouseClick);


    function animate() {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );                    
    }
    animate();
</script>
</div>
<div id="upper_layer" style="width:100%; height: 100%; background: #090; opacity: 0.5; position: absolute; z-index: 200;">    
</div>

Here div element with id="upper_layer" covers entire <script type="module"> as z-index is higher, but raycaster still works for some reason, is there any way to prevent raycaster effect using covering entire canvas/scene with other html element?