title: Update state with Reactjs DatePicker doesn't work
body: <p>I add projects with datepicker and it works but when I try to edit/update those projects with datepicker, doesn't work! give me many error such as:</p>
  
  <ul>
  <li><p>Failed prop type: Invalid prop <code>selected</code> of type <code>string</code> supplied to <code>DatePicker</code>, expected <code>object</code> </p></li>
  <li><p>A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. </p></li>
  <li><p>Failed prop type: Invalid prop <code>selected</code> of type <code>string</code> supplied to <code>Calendar/Month/Week/Day</code>, expected <code>object</code>.</p></li>
  <li><p>Uncaught TypeError: Cannot read property 'value' of undefined</p></li>
  </ul>
  
  <p>and the input is empty, doesn't show today date like it was supposed to, example here:
  <a href="https://i.stack.imgur.com/oqosa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqosa.png" alt="enter image description here"></a></p>
  
  <p><strong>Here's my EditProject Component:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { NavLink } from 'react-router-dom';
  import DatePicker from 'react-datepicker';
  import moment from 'moment';
  
  import './EditProject.css';
  import 'react-datepicker/dist/react-datepicker.css';
  
  
  class EditProject extends Component {
      constructor(props) {
          super(props);
          this.state = {
              project: {}
          }    
      }
  
      componentDidMount() {
  
          // console.log('PROPS ' + JSON.stringify(this.props));
  
          const { match: { params } } = this.props;
  
  
          fetch(`/dashboard/project/${params.id}/edit`)
              .then(response =&gt; {
                  return response.json()
              }).then(project =&gt; {
                  this.setState({
                      projectname: project.projectname,
                      typeofproject: project.typeofproject,
                      imageURL: project.imageURL,
                      startDate: project.startDate,
                      endDate: project.endDate
                  })
              })
      }
  
      render() {
          const { match: { params } } = this.props;
  
          return (
              &lt;div className='EditProject'&gt;
                  &lt;h1 className='EditProject__title'&gt;Edit&lt;/h1&gt;&lt;h1 className='EditProject__projectname'&gt;{this.state.projectname}&lt;/h1&gt;
                  &lt;hr /&gt;
                  &lt;form method='POST' action={`/dashboard/project/${params.id}/edit?_method=PUT`}&gt;
                      &lt;div className='form-group container'&gt;
                          &lt;div className="input-group mb-3"&gt;
                              &lt;div className="input-group-prepend"&gt;
                                  &lt;span className="input-group-text" style={{border:'none'}} id="basic-addon1"&gt;Project Name&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;input type='text' className='form-control input' placeholder='insert new project name' value={this.state.projectname} name='projectname' ref='projectname' onChange={(event) =&gt; this.setState({ projectname: event.target.value })} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className='form-group container'&gt;
                          &lt;div className="input-group mb-3"&gt;
                              &lt;div className="input-group-prepend"&gt;
                                  &lt;span className="input-group-text" style={{border:'none'}} id="basic-addon1"&gt;Type of Production&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;select className='form-control input' value={this.state.typeofproject} name='typeofproject' ref='typeofproject' onChange={(event) =&gt; this.setState({ typeofproject: event.target.value })}&gt;
                                  &lt;option value='Film (Cinema)'&gt;Film (Cinema)&lt;/option&gt;
                                  &lt;option value='Film (TV)'&gt;Film (TV)&lt;/option&gt;
                                  &lt;option value='Film (series)'&gt;Film (series)&lt;/option&gt;
                                  &lt;option value='Short film'&gt;Short film&lt;/option&gt;
                                  &lt;option value='TV mini-series'&gt;TV mini-series&lt;/option&gt;
                                  &lt;option value='TV series'&gt;TV series&lt;/option&gt;
                                  &lt;option value='TV program'&gt;TV program&lt;/option&gt;
                                  &lt;option value='TV reporting'&gt;TV reporting&lt;/option&gt;
                                  &lt;option value='Vox Pop'&gt;Vox Pop&lt;/option&gt;
                                  &lt;option value='Advertisement Ad'&gt;Advertisement Ad&lt;/option&gt;
                                  &lt;option value='Documentary'&gt;Documentary&lt;/option&gt;
                                  &lt;option value='Documentary (TV)'&gt;Documentary (TV)&lt;/option&gt;
                                  &lt;option value='Documentary (series)'&gt;Documentary (series)&lt;/option&gt;
                                  &lt;option value='Commercial'&gt;Commercial&lt;/option&gt;
                                  &lt;option value='Video Clip'&gt;Video Clip&lt;/option&gt;
                                  &lt;option value='Live Video Clip TV'&gt;Live Video Clip TV&lt;/option&gt;
                                  &lt;option value='Photography Session'&gt;Photography Session&lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className='form-group container'&gt;
                      &lt;div className="input-group mb-3"&gt;
                          &lt;div className="input-group-prepend"&gt;
                              &lt;span className="input-group-text" style={{border:'none'}} id="basic-addon1"&gt;Start Date&lt;/span&gt;
                          &lt;/div&gt;
     // ================DATEPICKER HERE================
                          &lt;DatePicker 
                              todayButton={"Today"}
                              dateFormat="DD/MM/YYYY"
                              selected={this.state.startDate}
                              value={this.state.startDate}
                              onChange={(event) =&gt; this.setState({ startDate: event.target.value })}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className='form-group container'&gt;
                      &lt;div className="input-group mb-3"&gt;
                          &lt;div className="input-group-prepend"&gt;
                              &lt;span className="input-group-text" style={{border:'none'}} id="basic-addon1"&gt;End Date&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;DatePicker
                              todayButton={"Today"}
                              dateFormat="DD/MM/YYYY"
                              selected={this.state.endDate}
                              value={this.state.endDate} 
                              onChange={(event) =&gt; this.setState({ endDate: event.target.value })}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
     // / ================DATEPICKER HERE================
                      &lt;div className='form-group container'&gt;
                          &lt;div className="input-group mb-3"&gt;
                              &lt;div className="input-group-prepend"&gt;
                                  &lt;span className="input-group-text" style={{border:'none'}} id="basic-addon1"&gt;Project Image URL&lt;/span&gt;
                              &lt;/div&gt;
                              &lt;input type='text' className='form-control input 'placeholder='insert new project image URL' value={this.state.imageURL} name='imageURL' ref='imageURL' onChange={(event) =&gt; this.setState({ imageURL: event.target.value })} /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;                  
                      &lt;div className='form-group container'&gt;
                          &lt;button type='submit' className='btn btn-default button--update'&gt;Update&lt;/button&gt;
                          &lt;NavLink to={`/project/${params.id}/`} &gt;&lt;button type='submit' style={{ backgroundColor: '#b5b5b5' }} className='btn btn-default button--update'&gt;Cancel&lt;/button&gt;&lt;/NavLink&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  } 
  export default EditProject;
  </code></pre>
  
  <p>Thank you so much for your help!</p>