react-pannellum load multi images using hotSpot (tour)

Question

I'm trying to implement a virtual tour using the new react-pannellum, but I have failed to do so. There is documentation, but it isn't clear for me.

Documentation - https://github.com/hoaiduyit/react-pannellum

I need to implement it like on https://pannellum.org/ for this example in React.

In PanoramaConfig, I pass my configuration to the component the same way that I pass it to the JavaScript library, but when run, it only loads the first 360 images.

This is my implementation:

import React, { useState } from 'react';
 import ReactPannellum, { getConfig } from "react-pannellum";

const NewView = () => {
  const panoramaConfig = {
    autoLoad: true,
    default: {
      firstScene: 'firstScene',
      author: 'Matthew Petroff',
      sceneFadeDuration: 1000,
      autoLoad: true,

    },

    scenes: {
      library: {
        title: 'George Peabody Library',
        hfov: 100,
        pitch: 10,
        yaw: 50,
        compass: true,
        northOffset: 289,
        type: 'multires',
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/library',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 6,
          cubeResolution: 8432,
        },
        hotSpots: [
          {
            sceneId:'library',
            pitch: 60,
            yaw: 60,
            type: 'link',
            text: 'The skylight is supported by an iron truss and has a second, peaked skylight over it.',
          },
          // ... other hot spots
        ],
      },
      gallery: {
        title: 'Gallery',
        hfov: 100,
        yaw: -20,
        type: 'multires',
        compass: true,
        northOffset: 240,
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/gallery',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 5,
          cubeResolution: 4384,
        },
        hotSpots: [
          {
            pitch: -7,
            yaw: -58,
            type: 'scene',
            text: 'Library',
            sceneId: 'library',
            targetYaw: 240,
          },
          // ... other hot spots
        ],
      },
      '6th-floor': {
        title: '6th Floor',
        hfov: 100,
        pitch: -20,
        yaw: -20,
        compass: true,
        northOffset: 0,
        type: 'multires',
        multiRes: {
          basePath: 'https://pannellum.org/images/multires/6th-floor',
          path: '/%l/%s%y_%x',
          fallbackPath: '/fallback/%s',
          extension: 'jpg',
          tileResolution: 512,
          maxLevel: 4,
          cubeResolution: 3968,
        },
        hotSpots: [
          {
            pitch: -47.5,
            yaw: -11,
            type: 'scene',
            text: 'Main Floor',
            sceneId: 'library',
          },
          // ... other hot spots
        ],
      },
    },
  };

  return (
    <div>

      <div>
      <ReactPannellum
        id="1"
        width="100%"
        height="500px"
        sceneId="firstScene"
        imageSource="https://pannellum.org/images/alma.jpg" // Set a default image source
        config={panoramaConfig}
      />
    </div>
    </div>

  );
};

export default NewView;