AFRAME - Finding issues adding links, event listener to any object

Question

I am trying to add link to my objects, i have tried entity,box,image nothing works :(

Here is my code:

<a-scene cursor="rayOrigin: mouse; fuse: false" raycaster="objects: .raycastable">

         
          <a-sky id="baseEnv" src="Base_View1_360.jpg" 
          animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
          animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade">
          </a-sky>

          

          <a-image id="hotspot" src="hotspot.png" width="500" height="500" position="-3221 0 -3068" rotation="" scale="" visible="" material="" geometry="" cursor-listener
          animation__scale="property: scale; to: 1.2 1.2 1.2; dur: 200; startEvents: mouseenter"
          animation__scale_reverse="property: scale; to: 1 1 1; dur: 200; startEvents: mouseleave"
          >
          <a-link href="https://google.com"></a-link>
          </a-image>

          <a-sky id="dynamicFloor" src="Floor03.png" material="transparent:true"></a-sky>
          <a-sky id="dynamicTop" src="Top04.png" material="transparent:true"></a-sky>

          

        </a-scene>

        AFRAME.registerComponent('cursor-listener', {
            init: function () {
                var el = this.el;
                
                // Define a click listener function
                this.clickListener = this.clickListener.bind(this);
                
                // Add the click listener to the hotspot element
                el.addEventListener('click', this.clickListener);
            },
            clickListener: function () {
                // Change the sky image when the hotspot is clicked
                var sky = document.querySelector('#baseEnv');
                sky.setAttribute('src', 'Base_View2_360.jpg');
            }
        });

I tried using aframe components, vanilla js to add events to cursor-listener or id, link just does not work..

I want to be able to either change my sky background or link it to another html page