I am facing an issue (no output) implementing raycaster in three js here is the code:

Question

I created the sphere with a material using three.js, and I tried to make it clickable (via raycasting) but it does not work.

Camera, scene and lights and imported GLFT are there working properly but this part of code has some issues which is mentioned in the code sectioned with comment tag.

As I am trying created 3D clickable hotspot there on imported GLFT module to display some information or trigger animation.

Some comment required the demand of full code here it is:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { DRACOLoader } from 'three/examples/jsm/Addons.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { modelScale } from 'three/examples/jsm/nodes/Nodes.js';
const canvas = document.querySelector('canvas.webgl');
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    powerPreference: "high-performance",
    antialias: true,
    depth: true,
});
 renderer.setSize(1920,1080);
 document.body.appendChild(renderer.domElement); 
 //Scene
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0xFFFFFF); // Set background to blue
 scene.backgroundIntensity=100;
 //loader 3D object
const loader = new GLTFLoader();

loader.load('/assets/models/Final.glb', function (gltf) {
    scale etc than add it the secne
    gltf.scene.scale.set(100,100,100);
    const model = gltf.scene;                   
    scene.add(model);   
    model.name = 'quadrow';                     
    
},
// called while loading is progressing
function ( xhr ) {

    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

}, function (error){
    console.log('An error happened:',error);
});

// Camera
 const camera = new THREE.PerspectiveCamera(36, 1920/1080,1.1,2000);
 camera.position.set( 0,90,300 );
camera.lookAt( 0, 1, 0 );

//Lights
const ambient_light = new THREE.AmbientLight('#FFF', 2)
ambient_light.position.set(10,0,10);
//ambient_light.scale(30,30,30);
scene.add(ambient_light);

const light1 = new THREE.DirectionalLight('#FFF', 2);
light1.position.set(-125,90,220);
light1.lookAt( 0, 1, 0 );
const light2 = new THREE.DirectionalLight('#FFF', 2);
light2.position.set(125,90,220);
light2.lookAt( 0, 1, 0 );
const light3 = new THREE.DirectionalLight('#FFF', 2);
light3.position.set(0,90,-220);
light3.lookAt( 0, 1, 0 );
scene.add(light1);
scene.add(light2);
scene.add(light3);

//------------------------------From here issue arises------------------
const hotspot = new THREE.SphereGeometry(2,32,32);
const mat = new THREE.MeshBasicMaterial({color:0x00ff00});
const mesh = new THREE.Mesh(hotspot, mat);
mesh.position.set(-85,-10,0);
mesh.name= 'hotspot';
scene.add(mesh);
const raycaster = new THREE.Raycaster();
document.addEventListener('mousedown',onMousedown);
function onMousedown(event)
{
    const pointer = new THREE.Vector2(
        (event.clientX/renderer.domElement.clientWidth)*2-1,
        -((event.clientY/renderer.domElement.clientHeight)*2-1),
    );
    raycaster.setFromCamera(pointer,camera);
    const intersections = raycaster.intersectObject(mesh, true);
    if(intersections.length>0)
    {
        const selectedObject = intersections[0].object;
        const color = new THREE.Color(Math.random(), Math.random(), Math.random());
        selectedObject.material.color = color;
        console.log("object was clicked");
    }
}
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();
//for intractive control
const controls = new OrbitControls(camera, renderer.domElement);

I tried many things from youtube but none worked. It is not showing an error, but it is also not working.