Issue with Drag and Drop Not Adding Tasks to Empty Containers in DnD Kit

I’m implementing a drag-and-drop feature in a project management board using dnd-kit. The functionality works well when tasks are dragged between containers that already have tasks. However, I’m encountering an issue when trying to drag a task into an empty container.

Currently, the drag-and-drop functionality does not seem to add the task to an empty container. Here’s my current onDragEndHandle function with helper comments:

  function onDragEndHandle(event: any) {
    const { active, over } = event;

    // Return if no change in position
    if (!over || active.id === over.id) return;

    const activeTask = tasks.find((i) => i.id === active.id);
    const overTask = tasks.find((i) => i.id === over.id);

    setTasks((tasks) => {
      // If the task is dragged to a different container
      if (
        activeTask &&
        overTask &&
        activeTask.category_task_id !== overTask.category_task_id
      ) {
        // Update the category_task_id for the task to reflect the new container
        activeTask.category_task_id = overTask.category_task_id;
      }

      // Find positions of active and over tasks
      const oldPos = tasks.findIndex((i) => i.id === active.id);
      const newPos = tasks.findIndex((i) => i.id === over.id);

      // Reorder tasks based on the new positions
      return arrayMove(tasks, oldPos, newPos);
    });
  }