I have a table with two filter options "Gender" and "Country"! Essentially the filter works, that is I click on the gender dropdown for male or female and the table shows me all the the entries. My issue is, with the way that I have done, I always have to refresh(as in reload the data) the table before I can filter again. Say I have filter for females, I can't directly click on male to show me the male entries, I have to refresh and then I can only filter again. I'm sure its only a matter of one or two lines of code but I just can't seem to figure it out. 

Below my methods:

```js
filterByGender(event) {
    let gender = event;
    if (gender === "Male") {
      gender = "M";
    } else if (gender === "Female") {
      gender = "F";
    }
    let filteredGender = this.customerArray
      .filter(customer => customer.gender === gender);
    console.log("filteredGender", filteredGender);
    this.customerArray = filteredGender;

  }

  filterByCountry(event) {
    let country = event;
    let filteredCountry = this.customerArray
      .filter(customer => customer.countryCode === country);
    this.customerArray = filteredCountry;
  }
```

this.customerArray is the array of all the customers from the backend. Now the reason its not working the way I want to is because I refill the array so I can't do a second filter, but what would be a way around this?