Изображение, определенное в одном из списков, не перемещается в другой список в angular

Question

У меня есть изображение, определенное в одном из раскрывающихся списков с использованием перетаскивания angular материала.

<div
  class="box1"
  cdkDropList
  #image="cdkDropList"
  [cdkDropListConnectedTo]="nextblock"
>
  <img id="blah" [src]="url" alt="your image" cdkDrag/>
</div>

Я определил другие списки раскрытия следующим образом и использовал свойство cdkDropListConnectedTo.

<div class="box2" 
     cdkDropList 
     #nextblock="cdkDropList" 
     [cdkDropListConnectedTo]="'image'"
     (cdkDropListEntered)="setColor()"
>
</div>

Моя проблема в том, что я не могу перетащить изображение в другой контейнер. Оно застревает в исходном контейнере. Как это исправить.