Реагировать на выпадающие списки на основе предыдущих выпадающих списков

Question

Я новичок в реакции и хотел реализовать функцию загрузки 3 выпадающих меню [Group, Service, Temp]. 2-й выпадающий [Служба] должен загружать или связывать данные на основе 1-го события раскрывающегося списка [группа] аналогично 3-й выпадающий [временный] должен связывать данные на основе 2-го события раскрывающегося списка [Служба].

Я буду использовать топор ios для получения данных из API и json результаты выглядят как показано ниже

Попробовал приведенный ниже код для загрузки данных

import React, { Component } from "react";
class Dropdown extends Component {
    state = {
      teams: [],
      services: [],
      selectedGroup: "",
      selectedService: "",
      validationError: ""
    };

    componentDidMount() {
      fetch("https://testapiv1.azurewebsites.net/weatherforecast")
        .then(response => {
          return response.json();
         //debugger;
        })        
        .then(data => {

            let teamsFromApi = data.map(team => {
              return { value: team.Group, display: team.Group };
            });
            let SevicesFromApi = data.map(team => {
                return { value: team.Service, display: team.Service };
              });
            this.setState({
              teams: [
                { value: "", display: "(Select your Group)" }
              ].concat(teamsFromApi),
              services: [
                { value: "", display: "(Select your Service)" }
              ].concat(SevicesFromApi)
            });
          })
          .catch(error => {
            console.log(error);
          });
    }

    render() {
      return (
        <div>
          <select
            value={this.state.selectedGroup}
            onChange={e =>
              this.setState({
                selectedGroup: e.target.value,
                validationError:
                  e.target.value === ""
                    ? "You must select your Group"
                    : ""
              })
            }
          >
            {this.state.teams.map(team => (
              <option key={team.value} value={team.value}>
                {team.display}
              </option>
            ))}
          </select>
          <select
            value={this.state.selectedService}
            onChange={e =>
              this.setState({
                selectedService: e.target.value,
                validationError:
                  e.target.value === ""
                    ? "You must select your Service"
                    : ""
              })
            }
          >
            {this.state.services.map(team => (
              <option key={team.value} value={team.value}>
                {team.display}
              </option>
            ))}
          </select>
          <div style={{ color: "red", marginTop: "5px" }}>
            {this.state.validationError}
          </div>
        </div>
      );
    }
  }

Может кто-нибудь подсказать мне, как реализовать эту функцию загрузки этих 3 выпадающих списков в реакции.

Ваша помощь очень важна!

Спасибо