Custom Drag Overlays and Multi-Container DnD

DragOverlay renders its content as a React portal, appending it directly to document.body rather than inside the DndContext DOM tree. This means it is never clipped by overflow:hidden or overflow:scroll containers, and it always appears on top of all other elements without requiring manual z-index management.

Because DragOverlay is separate from the original element, it can have visual styles that would break layout if applied to the original. You can add a drop-shadow, a scale transform (make it slightly larger than the original), or a rotation effect. These visual cues communicate to the user that the item is "lifted" and in motion.