...
{OriginDestinationLocations:{DestinationLocation:{CityName:'Orlando'}, OriginLocation:{CityName:'Miami'}}},
 {OriginDestinationLocations:{DestinationLocation:{CityName:'Orlando'}, OriginLocation:{CityName:'Chicago'}}},
 {OriginDestinationLocations:{DestinationLocation:{CityName:'Las Vegas'}, OriginLocation:{CityName:'Miami'}}}
....
// so here (pretending that would be the full list) when I pick Orlando as origin in the 1st selection field, I should only see Miami and Chicago in the second field.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      from:[],
      to:[]
    }
  }
componentDidMount() {
   cityPairs().then(response => {
        let from = [];
        let to = [];
    // here its wrong to separate destination and origin as origin needs to stay 'connected' to the matching destinations but I just don't know what else to do. if I push objects with always matching origins/destinations into 1 array, I was thinking it would create so many pair, that can't be right in terms of performance etc. or would that be the only way?
        for (var i = 0; i < response.length; i++) {
            from.push(response[i].DestinationLocation.CityName);
            to.push(response[i].OriginLocation.CityName);
        }
        this.setState({
            to: to,
            from: from
        })
    })
}

 handleChange(event) {
    this.setState({value: event.target.value});
 }
render(){
  return (
  <div>
      <Select
          name="form-field-name"
          value={this.state.value}
          onChange={this.handleChange}
          clearable={this.state.clearable}
          searchable={this.state.searchable}
          labelKey='name'
          valueKey='cityCode'
          options={this.state.to}
       />
  </div>
  )
}
}