No drag cursor on first render

[Pivigor]

Expected behavior

When you hover over the Draggable element, you see the drag cursor.

Actual behavior

When you hover over a Draggable element, you see a regular cursor. Drag cursor appears only after the first move/first touch of the element.

Steps to reproduce

I just used this example in a regular React app (not Next.js as in the example):
https://ui.mantine.dev/component/dnd-list/

Suggested solution?

I'm not really sure. Maybe this is a problem in my configuration. But I am not familiar with this library and this problem is not obvious to me.
What I found:

1. The cursor appears in html style with the attribute data-rfd-dynamic=":r1:"
2. When the page is rendered for the first time, the style data-rfd-always=":r1:" is present, but there is no data-rfd-dynamic=":r1:" and no drag cursor style
3. The style data-rfd-dynamic=":r1:" with drag cursor appears only when the first interaction with the Draggable element occurs
   It is not obvious to the end user that this element is interactive

What version of React are you using?

"react": "18.2.0"

What version of @hello-pangea/dnd are you running?

"@hello-pangea/dnd": "^16.3.0"

What browser are you using?

Google Chrome

Demo

https://codesandbox.io/s/vertical-list-forked-nlzdqq?file=/index.tsx

[CripyIce]

Having the same issue

[Leoplazavzla]

Any news on this? This bug is giving me a hard time at this very moment :-)

[albanlorillard]

Same after migrating from react-beautiful-dnd
As a temporary workaround, I forced the cursor: grab; on the CSS of my draggable element

[likerRr]

Still relevant. Cursor styles (cursor: grab) are not applying until the first interaction

[dfrazao]

Also happening on my end

[kmsimpel]

Same issue here

[eugenehui]

Same issue for me.