Cannot select date range in react-date-range plugin - reactjs

Question

I am using react-date-range plugin to select a date range in a application. It is shown as follows.
export function Dashboard() {
historyDate = [];
historyAmount = [];
const [dashboardSummary] = useDashboardSummary();
const [a, fetchDashboardSummary] = useDashboardSummary();
let [req, setReq] = useState<DashboardSummaryReqGqlInput>({
startDate: start.format('YYYY-MM-DD'),
endDate: end.format('YYYY-MM-DD')
});
useEffect(() => {
fetchDashboardSummary({
req
});
}, [req])
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
if (isSuccess(dashboardSummary)) {
dailyTotalCount = dashboardSummary.result.dashboardSummary.dailyTxnCount;
dailyValue = dashboardSummary.result.dashboardSummary.dailyTxnValue;
dailySuccessCount = dashboardSummary.result.dashboardSummary.dailySuccessTxnCount;
let historyData = dashboardSummary.result.dashboardSummary.amountHistory
for(let x in historyData) {
historyAmount.push(historyData[x].amount!)
historyDate.push(historyData[x].date!)
}
}
function setDateRange(startDate: Date, endDate: Date){
console.log("setDateRange: start:" , startDate + " end:", endDate)
console.log(moment(startDate).format("YYYY-MM-DD"))
start = moment(startDate)
end = moment(endDate)
setReq({startDate: moment(startDate).format("YYYY-MM-DD"), endDate: moment(endDate).format("YYYY-MM-DD")})
}
const selectionRange = {
startDate: new Date(),
endDate: new Date(),
key: 'selection',
}
function handleSelect(ranges: any) {
setDateRange(ranges.selection.startDate, ranges.selection.endDate)
showDateRangePicker = false
}
function onClickDateRangePicker() {
console.log("--------onClickRangePicker")
showDateRangePicker = true
setReq({startDate: moment(start).format("YYYY-MM-DD"), endDate: moment(end).format("YYYY-MM-DD")})
}
return <div className="container-fluid">
<div className="row">
<div className="col-lg-2 col-md-3 offset-lg-2 offset-md-3 second-sidebar">
<p>Last Transactions</p>
<RecentTransactions/>
</div>
<main role="main" className="col-lg-8 col-md-6 ml-sm-auto p-0">
<div className="sub-header-dashboard">
<div className="row">
<div className="col-lg-6">
<h5 className="sub-text mt-lg-2 ml-md-0 ml-5">Dashboard</h5>
</div>
<div className="col-lg-6">
<div className="input-group">
<div className="input-group-prepend">
<span className="input-group-text" onClick={onClickDateRangePicker}><i className="fas fa-calendar-alt"></i></span>
</div>
<div id={"date-picker-box"} style={{display: showDateRangePicker ? "block" : "none"}}>
<DateRangePicker
className={"datepicker"}
ranges={[selectionRange]}
onChange={handleSelect}/>
</div>
<div id="reportrange" className="form-control date-range-input pt-3">
<span className="date-range-input__date"></span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
}
export default Dashboard
I can select a date range by dragging but cannot select start and end date separately. When I click on a date it selects that date as both start date and end date. Instead I want to select start and end date separately.
Is this is available in this pluging? Or Am I doing something wrong?