ngx-drag-drop not compatible with primeng?

Question

I am trying to implement ngx-drag-drop but issue is I am using PrimeNG and sample is given using Angular Material list component is there any possible way I can modify code so that it gets compatible for PrimeNG list module here is my code:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <pre>Fruits</pre>

      <mat-list
        (dndDrop)="onDrop($event, fruits)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndDropzone
        dndEffectAllowed="move">
        <mat-list-item
          class="dndPlaceholder border rounded-1 bg-danger bg-gradient"
          dndPlaceholderRef>
        </mat-list-item>
        <mat-list-item
          *ngFor="let fruit of fruits; let i = index; trackBy: trackByFruit"
          [dndDraggable]="fruit"
          [dndType]="fruit.type"
          (dndMoved)="onDragged(i, fruit, fruits)"
          class="border rounded-1 bg-white"
          dndEffectAllowed="move">
          <span matListItemTitle>{{ fruit.type }} {{ fruit.id }}</span>
        </mat-list-item>
      </mat-list>
    </div>

    <div class="col">
      <pre>Apples</pre>
      <mat-list
        [dndDropzone]="['apple']"
        (dndDrop)="onDrop($event, apples)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <mat-list-item
          class="dndPlaceholder border rounded-1 bg-success bg-gradient"
          dndPlaceholderRef>
        </mat-list-item>
        <mat-list-item
          *ngFor="let apple of apples; let i = index; trackBy: trackByFruit"
          [dndDraggable]="apple"
          [dndType]="apple.type"
          (dndMoved)="onDragged(i, apple, apples)"
          class="border rounded-1 bg-white"
          dndEffectAllowed="move">
          <span matListItemTitle>{{ apple.type }} {{ apple.id }}</span>
        </mat-list-item>
      </mat-list>
    </div>

    <div class="col">
      <pre>Bananas</pre>
      <mat-list
        [dndDropzone]="['banana']"
        (dndDrop)="onDrop($event, bananas)"
        class="dndList gap-1 flex-grow-1 d-flex flex-column bg-light rounded-1 shadow-sm"
        dndEffectAllowed="move">
        <mat-list-item
          class="dndPlaceholder border rounded-1 bg-warning bg-gradient"
          dndPlaceholderRef>
        </mat-list-item>
        <mat-list-item
          *ngFor="let banana of bananas; let i = index; trackBy: trackByFruit"
          [dndDraggable]="banana"
          [dndType]="banana.type"
          (dndMoved)="onDragged(i, banana, bananas)"
          class="border rounded-1 bg-white"
          dndEffectAllowed="move">
          <span matListItemTitle>{{ banana.type }} {{ banana.id }}</span>
        </mat-list-item>
      </mat-list>
    </div>
  </div>
</div>

I guess there is no tag in PrimeNG like </mat-list-item> this one.

I tried to use p-listbox but was unable to bind options.