How to Close calendar on date selection?

[iamrraj]

Hello, How to close calendar after data range selection automatically? Here is my code so far what i did.

import React, { Component } from "react";
import DateRangePicker from "react-daterange-picker";
import "react-daterange-picker/dist/css/react-calendar.css";
import originalMoment from "moment";
import { extendMoment } from "moment-range";
const moment = extendMoment(originalMoment);

export class Filter extends Component {
  constructor(props, context) {
    super(props, context);

    const today = moment();

    this.state = {
      isOpen: false,
      value: moment.range(today.clone().subtract(7, "days"), today.clone()),
    };
  }

  onSelect = (value, states) => {
    this.setState({ value, states });
  };

  onToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  render() {
    return (
      <div className="filter_range">
        <select
          class="form-control donn"
          style={{
            width: "auto",
            opacity: "1",
            marginTop: "-2px",
          }}
        >
          <option selected disabled hidden>
            Choose{" "}
          </option>
          <option>Today</option>
          <option>Yesterday</option>
          <option>Last Week</option>
          <option>Last Month</option>
          <option>Last Quarter</option>
          <option>Last Year</option>
          <option>Overall</option>
          <option onClick={this.onToggle}>
            {this.state.value.start.format("YYYY-MM-DD")}
            {" - "}
            {this.state.value.end.format("YYYY-MM-DD")}
          </option>
        </select>
        {/* <div>{this.renderSelectionValue()}</div> */}

        <div>
          {/* <input
            type="button"
            value="Toggle date picker"

          /> */}
        </div>

        {this.state.isOpen && (
          <DateRangePicker
            value={this.state.value}
            onSelect={this.onSelect}
            singleDateRange={true}
            isOpen={false}
            closeCalendar={true}
          />
        )}
      </div>
    );
  }
}

export default Filter;