Dropdown not expanding even after having values

class clusterServersDropdown extends Component {
  constructor() {
    super();
    this.state = {
      clusterslist: [],
      servertype: [],
      selectserver: "",
      selectcluster: ""
    };
  }
  componentDidMount() {
    this.setState({
        clusterslist:[
            {label: "cluster1", servertype:["test1","test2","test3"]},
            {label: "cluster2", servertype:["test1","test2","test3"]},
            {label: "cluster3", servertype:["test1","test2","test3"]},
        ]
    });
  }
  selectclusterChange(e) {
    console.log(e.label)
    this.setState({ selectcluster: e.label },() =>{
      console.log(this.state.selectcluster)
    });
   
    this.setState({
      servertype: this.state.clusterslist.find(
        (x) => x.label === e.label
      ).servertype
    },() =>{
      console.log(this.state.servertype)
    }
    );    
  }

  routeChange = (e) => {
        console.log(e.label)
        this.setState({ selectserver: e.label}, () => {
        console.log(this.state.selectserver);
        let path = "/inventory/cluster/" + this.state.selectcluster +"/servertype/" + this.state.selectserver;
        console.log(path);
        this.props.history.push(path);
      });
  };

  render() {
    return (
      <div>
        <center>
          <label>
            Select cluster and server type
              <Select className="react-select" classNamePrefix="react-select"
                onChange={this.selectclusterChange.bind(this)}
                options={this.state.clusterslist.map((x) => {
                  return {label: x.label};
                })}
              />
              <Select className="react-select" classNamePrefix="react-select" 
                onChange={this.routeChange.bind(this)}
                options={this.state.servertype.map((y) => {
                  return {label: y};
                })}
              />
          </label>
        </center>
      </div>
    );
  }
}


export default withRouter(clusterServersDropdown);