I created a Babylon with meshes loaded in a X Django app template, now I need to rotate it by clicking buttons located a dash-board on a y Django app

Question

I'm using a Babylon in a Django project, created a app template that I have few meshes loaded and I did set buttons to rotate the meshes using addEventListener, it is working well when the UI buttons is located in the same HTML template where the canvas is loaded, APP X. My main goal is to have the UI buttons located in a template that will be a dash-board created on a different APP, APP Y on my Django project. When I place the UI buttons in the Y APP (dash-board template) I get the error:

Uncaught TypeError: 
Cannot read properties of undefined (reading '`trackUbosInFrame`')
    at new e (uniformBuffer.ts:256:36)
    at t.`createSceneUniformBuffer` (scene.ts:2405:26)
    at Ar.`createSceneUniformBuffer` (engine.multiview.ts:203:12)
    at `t._createUbo` (scene.ts:1933:41)
    at new t (scene.ts:1690:14)
    at `HTMLDocument`.<anonymous> (jackpot.js?v=:7:17).

My JS rotation setup located in my Django JS file inside X APP:

function createRotationLogic(mesh, axis, speed) {
    var rotationAxis;
    switch (axis) {
        case "X":
            rotationAxis = BABYLON.Axis.X;
            break;
        case "Y":
            rotationAxis = BABYLON.Axis.Y;
            break;
        case "Z":
            rotationAxis = BABYLON.Axis.Z;
            break;
        default:
            rotationAxis = BABYLON.Axis.Y;
    }

    return function () {
        scene.unregisterBeforeRender(mesh);
        scene.registerBeforeRender(function () {
            mesh.rotate(rotationAxis, speed, BABYLON.Space.LOCAL);
        });
        setTimeout(function () {
            scene.unregisterBeforeRender(mesh);
        }, 30000); // Stop after 30 seconds
    };
}

// Function to set up rotation for a specific sphere
function setupRotationForSphere(sphereIndex) {
    return function () {
        var speedInput = document.getElementById(`speedInput${sphereIndex}`);
        var axisDropdown = document.getElementById(`axisDropdown${sphereIndex}`);

        if (speedInput && axisDropdown) {
            var speed = parseFloat(speedInput.value) || 0.01;
            var selectedAxis = axisDropdown.value;
            var rotationMesh = loadedMeshes[sphereIndex];

            scene.unregisterBeforeRender(rotationMesh); // Unregister previous rotations
            scene.executeWhenReady(function () {
                scene.registerBeforeRender(createRotationLogic(rotationMesh, selectedAxis, speed));
            });
        } else {
            console.log("Speed input or axis dropdown null.")
        }
    };
}

// Usage for Sphere
var rotateButton1 = document.getElementById("rotateButton1");
if (rotateButton1) {
    rotateButton1.addEventListener("click", setupRotationForSphere(sphereIndex));
} else {
    console.log("Rotate button 1 is null.");

    // Button to start rotation for 30 seconds
    function createRotationButtonListener(meshIndex) {
        return function () {

            var speedInput = document.getElementById(`speedInput${meshIndex}`);
            var axisDropdown = document.getElementById(`axisDropdown${meshIndex}`);
            var speedButton = document.getElementById(`speedButton${meshIndex}`);
            if (speedInput && axisDropdown && speedButton) {
                speedButton.addEventListener("click", function () {
                    var speed = parseFloat(speedInput.value);
                    if (!isNaN(speed)) {
                        scene.unregisterBeforeRender(loadedMeshes[meshIndex]);
                        scene.registerBeforeRender(function () {
                            loadedMeshes[meshIndex].rotate(BABYLON.Axis.Y, speed, BABYLON.Space.LOCAL);
                        });
                    }
                });

                axisDropdown.addEventListener("change", function () {
                    var selectedAxis = axisDropdown.options[axisDropdown.selectedIndex].value;
                    scene.unregisterBeforeRender(loadedMeshes[meshIndex]);
                    scene.registerBeforeRender(function () {
                        loadedMeshes[meshIndex].rotate(BABYLON.Axis[selectedAxis], 0.01, BABYLON.Space.LOCAL);
                    });
                });
            } else {
                console.log("Speed input, axis dropdown, or speed button is null.");
            }
        };
    }


    // Usage for Sphere
    var rotateButton1Listener = createRotationButtonListener(sphereIndex);
    if (rotateButton1 && rotateButton1Listener) {
        rotateButton1.addEventListener("click", rotateButton1Listener);
    } else {
        console.log("Rotate button 1 or listener is null.");

My UI elements located inside dashboard template inside the APP Y:

<div id="rotateButton1">
    <button id="rotateButton1">Rotate for 30s</button>
    <label for="speedInput1">Rotation Speed:</label>
    <input type="number" id="speedInput1" step="0.1" value="0.1">
    <button id="speedButton1">Apply Speed</button>
    <label for="axisDropdown1">Rotation Axis:</label>
    <select id="axisDropdown1">
        <option value="X">X</option>
        <option value="Y" selected>Y</option>
        <option value="Z">Z</option>
    </select>
</div>

I've tried to change the js code to the Y APP where the UI elements are located.