Angular Material Drag and Drop: перетаскивание элемента работает, но не отбрасывается

В своем проекте я использую функцию перетаскивания Angular Material. Хотя перетаскивание работает нормально, у меня возникают проблемы с удалением элементов. Предметы можно перетаскивать, но когда я пытаюсь бросить их в зону перетаскивания, предметы перемещаются в предыдущую зону, а не в целевую зону.

Что я делаю не так?

Полный пример: Демо @ StackBlitz

Вот упрощенная версия моего кода:

задача-статус-list.comComponent.html

<div cdkDropListGroup class = "task-status-list-container">
  @for (taskStatus of Object.values(TASK_STATUSES); track taskStatus.key) {
  <app-task-status [taskStatus] = "taskStatus"></app-task-status>
  }
</div>

задача-статус.компонент.html

<div class = "task-status-container">
  <div class = "title-container">
    <div class = "title">{{ taskStatus.value }}</div>
  </div>

  <div
    cdkDropList
    [cdkDropListData] = "assignTasksByStatus(taskStatus.key)"
    (cdkDropListDropped) = "drop($event)"
    class = "task-status-container-body"
  >
    @for (task of assignTasksByStatus(taskStatus.key);track task.id) {
    <app-task cdkDrag [task] = "task"></app-task>
    }
  </div>
</div>

задача-статус.компонент.ts

export class TaskStatusComponent {
  protected readonly TASK_STATUSES = TASK_STATUSES;
  @Input() taskStatus!: TaskStatus;
  tasksSubscription!: Subscription;
  tasks: Task[] = [
    { id: 1, title: 'Task 1', status: TASK_STATUSES['TO_DO'] },
    { id: 2, title: 'Task 2', status: TASK_STATUSES['TO_DO'] },
    { id: 3, title: 'Task 3', status: TASK_STATUSES['DONE'] },
  ];

  drop(event: CdkDragDrop<Task[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      transferArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }
  }

  public assignTasksByStatus(status: string): Task[] {
    return this.tasks.filter((task) => task.status.key === status);
  }
}

задача.компонент.html

<div class = "title">{{ task.title }}</div>

Task.comComponent.ts

export class TaskComponent {
  @Input() task!: Task;
}