I have created picklist and load the data to source and target array using a API.
Dragging from source to target is working fine, But when drag from target to source the selected data row will dissappear.

This is the existing code.

Type script

availableColumns$: Observable<any[]>;
columnControls = new FormArray([]);
selectedColumnOptions$: Observable<any[]>;

 this._subscription.add(
        this.paService.getToBeSubscribeAssociateApplicantList(this.applicantAccountId,pagingInputModel)
        .subscribe((list) => {  
          let selectedColumns: any[] = []; 
          let availableColumns: any[] = []; 
          list.map((x: any) => {
            availableColumns.push({
              Display: x.NameEmail,
              Value: x.CCApplicantAccount.ApplicantAccountId
            }); 
          })
  
          this.columnControls.patchValue(selectedColumns);
          this.availableColumns$ = of(availableColumns);
          this.selectedColumnOptions$ = of(selectedColumns);
          this.cdr.markForCheck(); 
        })
      )

HTML

 <pa-ui-picklist-generator
      [fields]="fields"
      [options]="(availableColumns$ | async) ?? []"
      [control]="columnControls" 
      [value]="(selectedColumnOptions$ | async) ?? []" 
      [availableLabel]="availableDistributionListLabel"
      (onMoveToTarget)="onMoveToTarget($event)"    
    >
    </pa-ui-picklist-generator>