Как добавить данные из массива в выпадающий список?

Я извлекаю данные из API и хочу добавить эти данные в раскрывающийся список. Я работаю с ReactJs

class ShowStudents extends React.Component {
  state = {
    nationalities: []
  }

  componentDidMount() {
    this.setNationalities()
  }

  setNationalities = () => {
    fetch('/students/getData')
      .then(response => response.json())
      .then(data => {
        let tempNationalities = data.data.map(product => {
          return { value: product.nationality, display: product.nationality }
        })
        this.setState({ nationalities[...this.state.nationalities, ...tempNationalities ] })
      })
  }

  render() {
    return (
      <div className = "container">
        <div className = "row">
          <div className = "col-md-4">
            {this.state.nationalities}
          </div>
          <select>
            {this.state.nationalities.map((nationality) => <option key = {nationality.value} value = {nationality.value}>{nationality.display}</option>)}
          </select>
        </div>
      </div>
    )
  }

}
export default ShowStudents

Мне нужно добавить значения из tempNationalities в state.nationatilites. Когда я запускаю это, получаю сообщение об ошибке: «Объекты недействительны в качестве дочернего элемента React (найдено: объект с ключами {value, display}). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив». Как это исправить?