I have a ticket component which contains some data that should be transferred into another place at the database.

const [{ isDragging }, dragref] = useDrag(() => ({
        type: ItemType.TICKET,
        item: {
            // data that should be transferred
        },
        collect: (monitor) => ({
            isDragging: monitor.isDragging(),
        }),
    }));

unfortunately the drop handler in the target component doesnt fire when I drop the item on it.

const [{ isOver, canDrop }, dropref] = useDrop(() => ({
        accept: ItemType.TICKET,
        collect: (monitor) => ({
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop(),
        }),
        hover: (item, monitor) => {
             // works fine and prints the correct data
             console.log(item);
             console.log(monitor.canDrop()) // true
        },
        drop: (item) => console.log(item), // <---- doesn't work somehow
    }));

Want I absolutely don't understand is, why the hover listener in the useDrop Hook works absolutely fine, but the drop listener doesnt.

First I though that some other onDrop or onDragOver-Listener (from when I did not used react-dnd) might interrupt it but even after deleting every single onDragOver and onDrop Listener the listener doesnt fire.

Note: ofc I surrounded everything with the DndProvider and the HTML5Backend. On a whole other part of the app both hooks work just as expected. I am using react-dnd 16.0.0