React js дочерний компонент не отображается при изменении свойств

Question

тут отреагирует нуб. У меня есть этот компонент, в котором я показываю список покемонов, полученных в результате вызовов API. У меня есть этот dropbox, который меняет состояние region на одно выбранное и извлекает список данных (покемонов) на основе региона через API. number реквизиты, переданные в PokeCard дочерний компонент, - это соответствующий номер покемона, который я бы получил в компоненте.

Проблема, с которой я столкнулся, заключается в том, что после первого изменения региона я получаю правильный список данных, но изменение региона после этого не приведет к отображению желаемого списка (список из первого измененного региона сохранится), хотя я передаю правильный number в качестве реквизита (я проверил его, используя console.log в компоненте PokeCard). Я не знаю, как реагировать на рендеринг компонента глубоко (и не знаю правильную "практику"), поэтому мне интересно, не выполняет ли реакция renderedPokemonList часть после первой. Если он не выполняется, как мне это исправить?

Заранее спасибо!

handleChangeRegion = (SelectedRegion) => {
    let pokedexNum = 0;
    switch(SelectedRegion) {
        case "National":
            this.setState({
                region: "National",
            })
            pokedexNum = 1;
            break;
        case "Kanto":
            this.setState({
                region: "Kanto",
            })
            pokedexNum = 2;
            break;
        case "Johto":
            this.setState({
                region: "Johto",
            })
            pokedexNum = 3;
            break;
        case "Hoenn":
            this.setState({
                region: "Hoenn",
            })
            pokedexNum = 4;
            break;
        case "Sinnoh":
            this.setState({
                region: "Sinnoh",
            })
            pokedexNum = 5;
            break;
        case "Unova":
            this.setState({
                region: "Unova",
            })
            pokedexNum = 9;
            break;
        case "Central Kalos":
            this.setState({
                region: "Central Kalos",
            })
            pokedexNum = 12;
            break;
        case "Coastal Kalos":
            this.setState({
                region: "Coastal Kalos",
            })
            pokedexNum = 13;
            break;
        case "Mountain Kalos":
            this.setState({
                region: "Mountain Kalos",
            })
            pokedexNum = 14;
            break;
        case "Alola":
            this.setState({
                region: "Alola",
            })
            pokedexNum = 21;
            break;
        default:
            this.setState({
                region: "National",
            })
            pokedexNum = 1;
            break;
    }
    let url = "https://pokeapi.co/api/v2/pokedex/" + String(pokedexNum) + "/"
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data) {
                this.setState({pokemons: data.pokemon_entries}, () => {})
            }
        })
        .catch(console.log)
}

render() {
  const renderedPokemonList = this.state.pokemons.map((pokemon, idx) => {
    return (
      <div key={pokemon.entry_number}>
        <div>
          <PokeCard number={pokemon.pokemon_species.url.slice(42, -1)}></PokeCard>
        </div>
      </div>
    );
  });

  return (
    <Container>
      <div>
        <ButtonDropdown>
          <Dropdown isOpen={this.state.dropDownOpen} toggle={this.toggle} >
            <DropdownToggle color="primary" caret>
              {this.state.region}
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem onClick={() => this.handleChangeRegion("National")} dropdownvalue="National">National</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Kanto")} dropdownvalue="Kanto">Kanto</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Johto")} dropdownvalue="Johto">Johto</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Hoenn")} dropdownvalue="Hoenn">Hoenn</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Sinnoh")} dropdownvalue="Sinnoh">Sinnoh</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Unova")} dropdownvalue="Unova">Unova</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Central Kalos")} dropdownvalue="Central Kalos">Central Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Coastal Kalos")} dropdownvalue="Coastal Kalos">Coastal Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Mountain Kalos")} dropdownvalue="Mountain Kalos">Mountain Kalos</DropdownItem>
              <DropdownItem onClick={() => this.handleChangeRegion("Alola")} dropdownvalue="Alola">Alola</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </ButtonDropdown>
      </div>
      <div>
        {renderedPokemonList}
      </div>
    </Container>
  );
}

+++ на самом деле после некоторой отладки (console.log переданные реквизиты в дочернем PokeCard компонент), я обнаружил, что при изменении региона он не изменяет данные первого региона, а заполняет дополнительные данные. Например, когда я сначала выбираю регион Канто (содержащий 151 запись), state.pokemons будет заполнен массивом из 151 покемона Канто, а затем при изменении региона на Алола (содержащий 403 записи) state.pokemons сохранит первые 151 Покемоны Канто и остальные будут заполнены покемонами Алолы. Я не понимаю, как это происходит ...