incorrect ref type in docs example for React 19 – suggest update

Is your feature request related to a problem? Please describe.

Yes. The current useDrag and useDrop usage examples in the official documentation cause a type error when used with React 19.

The following error is thrown: Type 'null' is not assignable to type 'void | (() => VoidOrUndefinedOnly)'.

This can confuse developers migrating to React 19.

Describe the solution you'd like

I suggest updating the examples in the official documentation to show how to work with the new React 19 ref typing rules.

Option 1

import { useRef, useEffect } from "react";
import { useDrag } from "react-dnd";

export function Card({ text }) {
  const [, drag] = useDrag(() => ({
    type: "CARD",
    item: { text },
  }));

  return <div ref={(node) => { drag(node) }}>{text}</div>;
}

Option 2 (by sternma in #3655 )

import { useCallback } from "react";
import { useDrag } from "react-dnd";

function useDragRef(drag: (element: HTMLDivElement) => void) {
  return useCallback((element: HTMLDivElement | null) => {
    if (element) {
      drag(element);
    }
  }, [drag]);
}

export function Card({ text }) {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: "CARD",
    item: { text },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  const ref = useDragRef(drag);

  return <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>{text}</div>;
}

I think useDragRef could be optionally provided by react-dnd for React 19 compatibility.

Describe alternatives you've considered

Modifying the internal typings of react-dnd to accommodate stricter React 19 typing — but this may introduce unintended side effects or compatibility issues for users on older versions of React.

Adding a dedicated "React 19 Migration Guide" — but for now, just updating the example seems like a low-effort and high-impact improvement.

Additional context

This exact issue was reported in #3655.