Blazor - It doesn't read my div in my part of the script

The goal is to get it to drag the elements that are inside the .zoom-container div, onto this page, to be able to modify the locations of each element once the button is clicked.

We have not yet moved on to the operation of the buttons, because we want to first fix the error that is occurring when the .zoom-container cannot be read in the section.

I'm trying to work on this for a week, and at the moment I can't make any progress, and my mind is exploded.

https://github.com/MarcomedSoltel/Problem/blob/main/SalonModify.razor

I have tried other alternatives, such as when selecting an element, it hides and is located in another, but I did not see it correct to be a map editor.

I also added the SetTimeOut in case the problem was that it was not read correctly when loading before, and nothing. I think the name is fine, and I have tried many debuggings, and my initial debugging is that the container cannot read it.

    window.initializeSortable = () => {        setTimeout(() => {            const container = document.querySelector('.zoom-container');            logMessage('Container:', container);            if (container) {                Sortable.create(container, {                    animation: 150,                    onStart: () => {                        DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', true)                            .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));                    },                    onEnd: (evt) => {                        const elementId = evt.item.id.replace('dibujo-', '');                        const newX = evt.item.offsetLeft;                        const newY = evt.item.offsetTop;                        logMessage(`Element ${elementId} moved to X: ${newX}, Y: ${newY}`);                        // Actualizar posición en Blazor                        DotNet.invokeMethodAsync('RMSuit_v2', 'UpdateElementPositionAsync', parseInt(elementId), newX, newY)                            .catch(error => logMessage(`Error al actualizar la posición: ${error}`));                        DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', false)                            .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));                    }                });            } else {                logMessage('Sortable: el contenedor no se encontró.');            }        }, 100);    };

My div:

<div class="map-container" @onclick="OnMapClick"><div class="zoom-container" style="transform: scale(1);">        @if (salonResponse.dibujos != null && salonResponse.dibujos.Any())        {...}

My css:

    .zoom-container {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        transform-origin: top left;        transition: transform 0.3s;    }