Prime-ng multiselect label goes blank

I have two prime-ng multi-select which are dependent on one another.

<div class="input-field-class">
    <label class="custom-label">Phase of Development</label>
    <p-multiSelect defaultLabel="Select Phase" [options]="listPhase" optionLabel="label" [(ngModel)]="selectedPhases"
      (ngModelChange)="filterProfiles($event)"></p-multiSelect>
  </div>
  <div class="input-field-class">
    <label class="custom-label">Related activity</label>
    <p-multiSelect defaultLabel="Select Activity" [options]="activityList" optionLabel="label" [(ngModel)]="selectedActivities"
      (ngModelChange)="filterProfiles($event)"></p-multiSelect>
  </div>

---

Component Code is:

filterProfile() {
let selectedPhasesById = [];
let selectedActivitiesById = [];
let activitiesByPhases;

if (this.selectedPhases.length > 0) {
  selectedPhasesById = this.selectedPhases.map(c => c.id);
  activitiesByPhases = this.selectedPhases.map(item => {
    return this.listActivityByPhases[item.label].map(function(c) {
      return {label: c.name, value: c.name, id: c.id};
    });
 });
 
 activitiesByPhases = _.flattenDeep(activitiesByPhases);
 this.activityList = [...activitiesByPhases];
} else {
  this.activityList = [];
}
if (this.selectedActivities.length > 0) {
  selectedActivitiesById = this.selectedActivities.map(c => c.id);
}

return {selectedPhasesById, selectedActivitiesById};

}

Whenever I select two values in Phases dropdown, its corresponding values are displayed in Activities dropdown. User can select the value.
But, when I de-select one value in Phases dropdown, then the Activities dropdown label(Select Activity) is not displayed. But there are values in its drop-down.
Dont know what I am doing wrong here.