Selected value being read with lag

Question

I am trying to learn React by doing. Somehow, I am missing something very silly here. I have 2 calendars in my code. And I have used console logging to debug, as can be seen in the code.

import React, { useState } from  'react';
import {DatePicker} from 'rsuite';
import './styles.css';
import { AppContext } from '../Context';

function DateRangePickerCal(){
  const [startDate, setStartDate] = useState("0");
  const [endDate, setEndDate] = useState("0");

  const updateSelection = () =>{
    console.log("Method Update Selection called.")
    if(document.getElementById('toDate').value !== undefined){
      setEndDate(document.getElementById('toDate').value);
    }
    if(document.getElementById('fromDate').value !== undefined){
      setStartDate(document.getElementById('fromDate').value);
    }
    console.log(JSON.stringify(document.getElementById('toDate').value));
    console.log(JSON.stringify(document.getElementById('fromDate').value)); 
  }
return ( 
  <div>
    <DatePicker onChange={updateSelection} id="toDate" appearance="default" placeholder="Default" style={{ width: 230 }} />
   <DatePicker onChange={updateSelection} id="fromDate" appearance="default" placeholder="Default1" style={{ width: 230 }} />
   </div>
);

}
export default DateRangePickerCal;

But I am seeing the following in the console: (The browser is rendering output from other components also.)

While trying to debug this I noticed that if I keep on changing the selection in the second calendar, it picks the correct value with lag.

I am not sure, if it is due to the 'React.StrictMode'

Please help me and please also let me know if there can be other reasons.