React DnD useDrop no está utilizando el estado actual cuando se llama al método.

Estoy tratando de crear una aplicación de tareas pendientes con la funcionalidad de arrastrar y soltar elementos. Estoy utilizando React DND y hasta ahora todo funcionaba bien, pero cuando se agrega un nuevo elemento a la lista, me di cuenta de que la función llamada dentro del método “drop” en useDrop solo utiliza el estado desde cuando la página se carga por primera vez.

Ningún otro componente tiene este problema, y cuando probé un simple onClick para verificar el estado en el mismo componente, también se registraba el estado correcto. Los demás componentes (como un componente que inserta una nueva tarea) no tienen problemas en absoluto, esto solo ocurre en este componente que utiliza React DND. También he revisado las herramientas de desarrollo de React en Chrome y puedo confirmar que el estado se está actualizando correctamente.

La función que se llama dentro de “drop” se pasa desde dos componentes superiores, y el estado que estoy tratando de usar también se encuentra en ese componente.

Cualquier ayuda será apreciada. Gracias.

export const ToDo = ({
  status,
  todoText,
  todoID,
  deleteTodo,
  updateTodoStatus,
  resortList,
}: TodoProps) => {
  const [, drag] = useDrag(() => ({
    type: 'TODO_DRAG',
    item: { todoID, todoText },
  }));

  const [, drop] = useDrop(() => ({
    accept: 'TODO_DRAG',
    drop: (droppedTodo: dropAndDropItem) => {
      console.log('soltando');
      if (todoID === droppedTodo.todoID) return;
      resortList(todoID, droppedTodo.todoID);
    },
  }));

  return (
    <li ref="{drop}" onclick="{()" ==""> resortList(1, 2)}>
      <div ref="{drag}">
        <label htmlfor="Cambio de estado de la tarea">
          <input type="checkbox" checked="{status}" onchange="{()" ==""> updateTodoStatus(todoID)}
          />
        </label>
        <p>{todoText}</p>
        <button onclick="{()" ==""> deleteTodo(todoID)}>X</button>
      </div>
    </li>
  );
};