date picker component not changing date using onChange - reactjs

Question

I am trying to use react-datepicker package to create my own date picker component, i have modified some of the basic stuff to have a control on it and it all seems to work but my onChange doesn't change the date on the view... i can see the log the onChange does fire but nothing happens when i choose a new date on screen. Am fairly new and trying to understand what i did wrong.
Here is my DateTimePicker.tsx
import type { FC } from 'react';
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import './DateTimePicker.css';
export interface Props {
/**
* Determines format of date to be displayed
* tag i.e. format=dd/MM/yyyy => 24/12/2020
*/
format?: 'dd/MM/yyyy' | 'mm/dd/yyyy' | 'yyyy/MM/dd' | 'yyyy/dd/MM';
/** on change method updates the date input field with selected date */
onChange(date: Date | null, event: React.SyntheticEvent<any, Event> | undefined): void;
/** Determine the type of dropdown of year and month selecter */
mode?: 'select' | 'scroll';
/** Placeholder for no date is selected */
placeholder?: string;
}
/**
* Component that serves as an datepicker input field to let the user select Date
*
* #return DateTimePicker component
*/
export const DateTimePicker: FC<Props> = ({
format = 'dd/MM/yyyy',
mode = 'select',
placeholder = 'Click to add a date',
onChange,
}) => {
return (
<DatePicker
className="apollo-component-library-date-picker-component"
placeholderText={placeholder}
dateFormat={format}
onChange={onChange}
dropdownMode={mode}
showMonthDropdown
showYearDropdown
adjustDateOnChange
/>
);
};

Answer 1

react-datepicker takes a selected prop that keeps track of the currently selected date. You'll need to manage it in state and provide it to the component:
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
};