Cannot use pannellum in react site, getting "viewer is not a function" error

Question

I want to use pannellum 2.5.6 inside react 18.2.0. Here is my code so far

import React, { useRef, useEffect } from 'react'; 
import * as pannellum from 'pannellum'
const pano = '../assets/pano.jpg';

function ViewPane() {
  const pannellumContainer = useRef(null);

  useEffect(() => {
    const viewer = pannellum.viewer(pannellumContainer.current, {
      type: 'equirectangular',
      panorama: pano
    });
    return () => {
      viewer.destroy();
    };
  }, []);

  return (
    <div
      ref={pannellumContainer}
      style={{ width: '100%', height: '500px' }}
    ></div>
  );
}

export default ViewPane;

I get caught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.viewer is not a function error

I have tried several alternatives, like const viewer = new pannellum.viewer(pannellumContainer.current, { and I get caught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.viewer is not a constructor error

I tried replacing viewer with Viewer, same errors reffering to Viewer

I tried importing like so import { Viewer } from 'pannellum' and then using it like so const viewer = Viewer(pannellumContainer.current, { I get the same caught TypeError: (0 , pannellum__WEBPACK_IMPORTED_MODULE_1__.Viewer) is not a function error

I also tried using useRef to set Viewer like so : import it import { Viewer } from 'pannellum', set useRef const v = useRef(null); and in the useEffect v.current = new Viewer(pannellumContainer.current, { and I get the caught TypeError: pannellum__WEBPACK_IMPORTED_MODULE_1__.Viewer is not a constructor error

How can I fix this?