Reactive form working so weird with Angular DropnDrop CDK - Items getting duplicated

Question

I've a form where user can drag selected img and drop it in target location and submit the form to backend.

Source data is Array of Object(API),

Issue:

1. when drag one item and put it in drag location, the item gets multiplied / duplicated - (objects in array duplicated)
2. when dragged item moved back to its original position, again it gets duplicated (objects in array duplicated)
3. when when hit the submit form, its not only showing lot of duplicated items

Expectation:

drag and drop only selected items and submit the form.

ngOnInit() {
    this.initTestForm();
}

ngAfterViewInit() { }

initTestForm() {
    this.myTestForm = this.fb.group({
        //  myDivName: new FormControl(this.containerData),
        myDivName: new FormControl(this.containerData),
    });
}
drop(event: CdkDragDrop<Item[]>) {
    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
    );

    console.log(
        'transferArrayItem',
        event.container.data[event.currentIndex]
    );
    this.addItem(event.container.data[event.currentIndex]);
}
}

get myDivName() {
    return this.myTestForm.get('myDivName') as FormArray;
}
addItem(item: any) {
    this.basket.push(item);
    this.myDivName.push(this.fb.control(item));
}
removeItem() {
    this.basket.pop();
    this.myDivName.removeAt(this.myDivName.length - 1);
}
savedata() {
    console.log(this.myTestForm);
}

stackblitz - issue reproduced

Since my scenarios is bit different, i couldn't find any solutions from SO

Answer 1

Finally, I fixed my issue by myself, by doing little modification like below.

initialize formControlName like myDivName: this.fb.array([]),

 get myDivName() {
    return <FormArray>this.myTestForm.get('myDivName');
  }

inside drop() method assign and pass formValue

const formArry = this.myDivName;
formArry.insert(0,this.fb.control(event.container.data));

working demo

Note: I'm not sure how efficient the fix is, but will optimize it as much as can.

Thanks to all who atleast view my question