Trying to load multiple scenes gets "stuck" on "Loading" when trying to load multiple scenes

[ethansudman]

Related Stack Overflow question

My React code is as follows:

import React, { useEffect, useRef, useState } from "react";
import ReactPanellum from "react-pannellum"
import axios from "axios";

interface IViewer360 {
    requestIP: string
    initialParam: string
    initialLat: number
    initialLong: number
    show: boolean
    setShow: React.Dispatch<React.SetStateAction<boolean>>
}

const Viewer360: React.FC<IViewer360> = ({ requestIP, initialLat, initialLong, initialParam, show, setShow }) => {
    const config = useRef({})
    const [sceneId, setSceneId] = useState('firstScene')
    const [imageSource, setImageSource] = useState('')

    useEffect(() => {
        let formData = new FormData()
        formData.append('param', initialParam)
        formData.append('lat', initialLat.toString())
        formData.append('lon', initialLong.toString())

        // Gets the configuration from the back-end
        axios.post(requestIP + 'load360ImgPath', formData).then(response => {
            config.current = response.data
            setSceneId(response.data['default']['firstScene'])
        })
    })

    function hotspot(hotSpotDiv, args) {
        if (args.includes("http")) {
            window.open(args, '_blank')?.focus();
        }
        else {

            setImageSource(args)
        }
    }

    return (
        <div id="overlay" style={{ display: show ? 'block' : 'none' }}>
            <button type="button" id="exitOverlay" className="overlayButton" onClick={e => setShow(false)}></button>

            <ReactPanellum config={config.current} id='test' sceneId={sceneId} />

            <div id="Modal" className="modal">
                <div className="modal-content">
                    <img id="detail-image" src={imageSource} />
                    <span className="close">&times;</span>
                </div>
            </div>
        </div>
    )
}

export default Viewer360;

The JSON the API returns is as follows:

{
    "default": {
        "firstScene": "15",
        "author": "Some Author",
        "sceneFadeDuration": 1000,
        "autoLoad": true,
        "showFullscreenCtrl": false,
        "showControls": false
    },
    "scenes": {
        "48.79989590306356,9.871462886852521": {
            "title": "1",
            "hfov": 110,
            "pitch": -5,
            "yaw": 170,
            "type": "equirectangular",
            "panorama": "C:\\MyFolder\\1.JPG",
            "hotSpots": [
                {
                    "pitch": 0,
                    "yaw": -15,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "6",
                    "targetYaw": 180,
                    "targetPitch": "same"
                },
                {
                    "pitch": -5,
                    "yaw": 195,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "5",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -5,
                    "yaw": 155,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "4",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -15,
                    "yaw": 155,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "3",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -25,
                    "yaw": 190,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "2",
                    "targetYaw": "same",
                    "targetPitch": "same"
                }
            ]
        },
        "2": {
            "title": "2",
            "hfov": 110,
            "pitch": 0,
            "yaw": 0,
            "type": "equirectangular",
            "panorama": "C:\\MyFolder\\2.JPG",
            "hotSpots": [
                {
                    "pitch": 0,
                    "yaw": 10,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "48.79989590306356,9.871462886852521",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -5,
                    "yaw": 150,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "3",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -5,
                    "yaw": 160,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "4",
                    "targetYaw": "same",
                    "targetPitch": "same"
                },
                {
                    "pitch": -5,
                    "yaw": 220,
                    "type": "scene",
                    "text": "Next",
                    "sceneId": "5",
                    "targetYaw": "same",
                    "targetPitch": "same"
                }
            ]
        }
    }
}

The plugin appears. However, when I click "Load", it gets stuck on "Loading..." indefinitely.

The exact same JSON works just fine when I use it for "regular" Pannellum.

There is no error in the console indicating what the problem is, so I'm not even sure how to go about debugging this.

Also, can the documentation be updated to show how to configure multiple scenes? The example on GitHub is very basic.