react-datepicker is highlighting previously selected date, as well as current date on open. How do I prevent this?

Question

I am using the npm package 'react-datepicker'. As you can see in the screenshots below, I am having an issue where if I increment/decrement the date via the left/right arrows, my previously selected date will still appear when I open the date picker.

const [startDate, setStartDate] = React.useState(new Date());
const [datePicker, setDatePicker] = React.useState(false); 
const showDatePicker = () => {setDatePicker(!datePicker)};

return (
    <S.HotelSearchBar>
        <S.Item col="1/1" row="1/1">
            <S.CheckIn onClick={() => showDatePicker()}>
                <S.Grid>
                    <S.DateIcon>
                        <S.Icon icon="date_range" />
                    </S.DateIcon>
                    <S.ButtonHead>Check In</S.ButtonHead>
                    <S.ButtonLabel>
                        <DatePicker
                            customInput={<S.customDateRange />}
                            selected={startDate}
                            onChange={(date) => setStartDate(date)}
                            onClickOutside={() => showDatePicker()}
                            open={datePicker}
                            dateFormat="d MMMM, yyyy"
                        />
                    </S.ButtonLabel>
                    <S.DateNavigator>
                        <S.DateButton
                            onClick={(event) => {
                                event.stopPropagation();
                                let newDate = new Date(startDate);
                                setStartDate(newDate.setDate(newDate.getDate() - 1));
                            }}
                        >
                            <S.Icon clickableIcon icon="chevron_left" />
                        </S.DateButton>
                        <S.DateButton
                            onClick={(event) => {
                                event.stopPropagation();
                                let newDate = new Date(startDate);
                                setStartDate(newDate.setDate(newDate.getDate() + 1));
                            }}
                        >
                            <S.Icon clickableIcon icon="chevron_right" />
                        </S.DateButton>
                    </S.DateNavigator>
                </S.Grid>
            </S.CheckIn>
        </S.Item>
    </S.HotelSearchBar>
);

My default selected date

After I have opened the date picker

After I select the right-arrow icon to increment the date

After I open the date picker again

Answer 1

Just encountered the same issue, and came to the conclusion that this library is bugged, and doesn't "clean up" after itself while manually changing date values. You can fix this by doing the following -

    const Component = () => {
      const datePickerRef = useRef();
      
      useEffect(() => {
        if (datePickerRef.current) {
          datePickerRef.current.handleCalendarClickOutside();
        }
      }, [props.selectedValue]);

      return (
        <DatePicker ref={datePickerRef} ... />
      );
    }

This way you "manually" clean up after the value changed. Hope this works for you as well as it did for me!

Answer 2

I believe this should work for you:

<DatePicker
    customInput={<S.customDateRange />}
    selected={startDate}
    startDate={startDate} // add this
    onChange={(date) => setStartDate(date)}
    onClickOutside={() => showDatePicker()}
    open={datePicker}
    dateFormat="d MMMM, yyyy"
/>