Drag and drop does not work when using a Custom Drag Layer and the underlying drag item is hidden

Describe the bug Drag and drop does not work when using a Custom Drag Layer and the underlying drag item is hidden (either by adding CSS display: none or by returning null for the component)

Reproduction

1. Go to Custom Drag Layer example: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/02-drag-around/custom-drag-layer
2. In DraggableBox.jsx comment out lines 14 and 15 opacity: isDragging ? 0 : 1, and height: isDragging ? 0 : '',
3. Insert on line 16: display: isDragging ? "none" : "block",
4. Try dragging the item and it doesn't work.

Alternatively, in DraggableBox.jsx replace line 29: return ( with return isDragging ? null : ( and again drag and drop doesn't work.

Additional context This only seems to be a problem when using a custom drag layer. When using the default preview image, both display: none or returning null to remove the component when isDragging work fine.

You can test this out here: https://codesandbox.io/s/github/react-dnd/react-dnd/tree/gh-pages/examples_hooks_js/04-sortable/simple

in Card.jsx replace line 62 with return isDragging ? null : (

or add const display = isDragging ? "none" : "block" and make line 63: <div ref={ref} style={{ ...style, display }}>

In either case, the underlying item is hidden and drag and drop works fine as expected.