title: MUI Datetimepicker changing value by using dropdown select
body: <p>I'm using react datetimepicker and going to use selector to change the value. but it's not changing when i pick an option (for example: i choose 6 month, it will add the finish date for 6 months). Here's my code</p>
  
  <p>Child Component</p>
  
  <pre><code>
  const handleDateChange = (date,value) =&gt; {
      setSelectedDate(date);
      props.onChange(value); //setstate
      if(props.setNewDate != undefined)
      {
        setSelectedDate(props.date);   
        props.setNewDate(date);
        props.onChange(a)
      }
    };
  };
  
  &lt;MuiPickersUtilsProvider utils={DateFnsUtils}&gt;
      &lt;Grid container justify="space-around"&gt;
          &lt;ThemeProvider theme={getMuiTheme}&gt;
              &lt;KeyboardDateTimePicker
                  value={selectedDate}
                  onChange={handleDateChange}
                  // onBlur={handleDataBlur}
                  // label="Tanggal"
                  placeholder="Masukkan Tanggal (Tahun/Bulan/Tanggal)"
                  // variant="inline"
                  inputVariant="outlined"
                  fullWidth
                  // onError={console.log}
                  format="yyyy/MM/dd HH:mm"yyyy
                  disablePast
              /&gt;
          &lt;/ThemeProvider&gt;
      &lt;/Grid&gt;
  &lt;/MuiPickersUtilsProvider&gt;
  
  </code></pre>
  
  <p>Parent component</p>
  
  <pre><code>    state =  {
        selectedFile: null,
        imagePreviewUrl: null,
        err: null,
        title : '',
        highlight : '',
        platform : '',
        start_publish : '',
        end_publish : '',
        sender : '',
        receiver : '',
        action : '',
        status : '',
        bundle : '',
        initial_date : new Date(),
      };
    setNewDate = (date) =&gt; {
          this.setState({ 
            initial_date : date 
          })
        }
  
  onTodoChange(value){
          var start_publish = new Date(this.state.start_publish);
          start_publish.setDate(start_publish.getDate()+(value*30));
          // console.log(start_publish);
          // start_publish.setDate(start_publish.getDate()+(value*30));
          this.setNewDate(start_publish);
          console.log(this.state.initial_date);
        }
        showBundle = (values) =&gt; 
        {
          this.setState({
            bundle : JSON.stringify(values),
          }) 
        };
  
      render()
      {
        let startPublish = new Date(this.state.start_publish);
        let endPublish = new Date(this.state.end_publish);
        let publish = ((endPublish - startPublish) / (60*60*24*1000));
        let $publishInterval = ('');
        if(publish &gt;= 0)
        {
          $publishInterval = (&lt;div class="form-group row mb-4"&gt;
          &lt;label class="col-sm-2 col-form-label"&gt;Jarak&lt;/label&gt;
            &lt;div class="col-sm-4 text-left"&gt;
              &lt;span class="form-control text-left"&gt;{publish.toFixed(0)} hari&lt;/span&gt;
            &lt;/div&gt;
            &lt;label class="col-sm-2 col-form-label"&gt;Range&lt;/label&gt;
            &lt;div class="col-sm-4 text-left"&gt;
            &lt;select class="custom-select" onChange={e =&gt; this.onTodoChange(e.target.value)} id="platform"&gt; ////// the selector
                &lt;option value=""&gt;Select&lt;/option&gt;
                &lt;option value={1}&gt;1 Month&lt;/option&gt;
                &lt;option value={3}&gt;3 Month&lt;/option&gt;
                &lt;option value={6}&gt;6 Month&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;)
        }
  
        return (
          &lt;Modal
          {...this.props}
          size="lg"
          onExit={this.handleExit}
          backdrop="static"
          animation={true}
          aria-labelledby="contained-modal-title-vcenter"
          centered
          &gt;
          &lt;form onSubmit={this.handleSubmit} class="was-validated justify-content-center"&gt;
            &lt;Modal.Header closeButton&gt;
              &lt;Modal.Title id="contained-modal-title-vcenter"&gt;
                Tambah Notifikasi
              &lt;/Modal.Title&gt;
            &lt;/Modal.Header&gt;
            &lt;Modal.Body style={{'max-height': 'calc(100vh - 210px)', 'overflow-y': 'auto'}}&gt;
  
              &lt;div class="form-group row mb-4"&gt;
                &lt;label class="col-sm-2 col-form-label"&gt;Publish Date&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;MaterialUIPickers required onChange={ (start_publish) =&gt; {this.setState( { start_publish })}}&gt;&lt;/MaterialUIPickers&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="form-group row mb-4"&gt;
                &lt;label class="col-sm-2 col-form-label"&gt;Finish Date&lt;/label&gt;
                &lt;div class="col-sm-10"&gt;
                  &lt;MaterialUIPickers required duration={this.state.duration} onChange={ (end_publish) =&gt; {this.setState( { end_publish })}}&gt;&lt;/MaterialUIPickers&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              {$publishInterval}
  
              &lt;div class="form-group row mb-4"&gt;
                &lt;label class="col-sm-2 col-form-label"&gt;Bundle&lt;/label&gt;
                  &lt;div class="col-sm-10"&gt;
                  &lt;Provider store={store}&gt;
                    &lt;FieldArraysForm onChange={this.showBundle}/&gt;
                  &lt;/Provider&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
            &lt;/div&gt;
  
            &lt;/Modal.Body&gt;
            &lt;Modal.Footer&gt;
              &lt;Button variant="danger" onClick={this.handleExit}&gt;Close&lt;/Button&gt;
              &lt;Button variant="success" type="submit"&gt;Post&lt;/Button&gt;
            &lt;/Modal.Footer&gt;
          &lt;/form&gt;
          &lt;/Modal&gt;
  
        )
      }
  </code></pre>
  
  <p>How can I triggered the onchange function of the date picker when I choose the selector?</p>