Ranges parameter not updating

[Zhu-K]

The ranges parameter doesn't seem to update after the first render. For example, here I have an option to select the range in the past 5 minutes, however this range is stuck on between 5 minutes before page load and the load time, instead of current time, despite now=new Date(); Please advise on how to update ranges.

class TimeContainer extends Component {
  render() {
    let startTime = moment(new Date(this.props.startTime));
    let endTime = moment(new Date(this.props.endTime));
    let value = `${startTime.format("MM/DD/YYYY HH:mm")} - ${endTime.format(
      "MM/DD/YYYY HH:mm"
    )}`;

    let now = new Date();
    let ranges = {
      "5 Minutes": [moment(now).subtract(5, "minutes"), moment(now)],
    };

    let local = {
      format: "MM-DD-YYYY HH:mm",
      sundayFirst: false,
    };

    return (
      <div>
        <DateTimeRangeContainer
          ranges={ranges}
          start={startTime}
          end={endTime}
          local={local}
          maxDate={moment(now)}
          applyCallback={this.props.applyCallback}
          pastSearchFriendly={true}
        >
          <Form.Control
            id={this.props.id}
            type="text"
            label="Text"
            readOnly
            placeholder="Date Time Picker"
            value={value"}
          />
        </DateTimeRangeContainer>
      </div>
    );
  }
}