How to properly filter material table using angular using checkbox

I have a set of data in which is filtering by checkbox. However it only works one time. For example. I have 2 distinct company If I check company it filters and shows two rows and I uncheck it shows all rows which is good. But if I check it again it doesn’t filter. Seems like I have some sort of state management or data binding problem. Here is my apply filter method that shows me trying to use filter predicate and also trying to filter manually.

applyFilter(): void {
console.log('mockData************', this.mockData);
if (!this.mockData || this.mockData.length === 0) {
  console.error('No Data to Filter');
  return;
}

let filteredData = this.mockData; // Start with the full data

if (this.identifierFilterValue && this.identifierFilterValue.length > 0) {
  filteredData = this.filterByIdentityCheckbox(filteredData);
}

console.log('Filtered Data ', filteredData);
if (this.dataSource) {
  this.dataSource.data = filteredData;
  this.dataSource.paginator = this.paginator; // Assign paginator here
}
if (this.dataSource && this.dataSource.paginator) {
  this.dataSource.paginator.firstPage();
 }
}



filterByIdentityCheckbox(data: any[]): any[] {
console.log(
  '******Applying filter by identifierFilterValue:',
  this.identifierFilterValue
);

if (
  !this.identifierFilterValue ||
  this.identifierFilterValue.length === 0
) {
  console.log('No Identifier Filters are selected return full data');
  return [...data];
}

return data.filter((item) => {
  console.log('Checking item identifier:', item.identifier);

  if (this.identifierFilterValue.indexOf(item.identifier) !== -1) {
    console.log('Matched identifier:', item.identifier);
    return true;
  } else {
    console.log('Identifier not matched', item.identifier);
    return false;
  }
});
}

}

I have a parent component, filter component, and view table component.

Here is my stackblitz