title: React-datepicker date range
body: <p>I am using react-typescript for my app. I am using <a href="https://www.npmjs.com/package/react-datepicker" rel="nofollow noreferrer">React-datepicker</a> package. I want to create one global date range component. So I can reuse it to the different component. I have used React-datepicker's <code>customInput</code> for styling and created buttons where it display the time. I followed <a href="https://reactdatepicker.com/#example-6" rel="nofollow noreferrer">this link</a> for date range logic. In the calendar date range seems work and this is the <a href="https://i.stack.imgur.com/0FsC3.png" rel="nofollow noreferrer">image</a>. I want to display choosing start date and end date in the <code>customInput's</code> button. But as soon as I choose the end date, both buttons display the end date's value. I don't know how to fix it.</p>
  <p><strong>This is date range component</strong></p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import DatePicker, { ReactDatePickerProps } from &quot;react-datepicker&quot;;
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  import moment from &quot;moment&quot;;
  import { Button } from &quot;components/buttons&quot;;
  
  export interface IDatepicker {
    value: {
      start: Date;
      end: Date;
    };
    onBlur?: (i: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void;
    onFocus?: (i: React.FocusEvent&lt;HTMLInputElement&gt;) =&gt; void;
    onChange: (i: Date) =&gt; void;
    buttonComponent?: JSX.Element;
    withPortal?: boolean;
    showTimeSelect?: boolean;
    dateFormat?: string;
    timeFormat?: string;
  }
  
  export default ({
    value,
    onChange,
    onBlur,
    onFocus,
    buttonComponent,
    withPortal = false,
    showTimeSelect = false,
    dateFormat = &quot;MMMM d, yyyy h:mm aa&quot;,
    timeFormat = &quot;HH:mm&quot;
  }: IDatepicker) =&gt; {
  
    const handleChange = (date: Date | null) =&gt; {
      date &amp;&amp; onChange(date);
    };
  
    return (
      &lt;div style={{ display: &quot;flex&quot; }}&gt;
        &lt;DatePicker
          selected={value.start}
          onChange={handleChange}
          showTimeSelect={showTimeSelect}
          selectsStart
          startDate={value.start}
          endDate={value.end}
          customInput={
            &lt;Button&gt;
              {moment(value.start)
                .format(&quot;MMMM Do YYYY&quot;)
                .toString()}
            &lt;/Button&gt;
          }
        /&gt;
        &lt;div style={{ color: &quot;black&quot; }}&gt;-&lt;/div&gt;
        &lt;DatePicker
          selected={value.end}
          onChange={handleChange}
          showTimeSelect={showTimeSelect}
          selectsEnd
          startDate={value.start}
          endDate={value.end}
          minDate={value.start}
          customInput={
            &lt;Button&gt;
              {moment(value.end)
                .format(&quot;MMMM Do YYYY&quot;)
                .toString()}
            &lt;/Button&gt;
          }
        /&gt;
      &lt;/div&gt;
  
    );
  };
  </code></pre>
  <p><strong>This is the component i am using the date range component</strong></p>
  <pre><code>import React from &quot;react&quot;;
  
  import TimeLine from &quot;components/datepicker&quot;;
  
  
  export default () =&gt; {
  const [state, setState] = useState(new Date());
    return (
      &lt;div&gt;
        &lt;TimeLine
            value={{ start: state, end: state }}
            onChange={setState}
          /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>