React doesn't rerender on state update

I am displaying components on base of state which is an array. When I am trying to sort this state it doesn't rerender components rendered on base of it. I want to sort on base of sortBy state so when its being changed (using select) I invoke sorting function using useEffect(). What am I doing wrong?

const sortCountries = () => {
    switch (sortBy) {
      case sortBySwitchList.Alphabetically:
        setCountriesArr((prev) =>
          prev.sort((a, b) =>
            a.name.common < b.name.common
              ? -1
              : a.name.common > b.name.common
              ? 1
              : 0
          )
        );
        break;
      case sortBySwitchList.AlphabeticallyReversed:
        setCountriesArr((prev) =>
          prev.sort((a, b) =>
            a.name.common < b.name.common
              ? 1
              : a.name.common > b.name.common
              ? -1
              : 0
          )
        );
        break;
      default:
        return;
    }
  };
  const changeSortBy = (e) => {
    setSortBy(e.target.value);
  };

  useEffect(() => {
    sortCountries();
  }, [sortBy]);
***part in which I am rendering***
{countriesArr.map((item) => {
          return (
            <CountryComponent
              key={item.name.common}
              flag={item.flags.png}
              name={item.name.common}
              population={item.population}
              region={item.region}
              capital={item.capital}
            />
          );
        })}