¿Cómo hacer que una lista de selección sea editable en el componente objetivo en Angular?

Estoy usando p-picklist y quiero editar los datos del span de la lista de destino utilizada para mostrar el valor.

Estoy usando el código fuente: https://primefaces.org/primeng/showcase/#/picklist

¿Cómo puedo hacer que el nombre del producto sea editable en la lista de destino?

&p-pickList
  [source]="sourceProducts"
  [target]="targetProducts"
  sourceHeader="Disponibles"
  targetHeader="Seleccionados"
  [dragdrop]="true"
  [responsive]="true"
  [sourceStyle]="{'height':'30rem'}"
  [targetStyle]="{'height':'30rem'}"
  filterBy="name"
  sourceFilterPlaceholder="Buscar por nombre"
  targetFilterPlaceholder="Buscar por nombre"
>
  <ng-template let-product="" ptemplate="item">
    <div class="product-item">
      <div class="image-container">
        <img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.name" class="product-image">
      </div>
      <div class="product-list-detail">
        <h5 class="p-mb-2">{{product.name}}</h5>
        <i class="pi pi-tag product-category-icon"></i>
        <span class="product-category">{{product.category}}</span>
      </div>
      <div class="product-list-action">
        <h6 class="p-mb-2">\${{product.price}}</h6>
        <span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span>
      </div>
    </div>
  </ng-template>