Cypress – El arrastrar y soltar no funciona en un sitio web basado en React.

Estoy teniendo problemas con Cypress para realizar acciones de arrastrar y soltar en un sitio web basado en React. Las acciones no fallan en el panel de control de Cypress, pero los elementos simplemente no se arrastran.

Lo que tengo es un conjunto de divs que son una lista de páginas que están “En Menú” (por lo que son visibles para los usuarios), y otro conjunto de divs que son “No en Menú” (por lo que no son visibles para los usuarios). Lo que quiero hacer es mover las páginas “No en Menú” a la sección “En Menú”.

Estos son los elementos en el sitio web:

El elemento “arrastrable”:

El área “soltable”:

Mi código:

public dragAndDropPagesToInMenu(): void {

    const dataTransfer = new DataTransfer();
    cy.wait(3000);
    cy.log("Arrastrando una página a la sección `En Menú`");
    cy.get("div[class='page3']")
        .first()
        .trigger('dragstart', { dataTransfer });
    cy.get("div[data-testid='pages-section-in-menu-list']")
        .eq(0)
        .trigger('drop', { dataTransfer });
    cy.get("div[class='page3']")
        .last()
        .trigger('dragend');

}

También he probado las siguientes soluciones, pero ninguna de ellas ha funcionado hasta ahora:
* https://stackoverflow.com/questions/55361499/how-to-implement-drag-and-drop-in-cypress-test
* https://applitools.com/event/drag-and-drop-in-cypress/
* https://docs.cypress.io/api/commands/trigger#Arguments

¿Alguna idea?