Drag and drop not working as intended on mobile devices when mode="virtual"

[lukasagurkas]

Expected behavior

https://codesandbox.io/s/k260nyxq9v
Taken from https://github.com/hello-pangea/dnd/blob/main/docs/about/examples.md (Simple vertical list)

Actual behavior

The issue is that on a mobile device when mode="virtual" to drag a list item you have to hold the drag handle of the list item, then when an indicator appears showing that the list item is being dragged you have to let go of the list item and only then can you drag the item (works fine with a mouse or laptop touchpad).

Steps to reproduce

https://codesandbox.io/s/vertical-list-forked-3mlx3g?file=/index.js

• On a computer:

1. Go to the codesandbox link
2. Click on "Open In New Window"
3. Open ChromeDevTools
4. Click on "Toggle device toolbar"
5. Choose any mobile device
6. Try to drag

• On a mobile device:

1. Go to the codesandbox link
2. Try to drag

What version of React are you using?

16.13.0

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

16.6.0

What browser are you using?

Google Chrome Version 126.0.6478.63 (Official Build) (64-bit)

Demo

https://codesandbox.io/s/vertical-list-forked-3mlx3g?file=/index.js