React Pannellum gets "stuck" on "Loading..." forever

Question

I have a related GitHub issue here.

I'm using the pannellum-react NPM package (not to be confused with react-pannellum, which hasn't been updated in 5 years at this point) to use Pannellum in my React app.

I store the configuration in JSON files, which I retrieve from an API endpoint. Here's a shortened example:

{
    "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"
                }
            ]
        }
    }
}

Here's what I do in "regular" Pannellum, which works fine:

function load360View(param,lat,lon){
    $("#overlay").css("display","block");
    // Does an AJAX call to the same API endpoint
    $.when(load360ImgPath(param,lon,lat)).done(function(e){
        //load here
        try {
            //parse 'hotspot' to hotspot func
            for (const i in e['scenes']){
                for(const n in e['scenes'][i]['hotSpots']){
                    e['scenes'][i]['hotSpots'][n]['clickHandlerFunc'] = hotspot
                }
            }
        } catch (error) {
            console.log(error)
        }
        viewer = pannellum.viewer('panorama',e)
    })    
}

Here's what I do in React:

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;

When I do this in React, the Pannellum plugin is opened as expected:

However, when I click on "Click to Load Panorama", it just gets stuck on "Loading..." forever:

There's no error message in the console (or anywhere else), nor is there any clear way to find out more details about where this is going wrong, so I'm not even sure how to debug this.

Can someone point out my mistake? Also, does anyone know if there's some way I can have Pannellum output detailed logs or something so that issues like this are easier to debug?