How to retain the position of Angular CDK Dropped item?

I am trying to build an interface where i have an image and few icons on the bottom. I want those icons to be dropped onto the image (as a copy, which i am able to do) and the dropped icons on the image should stay at the position where it was dropped. Here is how my code look like:

HTML

<ion-content [fullscreen]="true">
  <!--THIS ROW CONTAINS MY IMAGE WHERE THE ICONS FROM THE BOTTOM ROW DROPS-->
  <ion-row>
    <ion-col>
        <div 
          cdkDropList
          #dropList="cdkDropList"
          [cdkDropListData]="selectedProducts" 
          [cdkDropListConnectedTo]="[dragList]" 
          (cdkDropListDropped)="drop($event)"
          style="background: url('/assets/house.jpeg'); height: 700px;">
          <div *ngFor="let item of selectedProducts;">
            <div cdkDrag [cdkDragDisabled]="true">
              <ion-icon style="font-size: 30px; color: red;" name={{item}}></ion-icon>
            </div>
          </div>
        </div>
    </ion-col>
  </ion-row>

  <!--THESE CONTAINS THE DRAGGABLE ICONS THAT DROPS TO ABOVE ROW WITH IMAGE-->
  <ion-row style="bottom: 0px; position: fixed; width: 100%;"
    cdkDropList 
    #dragList="cdkDropList"
    [cdkDropListData]="products" 
    [cdkDropListConnectedTo]="[dropList]" 
    (cdkDropListDropped)="drop($event)">
    <ion-col class="ion-text-center" *ngFor="let item of products" cdkDrag>
      <ion-icon style="font-size: 30px; color: red;" name={{item}}></ion-icon>
    </ion-col>
  </ion-row>
</ion-content>

TS

//THIS ARRAY WILL CONTAIN DATA OF ICONS THAT ARE DROPPED
selectedProducts = [];
//THIS ARRAY CONTAINS THE ACTUAL ICONS
products = ['accessibility','airplane','aperture']

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

    }
  }

What happens is, I am able to drop the icons to the image but the icons goes into the list mode and aligns itself on top left, instead of maintaining the position of where it was dropped. See the bottom image for reference.

Any idea how can i maintain the dropped position and show the icons at the places where they were actually dropped instead of showing them as a list on top left ????