Выберите тег и материализуйте исчезновение при отправке формы в React

Question

Попытка отправить форму, которая имеет много полей ввода и 3 тега выбора (SetUp Component).Всякий раз, когда я нажимаю "Отправить", теги выбора исчезают, а материализованный сборщик данных не отображается.

вот код компонента формы:

import React, { Component } from 'react';
import Network from './Form/Network';
import GenInfo from './Form/GenInfo';
import Address from './Form/Address';
import Setup from './Form/Setup';
import { connect } from 'react-redux';
import { currentHotel } from '../../../redux/actions/hotelAction';
import { Card } from 'react-materialize';

class Form extends Component {

  state = {
    razaoSocial: '',
    nomeFantasia: '',
    cnpj: '',
    noQuartos: '',
    noRecepcao: '',
    cep: '',
    pais: '',
    estado: '',
    cidade: '',
    rua: '',
    numero: '',
    bairro: '',
    complemento: '',
    pms: '1',
    channel: '1',
    motorReservas: '1',
    idHotel: '',
    statusHotel: '',
    date: ''
  }

  handleSetInfo = (e) => {
    console.log(e.target.value);
    this.setState({
        [e.target.id]: e.target.value
    });
  }


  handleSubmit = (e) =>{
    e.preventDefault();
    const { currentHotel } = this.props;
    currentHotel(this.state.razaoSocial);
  }

  render() {
    const { razaoSocial, nomeFantasia, cnpj, noQuartos, noRecepcao, cep, pais, estado, cidade, rua, numero, bairro,
      complemento, pms, channel, motorReservas, idHotel, statusHotel, date } = this.state;
    return (

      <Card className="formHotel hoverable">
        <form onSubmit={this.handleSubmit}>
          <Network></Network>
          <GenInfo handleSetInfo={this.handleSetInfo}
            razaoSocial={razaoSocial}
            nomeFantasia={nomeFantasia}
            cnpj={cnpj}
            noQuartos={noQuartos}
            noRecepcao={noRecepcao}
          ></GenInfo>
          <Address handleSetInfo={this.handleSetInfo}
            cep={cep}
            pais={pais}
            estado={estado}
            cidade={cidade}
            rua={rua}
            numero={numero}
            bairro={bairro}
            complemento={complemento}></Address>
          <Setup handleSetInfo={this.handleSetInfo}
            pms={pms}
            channel={channel}
            motorReservas={motorReservas}></Setup>
          <div className="row">
            <div className="col offset-s3 offset-m8 offset-l8 offset-xl9">
              <button type="submit" value="submit" href="#" className="waves-effect waves-light btn-small btn">Concluir</button>
            </div>
          </div>
        </form>
      </Card>
    );
  }
}


const mapDispatchToProps = (dispatch) => {
  return {
    currentHotel: (hotel) => dispatch(currentHotel(hotel))
  }
}

const mapStateToProps = ({ hotels }) => {
  return {
    hotels
  }
}

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

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

А это компонент SetUp Component

import React, { Component } from 'react';

class Setup extends Component {
  render() {

    const { handleSetInfo, pms, channel, motorReservas} = this.props;

    return (
      <div className="Setup">
        <p className="center form-section-title">SETUP</p>
        <div className="section">
          <div className="row">
            <div className="input-field col s4">
              <select id="pms" value={pms} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>PMS</label>
            </div>
            <div className="input-field col s4">
              <select id="channel" value={channel} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>Channel</label>
            </div>
            <div className="input-field col s4">
              <select id="motorReservas" value={motorReservas} onChange={(e) => handleSetInfo(e)}>
                <option value="" disabled>Escolha</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
              </select>
              <label>Motor de Reservas</label>
            </div>
          </div>
        </div>
        <div className="divider"></div>
      </div>
    );
  }
}

export default Setup;

Кто-нибудь понимает, почему это происходит?