REST Countries built with React Router and custom hooks

On the main page, I wrote a simple filtering function that took the region filter and search term into account and filtered from the same API call which fetches every single country that populates the home page on load. I don't know if this is a best practice, or if my filter function can be refactored to be more efficient.

  const filterResults = (countries, region, term) => {
    if (region && !term)
      return countries.filter(
        (country) => country.region === regionList[region]
      );
    else if (!region && term)
      return countries.filter((country) =>
        country.name.common.toLowerCase().includes(term.toLowerCase())
      );
    else if (region && term)
      return countries.filter(
        (country) =>
          country.region === regionList[region] &&
          country.name.common.toLowerCase().includes(term.toLowerCase())
      );
    else return countries;
  };

Some country flags have different dimensions, like the Vatican, or irregular shapes, like Nepal. On the design provided, each country flag appears to have the same dimensions. I figured I could either used a fixed height for the flag on the Country card. Which may cut off some flags, or have large whitespace on either side of taller flags. That, or I could use the CSS Grid property align-items: flex-start, but then each of the cards in the rows would have irregular heights. I don't know what is the best solution, so I left the original dimensions on each flag to respect the look of each country's flag.