title: react-datepicker with custom input for user input not working
body: <p>there is a <code>CustomCalendarComponent</code> which uses <code>react-datepicker</code> shown below:</p>
  
  <pre><code>constructor(props) {
      super(props)
      this.state = {
          start :new Date()
      }
      this.handleStartChange = this.handleStartChange.bind(this);
  }
  handleStartChange (start) {
      start = start || this.state.start;
      this.setState({ start })
  };    
  render() {
      return(
          &lt;&gt;
              &lt;span&gt;Start&lt;/span&gt;
              &lt;DatePicker 
              selected = {this.state.start}
              selectsStart
              startDate = {this.state.start}
              endDate = {this.state.end}
              onChange = {this.handleStartChange}
              customInput = { &lt;CustomCalendarComponent /&gt;}
              dateFormat = "dd/MM/yyyy"
              openToDate = {this.state.start}
              showMonthDropdown
              showYearDropdown
              dropdownMode = 'select'
              /&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  
  <p>it has a <code>customInput</code> as shown below:</p>
  
  <pre><code>constructor(props){
      super(props)
  }
  
  static propTypes = {
      onClick: PropTypes.func,
      onChange: PropTypes.func,
      value: PropTypes.string,
      placeholderText: PropTypes.string
  };
  
  render() {
      return (
          &lt;div&gt;
          &lt;FormGroup className="mb-0"&gt;
            &lt;InputGroup&gt;
              &lt;Input
                className={this.props.className}
                placeholder={this.props.placeholder}
                onClick={this.props.onClick}
                value={this.props.value}
                onChange={this.props.onChange}
                type="input"
              /&gt;
              &lt;InputGroupAddon addonType="prepend"&gt;
                &lt;InputGroupText
                  className="dateIconStyle"
                  onClick={this.props.onClick}
                &gt;
                  &lt;i className={"icon-calendar"} /&gt;
                &lt;/InputGroupText&gt;
              &lt;/InputGroupAddon&gt;
            &lt;/InputGroup&gt;
          &lt;/FormGroup&gt;
          &lt;/div&gt;
        );
  }
  </code></pre>
  
  <p>everything is fine as long as user selects date from calendar, when user tries to type the date, it does not work. when user starts to delete the input it does not work properly. I tried a lot and spent nearly a whole day, but can not find the problem, I found <a href="https://github.com/Hacker0x01/react-datepicker/issues/426" rel="nofollow noreferrer">this issue</a> on github, but no luck, what is it? </p>