React state variable value appearing to be null

I’m trying to access a value of my state variable, but it appears to be null when I change the date, but If I change any other input field, I don’t get it null
Here is the link to stackblitz running app.

If you open the console and type something in any field you can check the value of filter variable to be same as what you type, but if you click on the date range input, it will show you null, I’m scratching my head for hours around this.
Thanks in advance to helping hands

>Solution :

react-bootstrap-daterangepicker looks like abandonware, I’d pick a different library.

If you want to keep using it, note that the onEvent callback isn’t updated when your component re-renders. So to get the latest state, use the setState callback:

    const onDateChange = (event, picker) => {
        ...
        setFilter(filter => {
            console.log('new filter', filter);
            return {...filter, hi: 'bye'};
        });
    }

This will let you access the latest filter state of your component even though the callback has closed over the stale initial render state.