react-dnd: Dragging Over An Element Without Triggering Hover State

This is an answer to a react-dnd v17 bug.

It's still a bug even though it's marked as closed in Github.

I tried the suggestions display in the issue thread, but The only thing that helped me is this:

Instead of using monitor.isDragging() to set the isDragging state use !!monitor.getItem(), like so:

const [{ opacity, isDragging }, drag] = useDrag({
    type: itemType,
    item: () => originalItem,
    canDrag,
    collect: (monitor: DragSourceMonitor) => ({
      opacity: monitor.isDragging() ? 0 : 1,
      isDragging: !!monitor.getItem()
    })
  });

That way the isDragging state will be false whenever no dragging is occurring and true when an item is dragged.

and the hover styles will be applied only when isDragging is false:

 <Box
      ref={ref}
      sx={{
        opacity,
        ...(!isDragging && {
            '&:hover': {
              borderRadius: '4px',
              border: `1px solid blue`
            }
          })
      }}
      data-handler-id={handlerId}
    >
....
</Box>

Click here for the StackOverflow answer