How to customize a drag and drop image with React.js

Question

I am implementing a drag and drop effect in React.js. How do I use a custom React component or fragment (which doesn't necessarily exist yet in the DOM at the time the drag is initiated) as the drag image passed to setDragImage, rather than a static image of the dragged item?

For example:

onDragStart = (e, index) => {       
    this.draggedIndex = index;
    this.draggedItem = this.state.list[index];
    e.dataTransfer.effectAllowed = "move";
    e.dataTransfer.setData("text/html", e.target.parentNode);
    e.dataTransfer.setDragImage(??????);
};

The expected result is a custom preview component.

Answer 1

Was searching for the same thing until I finally stumbled upon the answer. Hope this helps someone (TSX):

private onDragStart(e: React.DragEvent) {
    let image: JSX.Element = (<></>); // <== whatever you want here

    var ghost = document.createElement('div');
    ghost.style.transform = "translate(-10000px, -10000px)";
    ghost.style.position = "absolute";
    document.body.appendChild(ghost);
    e.dataTransfer.setDragImage(ghost, 0, 0);

    ReactDOM.render(image, ghost); 
}

(This is a little over-simplified as you also need to remove the ghost from the DOM after a drop).