Enabling dropdowns according to selection in Material UI

I have 3 dropdown components with Material UI, what I want to do is to disable the second and third components and enable them after choosing an option from the previous dropdown. For example, the second dropdown will enable after selecting something from the first dropdown, and the third will enable when I select an option from the second and so on.

This is my code:

import React from 'react';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

import cr from '../styles/general.css';


export default class CreateLinksave extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate: '',
      endDate: '',
      DivisionData: [],
      StoreGroupingData: [],
      OfferTypeData: [],
      DivisionState: '',
      OfferTypeState: '',
      StoreGroupingState: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.renderStoreGroupingOptions = this.renderStoreGroupingOptions.bind(this);
    this.renderDivisionOptions = this.renderDivisionOptions.bind(this);
    this.renderOfferTypeOptions = this.renderOfferTypeOptions.bind(this);
    this.handleChangeDivision = this.handleChangeDivision.bind(this);
    this.handleChangeStoreGrouping = this.handleChangeStoreGrouping.bind(this);
    this.handleChangeDiscountType = this.handleChangeDiscountType.bind(this);
  }

  componentDidMount() {
    const divisionWS = 'http://localhost:8080/services/Divisions/getAll';
    const offerTypeWS = 'http://localhost:8080/services/OfferType/getAll';
    const storeGroupingWS = 'http://localhost:8080/services/Rules/getRuleTextDtoQuery/Y/ENG';

    fetch(divisionWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          DivisionData: findResponse,
          DivisionState: findResponse[0].divDeptShrtDesc
        });
      });

    fetch(storeGroupingWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          StoreGroupingData: findResponse,
          StoreGroupingState: findResponse[0].ruleDesc
        });
      });

    fetch(offerTypeWS)
      .then(Response => Response.json())
      .then(findResponse => {
        console.log(findResponse);

        this.setState({
          OfferTypeData: findResponse,
          OfferTypeState: findResponse[0].offerTypeDesc
        });
      });
  }

  handleChange(event, index, value) {this.setState({value});}

  handleChangeDivision(event, index, value) {
    this.setState({ DivisionState: (value) });
  }

  handleChangeStoreGrouping(event, index, value) {
    this.setState({ StoreGroupingState: (value) });
  }

  handleChangeDiscountType(event, index, value) {
    this.setState({ OfferTypeState: (value) });
  }

  renderDivisionOptions() {
    return this.state.DivisionData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.divDeptShrtDesc}
          primaryText={dt.divDeptShrtDesc} />
      );
    });
  }

  renderStoreGroupingOptions() {
    return this.state.StoreGroupingData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.ruleDesc}
          primaryText={dt.ruleDesc} />
      );
    });
  }

  renderOfferTypeOptions() {
    return this.state.OfferTypeData.map((dt, i) => {
      return (
        <MenuItem
          key={i}
          value={dt.offerTypeDesc}
          primaryText={dt.offerTypeDesc} />
      );
    });
  }

  render() {

    return (
      <div className={cr.container}>
        <div className={cr.rows}>
          <div>
            <DropDownMenu
              value={this.state.DivisionState}
              onChange={this.handleChangeDivision}>
              {this.renderDivisionOptions()}
            </DropDownMenu>
            <br/>
            <DropDownMenu
              value={this.state.StoreGroupingState}
              onChange={this.handleChangeStoreGrouping}>
              {this.renderStoreGroupingOptions()}
            </DropDownMenu>
            <br/>
            <DropDownMenu
              value={this.state.OfferTypeState}
              onChange={this.handleChangeDiscountType}>
              {this.renderOfferTypeOptions()}
            </DropDownMenu>
            <br/>
          </div>
        </div>
      </div>
    );
  }
}

Also one more thing, now when I fetch the result coming from the WS I displaying the data in position 0, what I want to change is to have like a default option instead of the 0 position.

Some help will be nice.

Regards.