Query values from firestore and connect it to a Mat Table as a datasource

Question

I have a mat table and a select tag on my HTML component, I wish to query on a specific field only on my firestore database (there are only 2 fields under my documents inside the collection, Name and Area Code)

I'll be querying by Area Code only and display it on the Mat Table (for example Area Code 25), will only show names under that Area Code)

I've been trying my luck searching for proper sources but it seems there's nothing available.

TS Component

import { MatTableDataSource } from '@angular/material/table';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
import { Observable } from 'rxjs';

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

  dataSequenceSource: MatTableDataSource<any>;
  displayedSequenceColumns : string[] = [
    'customerNo',
    'customerZone',
    'customerName',
    'customerName',
    'customerAddress']

   private customerCollection: AngularFirestoreCollection<Customer>
   customers: Observable<Customer[]>

   constructor(public afs: AngularFirestore) {}

    applyFilterZone(zone: string) {
    this.zoneValue = zone;
    this.customerCollection = this.afs.collection('customer',
    ref => ref
    .where('customerZone','==', this.zoneValue));
    this.customers = this.customerCollection.valueChanges();

    // These part is where I'm stuck at since I don't know how to connect this one//
    
     this.dataSequenceSource = new MatTableDataSource(this.customers)

   

  }

}

I'm being prompted for this , which at this point I don't know what to do, apologies for being a Noob

Thank you for those who could help.