Using loadDocumentNode in Forge viewer API only returning single element when array passed in

Hi I would really like to know why I can only display a single item when I try to load elements by specific dbIds. I am passing in an array like so [12345, 6789] and it will only display a single element. Ive checked that the external ids i pass in correctly return the objectIds and I have also ensured that the js is receiving the correct data structure for the dbId array. What is also strange and maybe related is the the element loads and is not fit to view.
Here my code:

async function loadAndInitializeForgeViewer(urn, accessToken, dbIds) {
    if (typeof Autodesk === 'undefined') {
        console.log("Autodesk namespace not found, loading Forge Viewer scripts...");

        try {
            // Load Forge Viewer CSS
            await new Promise((resolve, reject) => {
                var link = document.createElement('link');
                link.rel = 'stylesheet';
                link.href = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css';
                link.onload = resolve;
                link.onerror = reject;
                document.head.appendChild(link);
            });

            // Load Forge Viewer JS
            await new Promise((resolve, reject) => {
                var script = document.createElement('script');
                script.src = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });

            console.log("Forge Viewer scripts loaded successfully.");
        } catch (error) {
            console.error("Error loading Forge Viewer scripts:", error);
            return;
        }
    } else {
        console.log("Forge Viewer scripts already loaded.");
    }

    await initializeForgeViewer(urn, accessToken, dbIds);
}

let globalViewer = null;

async function initializeForgeViewer(encodedUrn, accessToken, dbIds) {
    let options = {
        env: 'AutodeskProduction',
        getAccessToken: (callback) => {
            callback(accessToken, 3600); // Access token expires in 3600 seconds (1 hour)
        }
    };

    Autodesk.Viewing.Initializer(options, async () => {
        let viewerDiv = document.getElementById('forgeViewerContainer');
        globalViewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);

        globalViewer.start();

        let documentId = 'urn:' + encodedUrn;
        Autodesk.Viewing.Document.load(documentId, async (doc) => {
            let viewables = doc.getRoot().getDefaultGeometry();

            if (!viewables) {
                console.error("No viewable geometry found in the document.");
                return;
            }

            // Define options to load specific elements by their dbIds
            const loadOptions = {
                ids: dbIds // Use the dynamic dbIds array to load all specified elements
            };
            console.log("Loading model with specified element IDs:", dbIds);

            try {
                await globalViewer.loadDocumentNode(doc, viewables, loadOptions);
                console.log("Model loaded with specified element IDs only.");

                if (dbIds && dbIds.length > 0) {
                        globalViewer.fitToView(dbIds);
                        console.log("Fitting view to the specified elements.");
                }
            } catch (error) {
                console.error("Error loading document node:", error);
            }
        }, (errorCode) => {
            console.error("Could not load document. Error code:", errorCode);
        });
    });
}