I am using react-dnd, on drop i want to dispatch an action with the updated local state value. I am updating the state on hover method provided by useDrop hooks. Problem: state is getting updated on hover but when drop method is called the value of the state is always the initial state. I have tried to replicate issue by taking example directly from react-dnd docs examples. Link to codesandbox with issue i am facing.

Dustbin.jsx

export const Dustbin = () => {
  const [test, setTest] = useState(false);
  const [{ canDrop, isOver }, drop] = useDrop(() => ({
    accept: ItemTypes.BOX,
    hover: () => {
      setTest(true);
    },
    drop: () => {
      console.log(test, "drop");
      return { name: "Dustbin" };
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    })
  }));
  const isActive = canDrop && isOver;
  let backgroundColor = "#222";
  if (isActive) {
    backgroundColor = "darkgreen";
  } else if (canDrop) {
    backgroundColor = "darkkhaki";
  }
  console.log(test, "render");
  return (
    <div ref={drop} role={"Dustbin"} style={{ ...style, backgroundColor }}>
      {isActive ? "Release to drop" : "Drag a box here"}
    </div>
  );
};

As you can see I have the state with the name test with the initial value as false and I am updating the state on hover method. It is getting updated but on drop method you can see the console.log for the test which is always false(its initial state).

Expected Result: on drop method, value for the test must be true.

Thank you for the help, much appreciated.