Datepicker displays only the previous date, not the most recently selected date-CodePudding

I'm using React, and have components in DatePicker.

Currently, when I select a date in DatePicker I can only get the previously selected date to print in console, so when I first access the webpage it always tells me the default date of January 1st, 2021 instead of the date I selected.

How can I make datepicker display the selected date and not the preivously selected one?

my code:

import DatePicker from "react-datepicker";

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());

const handleChange = date => {
    const valueOfInput = date;
    console.log(valueOfInput)
  };

<div> 
          From
          <DatePicker selected={startDate} onChange={(v => setStartDate(v))} dateFormat="yyyy-MM" showMonthYearPicker showFullMonthYearPicker showTwoColumnMonthYearPicker todayButton="Today" maxDate={new Date()} placeholderText='Results from:' defaultDate={''}/>
          To
          <DatePicker selected={endDate} onChange={(v => setEndDate(v))} dateFormat="yyyy-MM" showMonthYearPicker showFullMonthYearPicker showTwoColumnMonthYearPicker todayButton="Today" maxDate={new Date()} placeholderText='Results to:' defaultDate={''}/>
      </div>

Selecting a date such as february 2011, currently yeilds: Fri Jan 01 2021 14:49:33 GMT-0500 (Eastern Standard Time)

but when I click on that it should yield: Fri Feb 01 2011 14:49:33 GMT-0500 (Eastern Standard Time)

Any guidance would be much appreciated, Cheers

Edit: updating post based off suggestions

CodePudding user response：

I think we are missing some information, you Datepicker components reference a startDate var I don't see defined anywhere.

But to answer your question.

What happens if you render only one Datepicker component? Maybe you the log of 1 of the components instead of the other one.

Happy coding!