Failure integrating gatsbyjs and panellum-react (VR) - what I am doing wrong?

Question

Having a component using panellum (JS library to display equirectanguler panoramas in web) -

import React, { useEffect } from 'react';
import Pannellum from 'react-pannellum';

const PannellumViewer = () => {
  useEffect(() => {
    // Load JSON data dynamically
    fetch('/data.json')
      .then(response => response.json())
      .then(data => {
        const config = {
          ...data['panorama.jpg'], // Replace with your image name
          autoLoad: true,
        };
        Pannellum.viewer('panorama-container', config);
      });
  }, []);

  return <div id="panorama-container" style={{ width: '100%', height: '500px' }} />;
};

export default PannellumViewer;

and a Page to display it -

import React from 'react';
import Layout from '../components/layout';
import PannellumViewer from '../components/PannellumViewer';

const PanoramaPage = () => (
  <Layout>
    <h1>Pannellum Viewer</h1>
    <PannellumViewer />
  </Layout>
);

export default PanoramaPage;

If you want take a looo into the which packages - here: https://github.com/telefante/gatsby-pannellum/tree/master

here the package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^5.12.4",
    "gatsby-plugin-image": "^3.12.0",
    "gatsby-plugin-manifest": "^5.12.0",
    "gatsby-plugin-sharp": "^5.12.0",
    "gatsby-source-filesystem": "^5.12.0",
    "gatsby-transformer-sharp": "^5.12.0",
    "pannellum": "^2.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-pannellum": "^0.1.15"
  },
  "devDependencies": {
    "prettier": "^2.8.8"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
    "start": "gatsby develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

I do not get anything play out -

I am expecting , when a call PanoramaPage in browser - that I get the panelleum Viewer - but still though the page it's generated - the content is not rendered. - nothing to see - when I call http://localhost:8000/panorama/ in borwser's console I get following :

Unhandled Promise Rejection: TypeError: react_pannellum__WEBPACK_IMPORTED_MODULE_1__["default"].viewer is not a function. (In 'react_pannellum__WEBPACK_IMPORTED_MODULE_1__["default"].viewer('panorama-container', config)', 'react_...
and 

[Error] TypeError: undefined is not an object (evaluating 'modulePath.replace')
    flushSyncCallbacks (react-dom.development.js:54)
    commitRootImpl (react-dom.development.js:26954)
    commitRoot (react-dom.development.js:26677)
    finishConcurrentRender (react-dom.development.js:25976)
    performConcurrentWorkOnRoot (react-dom.development.js:25804)
    performConcurrentWorkOnRoot
    workLoop (scheduler.development.js:266)
    flushWork (scheduler.development.js:239)
    performWorkUntilDeadline (scheduler.development.js:533)

Im Chrome

Error in function eval in ./src/components/PannellumViewer.js:14
react_pannellum__WEBPACK_IMPORTED_MODULE_1__.default.viewer is not a function

./src/components/PannellumViewer.js:14
Open in Editor
  12 |           autoLoad: true,
  13 |         };
> 14 |         Pannellum.viewer('panorama-container', config);
     |                  ^
  15 |       });
  16 |   }, []);
  17 |

I am quite a beginner with react and have some experience with gatsbyjs - so please be patient. Looking forward to any hint -