go to specific date or Month or Year in fullCalender with react-datepicker

I am using fullCalendar and react-datepicker library in my react app.

react version:
“react”: “^17.0.1”,

fullCalendar version:
“@fullcalendar/core”: “^5.9.0”,
“@fullcalendar/daygrid”: “^5.9.0”,
“@fullcalendar/interaction”: “^5.5.0”,
“@fullcalendar/list”: “^5.9.0”,
“@fullcalendar/react”: “^5.5.0”,
“@fullcalendar/resource-daygrid”: “^5.5.0”,
“@fullcalendar/resource-timegrid”: “^5.5.0”,
“@fullcalendar/timegrid”: “^5.9.0”,
“@fullcalendar/timeline”: “^5.9.0”,

react-datepicker version:
“react-datepicker”: “^4.2.1”,

I want to use the react-datepicker in fullCalendar to go to the specific date/month/year.
I am passing data from react-datepicker to state and using that state in goToDate prop in fullCalender, but this is not working. any help will be highly appreciated. thanks.

link to code:

https://codesandbox.io/s/fullcalender-file-h59ss

Answer

You can use ref to call gotoDate method on date change.
Checkout the following codesandbox:
https://codesandbox.io/s/fullcalender-file-forked-szgcu?file=/src/App.js