I want to get the image that browser generates when we drag an element. Here is the simple example why I want to do this.

In the above image the two videos placed inside the black div like picture-in-picture. The black div is able to drag & drop. When I drag the black div the browser generates the draggable translucent image like in above picture.

In code implementation I am using dataTransfer setData & getData method to access dragged image. When I drop image and use dataTransfer.getData gives the dragged div ID and having only black background. I need the actual dragged image to store in state in the form of URL to use in application. How can I do this without using any external libraries?

I know the HTML2Canvas library generates screenshots like browser do. But is there any way to use/store browsers dragged image?

Thank you!

Edit: Here is the sample demo of what i want: https://codepen.io/AkshayPatil_/pen/oNoPNQE