Quiero obtener la imagen que genera el navegador cuando arrastramos un elemento. Aquí está el ejemplo simple por qué quiero hacer esto.

En la imagen de arriba, los dos videos colocados dentro del div negro como imagen en imagen. El div negro puede arrastrar y soltar. Cuando arrastro el div negro, el navegador genera la imagen translúcida arrastrable como en la imagen de arriba.

En la implementación del código, estoy usando dataTransfer setData & getData para acceder a la imagen arrastrada. Cuando suelto la imagen y uso dataTransfer.getData , aparece el ID de div arrastrado y solo tiene un fondo negro. Necesito la imagen arrastrada real para almacenar en state en forma de URL para usar en la aplicación. ¿Cómo puedo hacer esto sin usar bibliotecas externas?

Sé que la biblioteca HTML2Canvas genera capturas de pantalla como lo hace el navegador. Pero, ¿hay alguna forma de usar/almacenar la imagen arrastrada de los navegadores?

¡Gracias!

Editar : aquí está la demostración de muestra de lo que quiero: https://codepen.io/AkshayPatil_/pen/oNoPNQE