title: Selected Value not showing in Textfield Select - Material UI React Component
body: <p>I have TextField Select Material UI components based on a certain number of value in a variable. </p>
  
  <pre><code>{this.state.selectedNextHops.map((nextHop, index) =&gt; (
                &lt;div&gt;
                  &lt;TextField
                      select
                      className="vnfprofile-field"
                      InputProps={{ className: 'variable-value site-details-view-textfield' }}
                      InputLabelProps={{ shrink: true }}
                      SelectProps={{
                          MenuProps: {
                              className: 'vnf-designer-value',
                              getContentAnchorEl: null,
                              anchorOrigin: {
                                  vertical: 'bottom',
                                  horizontal: 'left',
                              }
                          },
                      }}
                      value = {this.state.selectedNextHops[index] || ''}
                      disabled={this.props.newPopoverPanelView === 'VIEW' ? true : false}
                      onChange={(e) =&gt; this.handleChange('nexthop', e)}
                    &gt;
                      {this.state.remainingNextHops.length !== 0 ? this.state.remainingNextHops.map((option, i) =&gt; (
                          &lt;MenuItem key ={i} value = {option || ''}&gt;
                            {option}
                          &lt;/MenuItem&gt;
                        )) :
                          &lt;MenuItem value = {'No Data Available'}&gt;
                              {'No Data Available'}
                          &lt;/MenuItem&gt;}
                    &lt;/TextField&gt;
                    &lt;TextField
                      className="vnfprofile-field subnet-textfield"
                      InputProps={{ className: 'variable-value' }}
                      InputLabelProps={{ shrink: true }}
                      value = {'29'}
                    /&gt;
                  &lt;/div&gt;
                  ))
            }
  </code></pre>
  
  <p>The TextFields show up sequentially when I select value from the previous dropdown and filters the menu based on previous selection.</p>
  
  <pre><code>if(selectedNextHops.indexOf(event.target.value) === -1) {
              selectedNextHops.push(event.target.value);
          }
          remainingNextHops = this.props.nextHopSapds.filter(nextHop =&gt; selectedNextHops.indexOf(nextHop) === -1);
  
  this.setState({
              selectedNextHops: selectedNextHops,
              remainingNextHops: remainingNextHops
          });
  </code></pre>
  
  <p>Update: Here is my handleChange Method -> </p>
  
  <pre><code>handleChange(type, event) {
      let selectedNextHops = JSON.parse(JSON.stringify(this.state.selectedNextHops));
      let remainingNextHops = [];
      if(type === 'nexthop') {
          selectedNextHops = selectedNextHops.filter(nh =&gt; nh !== '');
          isContentChanged = true;
          if(selectedNextHops.indexOf(event.target.value) === -1) {
              selectedNextHops.push(event.target.value);
          }
          remainingNextHops = this.props.nextHopSapds.filter(nextHop =&gt; selectedNextHops.indexOf(nextHop) === -1);
          if(remainingNextHops.length !== 0) {
              selectedNextHops.push('');
          }
          this.setState({
              selectedNextHops: selectedNextHops,
              remainingNextHops: remainingNextHops
          });
      }
    }
  </code></pre>
  
  <p>The state is updating fine, but the textfield does not display the selected value. I have tried everything I knew. Any help is appreciated.</p>