not able to transfer items to another list using cdk-drag

Question

i'm trying to implement a table in which user can customize which columns are to be displayed and some columns should be fixed. i'm using cdk-drag drop to display two lists for selected and unselected columns. i'm able to drag and the names in their respective lists but not able to transfer the items between the two lists.

Here are my HTML and TS file. Any help is Appreciated.

<button mat-raised-button color="primary" (click)="showHide()"> customize </button>
<div class="example-container" *ngIf="showhide">
    <h2>selectedColumns</h2>

    <div cdkDropList #selectedList="cdkDropList" [cdkDropListData]="selectedColumns" [cdkDropListConnectedTo]="unselectedColumns"
        (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of selectedColumns" cdkDrag>{{ item }}</div>
    </div>

    <h2> unselectedColumns </h2>
    <div cdkDropList #unselectedList="cdkDropList" [cdkDropListData]="unselectedColumns" [cdkDropListConnectedTo]="selectedColumns"
        (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of unselectedColumns" cdkDrag>{{ item }}</div>
    </div>
</div>

import {Component} from '@angular/core';
import { OnInit } from '@angular/core';
import {
  CdkDragDrop,
  moveItemInArray,
  transferArrayItem,
  CdkDrag,
  CdkDropList,
} from '@angular/cdk/drag-drop';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { sequenceEqual } from 'rxjs';

@Component({
  selector: 'app-inventory',
  templateUrl: './inventory.component.html',
  styleUrls: ['./inventory.component.scss']
})
export class InventoryComponent implements OnInit {

  constructor(){ 
    
   }

  showhide: boolean = false;

  selectedColumns: string[] = [];
  unselectedColumns: string[] = [];
  fixedColumns: string[] = ['ip', 'system_name', 'system_type', 'status', 'action'];
  displayedColumns: string[] = ['serialnumber', 'ip', 'system_name', 'system_type', 'software_versions', 'status', 'action']

  drop(event: CdkDragDrop<string[]>) {
    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,
      );
    }
  }

  updateColumns(){
    sessionStorage.setItem('inventoryColumns', JSON.stringify(this.selectedColumns));
  }

  showHide(){
    this.showhide = !this.showhide;
  }

  ngOnInit(): void {

    if(sessionStorage.getItem('inventoryColumns')){
      sessionStorage.setItem('inventoryColumns', JSON.stringify([]));
      this.selectedColumns = this.fixedColumns;
      this.unselectedColumns = this.displayedColumns.filter(item => !(this.selectedColumns.includes(item)))
      console.log(this.selectedColumns);
    }
    else{
      const temp = sessionStorage.getItem('inventoryColumns');
      if(temp){
        this.selectedColumns = temp.split(',');
        this.unselectedColumns = this.displayedColumns.filter(item => !(this.selectedColumns.includes(item)))
      }
    }
      
  }
}

Found the problem.. the CDK droplists were not being connected with each other. had to replace the modify the html like this

<div cdkDropListGroup>
    <h2>selectedColumns</h2>

    <div cdkDropList #selectedList="cdkDropList" [cdkDropListData]="selectedColumns" [cdkDropListConnectedTo]="unselectedColumns"
        (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of selectedColumns" cdkDrag>{{ item }}</div>
    </div>

    <h2> unselectedColumns </h2>
    <div cdkDropList #unselectedList="cdkDropList" [cdkDropListData]="unselectedColumns" [cdkDropListConnectedTo]="selectedColumns"
        (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of unselectedColumns" cdkDrag>{{ item }}</div>
    </div>
    </div>