Not working 2 DateRangePicker (react-dates) on 1 page

Question

I need to post 2 DateRangePicker on 1 page but my code is not working. There might be some conflict between the startDate and endDate variables. Although I use other variables, the error does not disappear. Please help solve the problem.. here is my code:

    constructor(props) {
        super(props);
        moment.locale('ru');
        this.state = {
            startDate: null,
            endDate: null,
            startDate2: null,
            endDate2: null,
            focusedInput: null,
            focusedInput2: null,
        };
    }


    render() {
        return (
            <div>
                <DateRangePicker
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onDatesChange={({startDate, endDate}) => this.setState({
                        startDate,
                        endDate
                    })}
                    focusedInput={this.state.focusedInput}
                    onFocusChange={(focusedInput) => this.setState({focusedInput})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate"
                    endDateId="endDate"
                    isOutsideRange={() => false}
                />
                <DateRangePicker
                    startDate={this.state.startDate2}
                    endDate={this.state.endDate2}
                    onDatesChange={({startDate2, endDate2}) => this.setState({
                        startDate2,
                        endDate2
                    })}
                    focusedInput={this.state.focusedInput2}
                    onFocusChange={(focusedInput2) => this.setState({focusedInput2})}
                    readOnly={true}
                    hideKeyboardShortcutsPanel={true}
                    showClearDates={true}
                    startDateId="startDate2"
                    endDateId="endDate2"
                    isOutsideRange={() => false}
                />
            </div>

        );
    }
}

Answer 1

      <DateRangePicker
      startDate={this.state.startDate}
      endDate={this.state.endDate}
      onDatesChange={({startDate,endDate}) =>
        this.setState({
          startDate:startDate,
          endDate:endDate
        })
      }
      focusedInput={this.state.focusedInput}
      onFocusChange={focusedInput => this.setState({ focusedInput })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate"
      endDateId="endDate"
      isOutsideRange={() => false}
    /> 
    <DateRangePicker
      startDate={this.state.startDate2}
      endDate={this.state.endDate2}
      onDatesChange={({startDate,endDate}) =>
      this.setState({
          startDate2:startDate,
          endDate2:endDate
        })
      }
      focusedInput={this.state.focusedInput2}
      onFocusChange={focusedInput2 => this.setState({ focusedInput2 })}
      readOnly={true}
      hideKeyboardShortcutsPanel={true}
      showClearDates={true}
      startDateId="startDate2"
      endDateId="endDate2"
      isOutsideRange={() => false}
    />

**the problem was with destructing of the date obj sent by the package,here is a working sandbox https://codesandbox.io/embed/magical-darkness-jh8kk?fontsize=14&hidenavigation=1&theme=dark