Good time of day. I need help with surfaceFromPoint and update Hotspot.

[bigbea1r]

I need this code so that I can drag the Hotspot with the mouse over the entire model, and at the same time so that the hotspot is on the surface of the model. And for this, you need the data-surface attribute. I use it when creating a hotspot. but to drag, I need to update. At the moment, the code is able to update the hotspot, but as soon as I start dragging it, the hotspot disappears immediately, but the html code remains unchanged and the element itself remains in html. Please help me figure out what the problem is.
Here is a part of the code:
let allHotspot = document.querySelectorAll('.Hotspot');

    allHotspot.forEach(hotspot => {
      hotspot.addEventListener('mousedown', startDrag);
    });
    
    async function startDrag(event) {
      if (editMode && createButtonOn) {
        const currentSlot = event.target.getAttribute('slot');
        const hotspot = event.target;
        hotspot.style.zIndex = 1000;
        await modelViewer.updateComplete
        let newSurface = modelViewer.surfaceFromPoint(moveEvent.clientX, moveEvent.clientY);
        const updatedSurface = {
          name: currentSlot,
          position: `${newSurface}`
        };
        modelViewer.updateHotspot(updatedSurface);
    
        function onMouseUp() {
          document.removeEventListener('mousemove', onMouseMove);
          document.removeEventListener('mouseup', onMouseUp);
          createButtonOn = false;
        }
    
        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
      }
    }

Here is the code for creating and assigning a hotspot location:
modelViewer.onclick = (event) => {
if (editMode) {
const surface = modelViewer.surfaceFromPoint(event.clientX, event.clientY);

if (surface !== null && hotspotOn === false) {
  containerInput.style.display = 'block';
  enterButton.removeEventListener('click', handleEnterClick);
  
    function handleEnterClick() {
    const divName = divNameInput.value;
    const anim = animationNameInput.value
    const animName = modelViewer.availableAnimations
    const hotspot = document.createElement('button');
    const hotspotDiv = document.createElement('div');

    if (anim.trim() !== '' && animName.includes(anim) === true) {
      animNameCreate.push(anim);

      hotspot.setAttribute('class', 'Hotspot');
      hotspot.setAttribute('slot', `hotspot-${animNameCreate.length}`);
      hotspot.setAttribute('data-surface', surface);
      hotspot.setAttribute('data-visibility-attribute', 'visible');
      hotspotDiv.setAttribute('class', 'HotspotAnnotation');
      hotspotDiv.textContent = divNameInput.value;

      hotspot.appendChild(hotspotDiv);

      hotspot.addEventListener('click', async () => {
        if (!editMode) {
          playAnimation(anim, doorCondition ? -1 : 1);
          doorCondition = !doorCondition;
        }
      });
      modelViewer.appendChild(hotspot);

[elalish]

Please don't cross-post: #4845