Combining Headless UI Dialog with Draggable gets laggy

[ClemensDinkel]

I've tried to combine the Dialog Component with the Draggable component from react-draggable.
Wrapping Draggable around Dialog works fine in terms of performance. However when moving the dialog this will also move my Dialog.Overlay leading to parts of the screen not being covered by it. To prevent this I tried to wrap the other way round.
However when I wrap like this

<Dialog>
  <Dialog.Overlay>
  <Draggable>
    <Content>
  </Draggable>
</Dialog>

dragging gets laggy. I turned on the profiler to check if there is a lot of rerending. For a simple move action the solution with Draggable wrapping the entire Dialog renderd 300-400 times which seemed okay, but the solution in which I wrap only the content in Draggable led to ~1600 rerenders which explains the lag.

Any idea why this is happening or how I could fix this?

[ClemensDinkel]

The problem was that I hadn't properly checked the css properties of the content being wrapped. It contained a transition with 150 delay. It makes sense this doesn't mix well with dragging.

[AnimeAllstar]

@ClemensDinkel How did you ensure that only the Dialog got dragged and not the backdrop as well?