fetch данных в select react

Есть форма с селектами, в первом выбирается фильм из серии звёздных войн. И в двух других должны отобразиться космические корабли из выбранного фильма. Не очень понимаю как прописать условие по правильному, если делать на if то очень много кода получается, уверен что есть более рациональный способ.

Код компонента:

class StarshipsCompare extends Component {
  swapiService = new SwapiService();
  state = {
    filmList: [],
  };

  componentDidMount() {
    this.swapiService.getAllFilms().then((filmList) => {
      this.setState({ filmList });
    });
  }
  renderItems(arr) {
    return arr.map(({ id, title }) => {
      return (
        <option value={title} key={id}>
          {title}
        </option>
      );
    });
  }

  render() {
    const { filmList } = this.state;
    const items = this.renderItems(filmList);
    return (
      <div>
        <form>
          <p>Выберите фильм корабли из которого хотите сравнить:</p>
          <select className="custom-select">{items}</select>
          <div className="row p-5">
            <div className="col">
              <p>Выберите корабль для сравнения:</p>
              <select className="custom-select"></select>
            </div>
            <div className="col">
              <p>Выберите корабль для сравнения:</p>
              <select className="custom-select"></select>
            </div>
          </div>
        </form>
      </div>
    );
  }
}

И с фетчем данных:

export default class SwapiService {
  _apiBase = "https://swapi.dev/api";
  async getResource(url) {
    const res = await fetch(`${this._apiBase}${url}`);

    if (!res.ok) {
      throw new Error(`Could not fetch ${url}, status: ${res.status}`);
    }

    return await res.json();
  }

  getAllFilms = async () => {
    const res = await this.getResource("/films/");
    return res.results.map(this._transformFilms);
  };
}