Невозможно заполнить раскрывающийся список выбора с помощью JSON в reactJS

Я пытаюсь получить ключ «имя» и его соответствующее значение, используя JSON в раскрывающемся списке «Выбрать» reactJS. Но это не работает, когда я выполняю свой код. Я прикрепил свой код, пожалуйста, посмотрите!

Я попытался использовать componentDidMount для получения данных, выполнив вызов API. Я новичок, поэтому я пытаюсь выяснить, как заставить его работать.

class devName extends Component {
  state = {
    names: [],
    selectedName: "",
    validationError: ""
  }

  componentDidMount() {
    fetch("http://127.0.0.1:8080/dashboard/get_names")
      .then((res) => {
        return res.json();
      })
      .then(data => {
        let namesFromAPI = data.map(name => { return { value: name, display: name } })
        this.setState({ names: [{ value: '', display: '(Select the site)' }].concat(namesFromAPI) });
      }).catch(err => {
        console.log(err);
      });
  }

  render() {
    return (
      <div className="wrapper">
        <div className="form-wrapper">
          <Toolbar />
          <form className="form">
            <label className="label1">Select Name from the drop down</label> <hr />
            <div>
              <Select 
                value={this.state.selectedName}
                onChange={(e) => this.setState({selectedName: e.target.value, validationError: e.target.value === "" ? "You must select a site name" : ""})}>
                {/* placeholder="Loading Site List..." > */}
                {this.state.names.map((name) => <option key={name.value} value={name.display}>{name.display} </option>)}
              </Select>
              <div style={{color: 'red', marginTop: '5px'}}>
              {this.state.validationError}
              </div>
              <br />
            </div>
            <label className="label1">Create New Name From Template</label>
            <hr />
            <div className="addButton">
              <button type="Submit">Add</button> <hr />
            </div>
            <div className="submitButton">
              <button type="submit">Submit</button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default devName;

КОД JSON ВЫГЛЯДИТ:

[
    {
        "type": "state",
        "id": 2131,
        "temporaryEle": {},
        "name": "First Unit#1234 TON" .. and so on
    }
]

Сообщение об ошибке отсутствует. Хотя желаемый результат должен быть «Выбрать раскрывающийся список, заполняется: «Выберите одно из имен, пожалуйста»

First Unit#1234 TON
Second Unit#8934 QON
Third Unit#6534 JON