Проблема с выбором поля выбора из реквизита

Question

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

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

    import React, { Component } from 'react'
    import {connect} from 'react-redux'
    import {Helmet} from "react-helmet";
    import Zone from '../components/hall/Zone'
    import Table from '../components/hall/Table'
    import Seat from '../components/hall/Seat'
    import * as hactions from '../store/actions/hallActions'
    // import {fetchHall, createHall} from '../store/actions/hallActions'

    class Hall extends Component { 
    state = { 
    name: '',
    tname: ''
    }
    componentDidMount(){
    this.props.fetchHall()
    this.props.fetchTable()
    //  console.log(this.props)

    }

    handleChange = (e)=> {
    this.setState({
    [e.target.id]: e.target.value
    })
    }
    handleZoneSubmit=(e)=>{
    e.preventDefault();
    this.props.createHall(this.state)
    }




    render() { 
    const {zones,tables} = this.props 
    return (

    <div className="row">
    <Helmet>
    <title>Hall Management</title>
    <meta name="description" content="Hall Management" />
    </Helmet>
    <div className="section col m4 s4">


    <button className="waves-effect waves-light btn modal-trigger" data-target="zone">Add Zone</button>

    <Zone zones={zones}/>
    </div>

    <div className="section col m4 s4">

    <button className="waves-effect waves-light btn modal-trigger" data-target="table">Add Table</button>

    <Table tables={tables}/>
    </div>

    <div className="section col m4 s4">
    <button className="waves-effect waves-light btn modal-trigger" data-target="seat">Add Seat</button>

    <Seat zones={zones} />
    </div>

    {/* zone modal */}
    <div id="zone" className="modal modal-fixed-footer">
    <div className="modal-content">
    <h4>Add Zone </h4>

    <div className="row"> 
    <div className="input-field">
    <input id="name" type="text" value={this.state.name} onChange={this.handleChange} />
    <label htmlFor="name">Hall Name</label>

    </div>


    </div>

    </div>
    <div className="modal-footer">
    <form onSubmit={this.handleZoneSubmit} className="col s12"> 
    <button className="modal-close waves-effect waves-green btn-flat">    <i className="material-icons right">send</i>Save</button>
    </form>
    </div>
    </div>
    {/* zone modal */}

    {/* table model */}
    <div id="table" className="modal modal-fixed-footer">
    <div className="modal-content">
    <h4>Add Table </h4>

    <div className="row"> 

    <div className="input-field col s12">




    <select id="name"  onChange={this.handleChange}>
    {/* <option value="" disabled >Choose your option</option>  */}

    {this.props.zones.map((zone, key) => {
    //  console.log('each zone', zone)
    // (zones && zones.length > 0) && zones.map((zone, i)=> {
    return (
    <option key={key} value={zone.name}> {zone.name} </option>
    )
    }
    )}
    </select>

    <label>Select Zone</label>
    </div>

    <div className="input-field col s12">
    <input id="tname" type="text" value={this.state.tname} onChange={this.handleChange} />
    <label htmlFor="name">Table Name</label>

    </div>


    </div>

    </div>
    <div className="modal-footer">
    <form onSubmit={this.handleTableSubmit} className="col s12"> 
    <button className="modal-close waves-effect waves-green btn-flat">    <i className="material-icons right">send</i>Save Table</button>
    </form>
    </div>
    </div>
    {/* table model */}

    </div>


    )
    }
    }


    const mapStateToProps = (state)=> {
    // console.log(state)
    return {
    zones: state.hall.zone, 
    // auth: state.auth,
    users: state.user.users,
    tables: state.hall.table
    }
    }
    const mapDispatchToProps = (dispatch) => {
    return {
    fetchHall: ()=> dispatch(hactions.fetchHall()),
    createHall:(name)=>dispatch(hactions.createHall(name)),
    fetchTable:()=>dispatch(hactions.fetchTable())
    }
    }

    export default
    connect(mapStateToProps, mapDispatchToProps)(Hall); 

Показать все залы из источника данных, переданные компоненту, как реквизиты