How to handel event onChange of react-date-range (Date range) when only select start date or end date

Question

1. I have a component DateRange using react-date-range , Import :

import { Range, DateRange, RangeKeyDict } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

Default value :

 const [dateRangeValue, setDateRangeValue] = useState<Range>({
        startDate: new Date(),
        endDate: new Date(),
    });

Fuction :

const handelOnchange = (itemRespon: Range): void => {
        console.log('itemRespon,', itemRespon);
        //Display start end date which was chosen
        renderFooteDate(itemRespon);
        //Set new date range value
        setDateRangeValue(itemRespon);
        //CallBackParrent to give data back
    };

Component :

 <DateRange
 className={style.dateRangeWrapper}
 editableDateInputs={true}
 onChange={(item: RangeKeyDict): void => handelOnchange(item.selection)}
 moveRangeOnFirstSelection={false}
 ranges={[{ ...dateRangeValue, key: 'selection' }]}
 months={2}
 direction="horizontal"
 />

Picture : Date

2.I hope i can get value when ever i chose only start date or end date , but currently it only active onChange event when i click both start and end date. I do not always need both start and end , sometimes i just need 1 of them is enough.

Answer 1

I tried to reproduce the error, but it works fine for me.
Please see example.
The only thing you have to do is to press Enter after changing the date, then the changes will be applied.