react-dndでドラッグ中のカーソルを変更する方法

CSSでカーソルをカスタムしているのに、ドラッグ中のカーソルがデフォルトに戻ってしまうことに気がつきました
react-dndの問題のようで、一応解決したので、メモします

使用しているパッケージのバージョン

{
    "react": "^18.2.0",
    "react-dnd": "^16.0.1",
    "react-dnd-touch-backend": "^16.0.1"
}

解決法

BackendをTouchBackendに変更し、isDraggingでドラッグ中の場合にcursorを書き換えるようにする

import { DndProvider } from 'react-dnd'
// import { HTML5Backend } from 'react-dnd-html5-backend'
import { TouchBackend } from 'react-dnd-touch-backend'

<DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
   //...
</DndProvider>

useEffect(() => {
  if (isDragging) document.body.style.cursor = 'grab !important';
  else document.body.style.cursor = 'normal';
}, [isDragging]);

https://github.com/react-dnd/react-dnd/issues/325
https://github.com/react-dnd/react-dnd/issues/2930

おまけ

TouchBackendはモバイル向けのためのものなので、かなり雑で邪道な感じがあるのであまりおすすめな方法ではないですが、今のところ支障はないのでこれで行こうと思います