Panolens in react website , sensor control does not work in mobile phone

[spimou]

I load panolens 0.12.1 in my react 18.2.0 website using the code below

import React, { useEffect, useRef } from 'react'; 
import { ImagePanorama, Viewer, CONTROLS, Infospot } from 'panolens';    
import pano from "../assets/pano.jpg"; 

function ViewPano() {
  const containerRef = useRef(null);
  const panorama = useRef(null) 
  const viewer = useRef(null)
  const infospot = useRef(null)         
  const controls = useRef(null)         

  useEffect(() => {
    
    if (panorama.current || viewer.current) {
      return
    }

    controls.current = CONTROLS;

    panorama.current = new ImagePanorama(pano);  

    infospot.current = new Infospot(350);
    infospot.current.position.set( 1000, -1000, -2000 );
    infospot.current.addHoverText( 'Simple Info Text' );   
    panorama.current.add(infospot.current)

    viewer.current = new Viewer({ container: containerRef.current });      
    viewer.current.add( panorama.current, panorama2.current ); 
    viewer.current.enableControl(controls.current.DEVICEORIENTATION);   
    viewer.current.enableControl(1);   


  }, []);
 
  return (
    <div >
      <div ref={containerRef} id='panoCont' style={{width:'95vw', height:'calc(97vh - 20px)', margin:'0 auto'}} ></div>     
      
    </div>  
  )
   
}

export default ViewPano;

This works fine and Control is set to Sensor as soon as the panorama loads.

The issue is that I cannot look around the panorama using my phone's sensors. When I move my device around (Android phone) the panorama doesnt respond. I create a website using react, I visit it using chrome

How can I fix this?

I see no errors in my console