Expose dragged items on renderDropIndicator function in useDragAndDrop

[vezaynk]

Provide a general summary of the feature here

I'd like to provide an experience similar to this:

Screen.Recording.2025-06-18.at.11.26.02.mov

My first blocker, is that I need to render a preview of the currently-dragged item in the position where it would be dropped.

I'd like to be able to write code like this:

const { dragAndDropHooks } = useDragAndDrop({
   renderDropIndicator(target, keys) {
     const previewItemKey = keys[0]
     const previewItem = items.find(item => item.key === previewItemKey)
     return <Item item={previewItem} />
   }
})

Currently, only ItemDropTarget is exposed in the callback which doesn't carry information of what is being dragged:

export interface ItemDropTarget {
  /** The drop target type. */
  type: 'item',
  /** The item key. */
  key: Key,
  /** The drop position relative to the item. */
  dropPosition: DropPosition
}

🤔 Expected Behavior?

See video above. I'd like to render a preview of the currently dragged element via renderDropIndicator.

😯 Current Behavior

I can't render a preview of the currently dragged element via renderDropIndicator.

💁 Possible Solution

1. Provide original drag event like in onReorder
2. Pass keys directly to renderDropIndicator as a second argument

🔦 Context

I'd like to build something like this: https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-vertical--basic-setup

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response