diff --git a/docs-site/src/examples/ts/calendarContainer.tsx b/docs-site/src/examples/ts/calendarContainer.tsx
index a520b52aa1..27d9c9645d 100644
--- a/docs-site/src/examples/ts/calendarContainer.tsx
+++ b/docs-site/src/examples/ts/calendarContainer.tsx
@@ -23,7 +23,7 @@ const CustomCalendarContainer = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarContainer={MyContainer}
     />
   );
diff --git a/docs-site/src/examples/ts/calendarIcon.tsx b/docs-site/src/examples/ts/calendarIcon.tsx
index 3afb0aff53..f150164d00 100644
--- a/docs-site/src/examples/ts/calendarIcon.tsx
+++ b/docs-site/src/examples/ts/calendarIcon.tsx
@@ -2,11 +2,7 @@ const CalendarIcon = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      showIcon
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    />
+    <DatePicker showIcon selected={selectedDate} onChange={setSelectedDate} />
   );
 };
 
diff --git a/docs-site/src/examples/ts/calendarIconExternal.tsx b/docs-site/src/examples/ts/calendarIconExternal.tsx
index 0971c089d8..674a83a6ea 100644
--- a/docs-site/src/examples/ts/calendarIconExternal.tsx
+++ b/docs-site/src/examples/ts/calendarIconExternal.tsx
@@ -5,7 +5,7 @@ const CalendarIconExternal = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon="fa fa-calendar"
     />
   );
diff --git a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
index 75bfd3ccd9..fd26335007 100644
--- a/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
+++ b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx
@@ -5,7 +5,7 @@ const CalendarIconSvgIcon = () => {
     <DatePicker
       showIcon
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       icon={
         <svg
           xmlns="http://www.w3.org/2000/svg"
diff --git a/docs-site/src/examples/ts/calendarStartDay.tsx b/docs-site/src/examples/ts/calendarStartDay.tsx
index 63d03429ce..e54d3926dd 100644
--- a/docs-site/src/examples/ts/calendarStartDay.tsx
+++ b/docs-site/src/examples/ts/calendarStartDay.tsx
@@ -4,7 +4,7 @@ const CalendarStartDay = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarStartDay={3}
     />
   );
diff --git a/docs-site/src/examples/ts/children.tsx b/docs-site/src/examples/ts/children.tsx
index 599c2f1fe7..17676b35aa 100644
--- a/docs-site/src/examples/ts/children.tsx
+++ b/docs-site/src/examples/ts/children.tsx
@@ -2,10 +2,7 @@ const Children = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    >
+    <DatePicker selected={selectedDate} onChange={setSelectedDate}>
       <div style={{ color: "red" }}>Don't forget to check the weather!</div>
     </DatePicker>
   );
diff --git a/docs-site/src/examples/ts/clearInput.tsx b/docs-site/src/examples/ts/clearInput.tsx
index 88132933c9..ffadb9eb4f 100644
--- a/docs-site/src/examples/ts/clearInput.tsx
+++ b/docs-site/src/examples/ts/clearInput.tsx
@@ -4,7 +4,7 @@ const ClearInput = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       isClearable
       placeholderText="I have been cleared!"
     />
diff --git a/docs-site/src/examples/ts/closeOnScroll.tsx b/docs-site/src/examples/ts/closeOnScroll.tsx
index 5a8dc27c8d..f3629b70dd 100644
--- a/docs-site/src/examples/ts/closeOnScroll.tsx
+++ b/docs-site/src/examples/ts/closeOnScroll.tsx
@@ -5,7 +5,7 @@ const CloseOnScroll = () => {
     <DatePicker
       closeOnScroll
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.tsx b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
index 62909e181d..f70f027aa8 100644
--- a/docs-site/src/examples/ts/closeOnScrollCallback.tsx
+++ b/docs-site/src/examples/ts/closeOnScrollCallback.tsx
@@ -5,7 +5,7 @@ const CloseOnScrollCallback = () => {
     <DatePicker
       closeOnScroll={(e: Event): boolean => e.target === document}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/configureFloatingUI.tsx b/docs-site/src/examples/ts/configureFloatingUI.tsx
index 9f39737802..7539c5ccac 100644
--- a/docs-site/src/examples/ts/configureFloatingUI.tsx
+++ b/docs-site/src/examples/ts/configureFloatingUI.tsx
@@ -4,7 +4,7 @@ const ConfigureFloatingUI = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       popperClassName="some-custom-class"
       popperPlacement="top-end"
       popperModifiers={[
diff --git a/docs-site/src/examples/ts/customCalendarClassName.tsx b/docs-site/src/examples/ts/customCalendarClassName.tsx
index aafa6747fb..ae99a0b439 100644
--- a/docs-site/src/examples/ts/customCalendarClassName.tsx
+++ b/docs-site/src/examples/ts/customCalendarClassName.tsx
@@ -4,7 +4,7 @@ const CustomCalendarClassName = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       calendarClassName="rasta-stripes"
     />
   );
diff --git a/docs-site/src/examples/ts/customClassName.tsx b/docs-site/src/examples/ts/customClassName.tsx
index ba29ad8ffe..03309ab808 100644
--- a/docs-site/src/examples/ts/customClassName.tsx
+++ b/docs-site/src/examples/ts/customClassName.tsx
@@ -4,7 +4,7 @@ const CustomClassName = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       className="red-border"
     />
   );
diff --git a/docs-site/src/examples/ts/customDateFormat.tsx b/docs-site/src/examples/ts/customDateFormat.tsx
index 3dc69655e9..1493f19689 100644
--- a/docs-site/src/examples/ts/customDateFormat.tsx
+++ b/docs-site/src/examples/ts/customDateFormat.tsx
@@ -5,7 +5,7 @@ const CustomDateFormat = () => {
     <DatePicker
       dateFormat="yyyy/MM/dd"
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx
index cd0284f588..12c307b6bc 100644
--- a/docs-site/src/examples/ts/customDayClassName.tsx
+++ b/docs-site/src/examples/ts/customDayClassName.tsx
@@ -1,13 +1,15 @@
 const CustomDayClassName = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
+  const getDayClassName = (date: Date): string => {
+    return date.getDate() === 1 ? "text-success" : "";
+  };
+
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-      dayClassName={(date: Date) =>
-        DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined
-      }
+      onChange={setSelectedDate}
+      dayClassName={getDayClassName}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx
index 9e5dc48669..99b1285a15 100644
--- a/docs-site/src/examples/ts/customInput.tsx
+++ b/docs-site/src/examples/ts/customInput.tsx
@@ -4,22 +4,23 @@ type ExampleCustomInputProps = {
   onClick?: () => void;
 };
 
+const ExampleCustomInput = forwardRef<
+  HTMLButtonElement,
+  ExampleCustomInputProps
+>(({ value, onClick, className }, ref) => (
+  <button type="button" className={className} onClick={onClick} ref={ref}>
+    {value}
+  </button>
+));
+ExampleCustomInput.displayName = "ExampleCustomInput";
+
 const CustomInput = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
-  const ExampleCustomInput = forwardRef<
-    HTMLButtonElement,
-    ExampleCustomInputProps
-  >(({ value, onClick, className }, ref) => (
-    <button className={className} onClick={onClick} ref={ref}>
-      {value}
-    </button>
-  ));
-
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       customInput={<ExampleCustomInput className="example-custom-input" />}
     />
   );
diff --git a/docs-site/src/examples/ts/customTimeClassName.tsx b/docs-site/src/examples/ts/customTimeClassName.tsx
index 05b79c8403..234e5174b4 100644
--- a/docs-site/src/examples/ts/customTimeClassName.tsx
+++ b/docs-site/src/examples/ts/customTimeClassName.tsx
@@ -11,7 +11,7 @@ const CustomTimeClassName = () => {
     <DatePicker
       showTimeSelect
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       timeClassName={handleColor}
     />
   );
diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx
index cb997b7b59..2c39db267d 100644
--- a/docs-site/src/examples/ts/customTimeInput.tsx
+++ b/docs-site/src/examples/ts/customTimeInput.tsx
@@ -26,7 +26,7 @@ const CustomTimeInput = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeInput
       customTimeInput={<ExampleCustomTimeInput />}
     />
diff --git a/docs-site/src/examples/ts/dateRange.tsx b/docs-site/src/examples/ts/dateRange.tsx
index 3d0ad3dd32..b91a820325 100644
--- a/docs-site/src/examples/ts/dateRange.tsx
+++ b/docs-site/src/examples/ts/dateRange.tsx
@@ -8,14 +8,14 @@ const DateRange = () => {
     <>
       <DatePicker
         selected={selectedDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        onChange={setStartDate}
         selectsStart
         startDate={selectedDate}
         endDate={endDate}
       />
       <DatePicker
         selected={endDate}
-        onChange={(date: Date | null) => setEndDate(date)}
+        onChange={setEndDate}
         selectsEnd
         startDate={selectedDate}
         endDate={endDate}
diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
index 766f15c70d..647d2e92a4 100644
--- a/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
+++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx
@@ -9,9 +9,7 @@ const DateRangeInputWithClearButton = () => {
     <DatePicker
       startDate={startDate}
       endDate={endDate}
-      onChange={(update: [Date | null, Date | null]) => {
-        setDateRange(update);
-      }}
+      onChange={setDateRange}
       selectsRange
       isClearable
     />
diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.tsx b/docs-site/src/examples/ts/dateRangeWithPortal.tsx
index 54da56e9de..37b1650966 100644
--- a/docs-site/src/examples/ts/dateRangeWithPortal.tsx
+++ b/docs-site/src/examples/ts/dateRangeWithPortal.tsx
@@ -9,9 +9,7 @@ const DateRangeWithPortal = () => {
     <DatePicker
       startDate={startDate}
       endDate={endDate}
-      onChange={(update: [Date | null, Date | null]) => {
-        setDateRange(update);
-      }}
+      onChange={setDateRange}
       selectsRange
       withPortal
     />
diff --git a/docs-site/src/examples/ts/default.tsx b/docs-site/src/examples/ts/default.tsx
index 00f348e908..7acdd3d5d1 100644
--- a/docs-site/src/examples/ts/default.tsx
+++ b/docs-site/src/examples/ts/default.tsx
@@ -1,12 +1,11 @@
 const Default = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
-  return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-    />
-  );
+  const handleChange = (date: Date | null) => {
+    setSelectedDate(date);
+  };
+
+  return <DatePicker selected={selectedDate} onChange={handleChange} />;
 };
 
 render(Default);
diff --git a/docs-site/src/examples/ts/disabled.tsx b/docs-site/src/examples/ts/disabled.tsx
index 09ee2bf59c..d3db54bac9 100644
--- a/docs-site/src/examples/ts/disabled.tsx
+++ b/docs-site/src/examples/ts/disabled.tsx
@@ -4,7 +4,7 @@ const Disabled = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabled
       placeholderText="This is disabled"
     />
diff --git a/docs-site/src/examples/ts/disabledInline.tsx b/docs-site/src/examples/ts/disabledInline.tsx
index 97f92a907f..d1e7847d32 100644
--- a/docs-site/src/examples/ts/disabledInline.tsx
+++ b/docs-site/src/examples/ts/disabledInline.tsx
@@ -4,7 +4,7 @@ const DisabledInline = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabled
       inline
     />
diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
index 4b87269b0e..130b14a2d0 100644
--- a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
+++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx
@@ -4,7 +4,7 @@ const DisabledKeyboardNavigation = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       disabledKeyboardNavigation
       placeholderText="This has disabled keyboard navigation"
     />
diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.tsx b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
index aa276b3071..894c4a4977 100644
--- a/docs-site/src/examples/ts/dontCloseOnSelect.tsx
+++ b/docs-site/src/examples/ts/dontCloseOnSelect.tsx
@@ -4,7 +4,7 @@ const DontCloseOnSelect = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       shouldCloseOnSelect={false}
     />
   );
diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx
index ab9d61082a..651519baf4 100644
--- a/docs-site/src/examples/ts/excludeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx
@@ -1,7 +1,7 @@
-type TExcludeDateIntervals = {
+type TExcludeDateIntervals = Array<{
   start: Date;
   end: Date;
-}[];
+}>;
 
 const ExcludeDateIntervals = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDateIntervals = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDateIntervals={excludeDateIntervals}
       placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx
index 088080f213..2ea17b3bba 100644
--- a/docs-site/src/examples/ts/excludeDates.tsx
+++ b/docs-site/src/examples/ts/excludeDates.tsx
@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDates = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />
diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
index 19522401b2..7bf54c0f1b 100644
--- a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
+++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx
@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesMonthPicker = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(
@@ -18,7 +18,7 @@ const ExcludeDatesMonthPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       excludeDates={excludeDates}
       showMonthYearPicker
diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
index 5732fd1931..ee0365166e 100644
--- a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
+++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx
@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesRangeMonthPicker = () => {
   const defaultStartDate = new Date("2024-08-01");
diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
index 43f4c862bb..a3f377635b 100644
--- a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
+++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx
@@ -1,9 +1,9 @@
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const ExcludeDatesWithMessage = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -16,7 +16,7 @@ const ExcludeDatesWithMessage = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       excludeDates={excludeDates}
       placeholderText="Select a date other than today or yesterday"
     />
diff --git a/docs-site/src/examples/ts/excludeTimePeriod.tsx b/docs-site/src/examples/ts/excludeTimePeriod.tsx
index e00940aeb2..86f9f63abc 100644
--- a/docs-site/src/examples/ts/excludeTimePeriod.tsx
+++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx
@@ -8,7 +8,7 @@ const ExcludeTimePeriod = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       minTime={setHours(setMinutes(new Date(), 0), 17)}
       maxTime={setHours(setMinutes(new Date(), 30), 20)}
diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx
index 61bbbd75dd..ff5d65adca 100644
--- a/docs-site/src/examples/ts/excludeTimes.tsx
+++ b/docs-site/src/examples/ts/excludeTimes.tsx
@@ -16,7 +16,7 @@ const ExcludeTimes = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       excludeTimes={excludeTimes}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx
index dc7c1f5074..67e8e2da22 100644
--- a/docs-site/src/examples/ts/excludeWeeks.tsx
+++ b/docs-site/src/examples/ts/excludeWeeks.tsx
@@ -1,7 +1,7 @@
-type TExcludeDateIntervals = {
+type TExcludeDateIntervals = Array<{
   start: Date | string;
   end: Date | string;
-}[];
+}>;
 
 const ExcludeWeeks = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(
@@ -16,7 +16,7 @@ const ExcludeWeeks = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="I/R"
       locale="en-GB"
       excludeDateIntervals={excludeWeeks}
diff --git a/docs-site/src/examples/ts/externalForm.tsx b/docs-site/src/examples/ts/externalForm.tsx
index 9fe9519131..06f5e28469 100644
--- a/docs-site/src/examples/ts/externalForm.tsx
+++ b/docs-site/src/examples/ts/externalForm.tsx
@@ -5,7 +5,7 @@ const ExternalForm = () => {
     <>
       <DatePicker
         selected={selectedDate}
-        onChange={(date: Date | null) => setSelectedDate(date)}
+        onChange={setSelectedDate}
         required
         form="external-form"
       />
diff --git a/docs-site/src/examples/ts/filterDates.tsx b/docs-site/src/examples/ts/filterDates.tsx
index 6dc1e386ec..618f1668c5 100644
--- a/docs-site/src/examples/ts/filterDates.tsx
+++ b/docs-site/src/examples/ts/filterDates.tsx
@@ -11,7 +11,7 @@ const FilterDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       filterDate={isWeekday}
       placeholderText="Select a weekday"
     />
diff --git a/docs-site/src/examples/ts/filterTimes.tsx b/docs-site/src/examples/ts/filterTimes.tsx
index d13ab92c6f..44e7cfe173 100644
--- a/docs-site/src/examples/ts/filterTimes.tsx
+++ b/docs-site/src/examples/ts/filterTimes.tsx
@@ -16,7 +16,7 @@ const FilterTimes = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       filterTime={filterPassedTime}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/fixedCalendar.tsx b/docs-site/src/examples/ts/fixedCalendar.tsx
index 40e774d5a4..efcc202851 100644
--- a/docs-site/src/examples/ts/fixedCalendar.tsx
+++ b/docs-site/src/examples/ts/fixedCalendar.tsx
@@ -4,7 +4,7 @@ const FixedCalendar = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       fixedHeight
     />
   );
diff --git a/docs-site/src/examples/ts/hideTimeCaption.tsx b/docs-site/src/examples/ts/hideTimeCaption.tsx
index 63b06ebbd2..cb47e1fab5 100644
--- a/docs-site/src/examples/ts/hideTimeCaption.tsx
+++ b/docs-site/src/examples/ts/hideTimeCaption.tsx
@@ -6,7 +6,7 @@ const HideTimeCaption = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx
index 4fd11c82e1..8616ff9568 100644
--- a/docs-site/src/examples/ts/highlightDates.tsx
+++ b/docs-site/src/examples/ts/highlightDates.tsx
@@ -2,7 +2,7 @@ type HighlightDate = {
   [className: string]: Date[];
 };
 
-type THighlightDates = (Date | HighlightDate)[];
+type THighlightDates = Array<Date | HighlightDate>;
 
 const HighlightDates = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -15,7 +15,7 @@ const HighlightDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       highlightDates={highlightDates}
       placeholderText="This highlights a week ago and a week from today"
     />
diff --git a/docs-site/src/examples/ts/highlightDatesRanges.tsx b/docs-site/src/examples/ts/highlightDatesRanges.tsx
index f9165bdea7..55f29bade0 100644
--- a/docs-site/src/examples/ts/highlightDatesRanges.tsx
+++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx
@@ -3,7 +3,7 @@ type HighlightDate = {
   [className: string]: Date[];
 };
 
-type THighlightDates = (Date | HighlightDate)[];
+type THighlightDates = Array<Date | HighlightDate>;
 
 const HighlightDatesRanges = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
@@ -30,7 +30,7 @@ const HighlightDatesRanges = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       highlightDates={highlightWithRanges}
       placeholderText="This highlight two ranges with custom classes"
     />
diff --git a/docs-site/src/examples/ts/holidayDates.tsx b/docs-site/src/examples/ts/holidayDates.tsx
index 5383da21de..e8a091f68e 100644
--- a/docs-site/src/examples/ts/holidayDates.tsx
+++ b/docs-site/src/examples/ts/holidayDates.tsx
@@ -17,7 +17,7 @@ const HolidayDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       holidays={holidays}
       placeholderText="This display holidays"
     />
diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx
index ffd6772ab7..c4b2688602 100644
--- a/docs-site/src/examples/ts/includeDateIntervals.tsx
+++ b/docs-site/src/examples/ts/includeDateIntervals.tsx
@@ -1,8 +1,8 @@
 const { subDays, addDays } = DateFNS;
-type TIncludeDateIntervals = {
+type TIncludeDateIntervals = Array<{
   start: Date;
   end: Date;
-}[];
+}>;
 
 const IncludeDateIntervals = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
@@ -14,7 +14,7 @@ const IncludeDateIntervals = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       includeDateIntervals={includeDateIntervals}
       placeholderText="This only includes dates from 5 days ago to 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/includeDates.tsx b/docs-site/src/examples/ts/includeDates.tsx
index 0f4ae1eba7..17fc9d8c04 100644
--- a/docs-site/src/examples/ts/includeDates.tsx
+++ b/docs-site/src/examples/ts/includeDates.tsx
@@ -9,7 +9,7 @@ const IncludeDates = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       includeDates={includeDates}
       placeholderText="This only includes today and tomorrow"
     />
diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
index c6f1cc3a88..8dc3780dc6 100644
--- a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
+++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx
@@ -10,7 +10,7 @@ const IncludeDatesMonthPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       includeDates={includeDates}
       showMonthYearPicker
diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx
index 7ca1e15074..135c5757b6 100644
--- a/docs-site/src/examples/ts/includeTimes.tsx
+++ b/docs-site/src/examples/ts/includeTimes.tsx
@@ -15,7 +15,7 @@ const IncludeTimes = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       includeTimes={includeTimes}
       dateFormat="MMMM d, yyyy h:mm aa"
diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx
index bced85345c..6fbf447534 100644
--- a/docs-site/src/examples/ts/injectTimes.tsx
+++ b/docs-site/src/examples/ts/injectTimes.tsx
@@ -14,7 +14,7 @@ const InjectTimes = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       timeFormat="HH:mm:ss"
       injectTimes={injectTimes}
diff --git a/docs-site/src/examples/ts/inline.tsx b/docs-site/src/examples/ts/inline.tsx
index 79535eaca1..22ca760f4b 100644
--- a/docs-site/src/examples/ts/inline.tsx
+++ b/docs-site/src/examples/ts/inline.tsx
@@ -2,11 +2,7 @@ const Inline = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-      inline
-    />
+    <DatePicker selected={selectedDate} onChange={setSelectedDate} inline />
   );
 };
 
diff --git a/docs-site/src/examples/ts/locale.tsx b/docs-site/src/examples/ts/locale.tsx
index 890b9c48b2..555ac0a457 100644
--- a/docs-site/src/examples/ts/locale.tsx
+++ b/docs-site/src/examples/ts/locale.tsx
@@ -4,7 +4,7 @@ const Locale = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       locale="en-GB"
       placeholderText="Weeks start on Monday"
     />
diff --git a/docs-site/src/examples/ts/localeWithTime.tsx b/docs-site/src/examples/ts/localeWithTime.tsx
index 3532bfc6a4..7f40e86dcc 100644
--- a/docs-site/src/examples/ts/localeWithTime.tsx
+++ b/docs-site/src/examples/ts/localeWithTime.tsx
@@ -6,7 +6,7 @@ const LocaleWithTime = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       locale="pt-BR"
       showTimeSelect
       timeFormat="p"
diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
index 9bd3e55cb1..adac169ae4 100644
--- a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
+++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx
@@ -4,7 +4,7 @@ const LocaleWithoutGlobalVariable = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       locale={fi}
     />
   );
diff --git a/docs-site/src/examples/ts/maxDate.tsx b/docs-site/src/examples/ts/maxDate.tsx
index 9385a2f0a7..b037e649b6 100644
--- a/docs-site/src/examples/ts/maxDate.tsx
+++ b/docs-site/src/examples/ts/maxDate.tsx
@@ -4,7 +4,7 @@ const MaxDate = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date before 5 days in the future"
     />
diff --git a/docs-site/src/examples/ts/minDate.tsx b/docs-site/src/examples/ts/minDate.tsx
index 99465c4d70..46b71a87b9 100644
--- a/docs-site/src/examples/ts/minDate.tsx
+++ b/docs-site/src/examples/ts/minDate.tsx
@@ -4,7 +4,7 @@ const MinDate = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       minDate={DateFNS.subDays(new Date(), 5)}
       placeholderText="Select a date after 5 days ago"
     />
diff --git a/docs-site/src/examples/ts/monthDropdown.tsx b/docs-site/src/examples/ts/monthDropdown.tsx
index 5d0e9c8a8e..31fafc1c3c 100644
--- a/docs-site/src/examples/ts/monthDropdown.tsx
+++ b/docs-site/src/examples/ts/monthDropdown.tsx
@@ -4,7 +4,7 @@ const MonthDropdown = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       showMonthDropdown
     />
   );
diff --git a/docs-site/src/examples/ts/monthDropdownShort.tsx b/docs-site/src/examples/ts/monthDropdownShort.tsx
index 9a381ca542..263bf15efa 100644
--- a/docs-site/src/examples/ts/monthDropdownShort.tsx
+++ b/docs-site/src/examples/ts/monthDropdownShort.tsx
@@ -4,7 +4,7 @@ const MonthDropdownShort = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       showMonthDropdown
       useShortMonthInDropdown
     />
diff --git a/docs-site/src/examples/ts/monthPicker.tsx b/docs-site/src/examples/ts/monthPicker.tsx
index 95604948ba..238c5ebbe7 100644
--- a/docs-site/src/examples/ts/monthPicker.tsx
+++ b/docs-site/src/examples/ts/monthPicker.tsx
@@ -4,7 +4,7 @@ const MonthPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       showMonthYearPicker
     />
diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.tsx b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
index 6a6ea8cb61..1200614c55 100644
--- a/docs-site/src/examples/ts/monthPickerFourColumns.tsx
+++ b/docs-site/src/examples/ts/monthPickerFourColumns.tsx
@@ -4,7 +4,7 @@ const MonthPickerFourColumns = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthPickerFullName.tsx b/docs-site/src/examples/ts/monthPickerFullName.tsx
index 5a8c4591e4..07411b6ac9 100644
--- a/docs-site/src/examples/ts/monthPickerFullName.tsx
+++ b/docs-site/src/examples/ts/monthPickerFullName.tsx
@@ -4,7 +4,7 @@ const MonthPickerFullName = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
index 1876b3cc39..b49b1de77f 100644
--- a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
+++ b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx
@@ -4,7 +4,7 @@ const MonthPickerTwoColumns = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="MM/yyyy"
       showMonthYearPicker
       showFullMonthYearPicker
diff --git a/docs-site/src/examples/ts/monthYearDropdown.tsx b/docs-site/src/examples/ts/monthYearDropdown.tsx
index 65c8495cb7..6b108743c4 100644
--- a/docs-site/src/examples/ts/monthYearDropdown.tsx
+++ b/docs-site/src/examples/ts/monthYearDropdown.tsx
@@ -6,7 +6,7 @@ const MonthYearDropdown = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormatCalendar={"MMM yyyy"}
       minDate={subMonths(new Date(), 6)}
       maxDate={addMonths(new Date(), 6)}
diff --git a/docs-site/src/examples/ts/multiMonth.tsx b/docs-site/src/examples/ts/multiMonth.tsx
index 2560987d13..9fd27fa650 100644
--- a/docs-site/src/examples/ts/multiMonth.tsx
+++ b/docs-site/src/examples/ts/multiMonth.tsx
@@ -4,7 +4,7 @@ const MultiMonth = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/ts/multiMonthDropdown.tsx b/docs-site/src/examples/ts/multiMonthDropdown.tsx
index 2f62917624..5d21a35837 100644
--- a/docs-site/src/examples/ts/multiMonthDropdown.tsx
+++ b/docs-site/src/examples/ts/multiMonthDropdown.tsx
@@ -4,7 +4,7 @@ const MultiMonthDropdown = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       monthsShown={2}
       showYearDropdown
     />
diff --git a/docs-site/src/examples/ts/multiMonthInline.tsx b/docs-site/src/examples/ts/multiMonthInline.tsx
index 4c2fc98e23..c7306061e6 100644
--- a/docs-site/src/examples/ts/multiMonthInline.tsx
+++ b/docs-site/src/examples/ts/multiMonthInline.tsx
@@ -4,7 +4,7 @@ const MultiMonthInline = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       monthsShown={2}
       inline
     />
diff --git a/docs-site/src/examples/ts/multiMonthPrevious.tsx b/docs-site/src/examples/ts/multiMonthPrevious.tsx
index 3b826db628..3350fbc717 100644
--- a/docs-site/src/examples/ts/multiMonthPrevious.tsx
+++ b/docs-site/src/examples/ts/multiMonthPrevious.tsx
@@ -5,7 +5,7 @@ const MultiMonthPrevious = () => {
     <DatePicker
       selected={selectedDate}
       showPreviousMonths
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       monthsShown={2}
     />
   );
diff --git a/docs-site/src/examples/ts/noAnchorArrow.tsx b/docs-site/src/examples/ts/noAnchorArrow.tsx
index b33b8310b1..186ed37ba2 100644
--- a/docs-site/src/examples/ts/noAnchorArrow.tsx
+++ b/docs-site/src/examples/ts/noAnchorArrow.tsx
@@ -5,7 +5,7 @@ const NoAnchorArrow = () => {
     <DatePicker
       showPopperArrow={false}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/onBlurCallbacks.tsx b/docs-site/src/examples/ts/onBlurCallbacks.tsx
index 35b848a0a0..fe55387228 100644
--- a/docs-site/src/examples/ts/onBlurCallbacks.tsx
+++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx
@@ -7,6 +7,7 @@ const OnBlurCallbacks = () => {
     target: { value },
   }: React.FocusEvent<HTMLInputElement>) => {
     const date = new Date(value);
+
     if (isValid(date)) {
       console.log("date: %s", format(date, "dd/MM/yyyy"));
     } else {
@@ -18,7 +19,7 @@ const OnBlurCallbacks = () => {
     <DatePicker
       key="example9"
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       onBlur={handleOnBlur}
       placeholderText="View blur callbacks in console"
     />
diff --git a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
index 034a01bbc3..4c11340bac 100644
--- a/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
+++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx
@@ -7,7 +7,7 @@ const OnCalendarOpenStateCallbacks = () => {
   return (
     <DatePicker
       selected={date}
-      onChange={(date: Date | null) => setDate(date)}
+      onChange={setDate}
       onCalendarClose={handleCalendarClose}
       onCalendarOpen={handleCalendarOpen}
     />
diff --git a/docs-site/src/examples/ts/openToDate.tsx b/docs-site/src/examples/ts/openToDate.tsx
index a03f7a0b0d..b6f9a0342e 100644
--- a/docs-site/src/examples/ts/openToDate.tsx
+++ b/docs-site/src/examples/ts/openToDate.tsx
@@ -4,7 +4,7 @@ const OpenToDate = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       openToDate={new Date("1993/09/28")}
     />
   );
diff --git a/docs-site/src/examples/ts/portal.tsx b/docs-site/src/examples/ts/portal.tsx
index 38de9fa23e..c5365c445a 100644
--- a/docs-site/src/examples/ts/portal.tsx
+++ b/docs-site/src/examples/ts/portal.tsx
@@ -2,11 +2,7 @@ const Portal = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
 
   return (
-    <DatePicker
-      selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
-      withPortal
-    />
+    <DatePicker selected={selectedDate} onChange={setSelectedDate} withPortal />
   );
 };
 
diff --git a/docs-site/src/examples/ts/portalById.tsx b/docs-site/src/examples/ts/portalById.tsx
index 0a38653a06..5cafd3fa5e 100644
--- a/docs-site/src/examples/ts/portalById.tsx
+++ b/docs-site/src/examples/ts/portalById.tsx
@@ -4,7 +4,7 @@ const PortalById = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       portalId="root-portal"
     />
   );
diff --git a/docs-site/src/examples/ts/quarterPicker.tsx b/docs-site/src/examples/ts/quarterPicker.tsx
index 6b2a94a551..fe0f0b95c9 100644
--- a/docs-site/src/examples/ts/quarterPicker.tsx
+++ b/docs-site/src/examples/ts/quarterPicker.tsx
@@ -4,7 +4,7 @@ const QuarterPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="yyyy, QQQ"
       showQuarterYearPicker
     />
diff --git a/docs-site/src/examples/ts/rangeMonthPicker.tsx b/docs-site/src/examples/ts/rangeMonthPicker.tsx
index dbdefd5f46..15a47a1879 100644
--- a/docs-site/src/examples/ts/rangeMonthPicker.tsx
+++ b/docs-site/src/examples/ts/rangeMonthPicker.tsx
@@ -8,7 +8,7 @@ const RangeMonthPicker = () => {
     <>
       <DatePicker
         selected={startDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        onChange={setStartDate}
         selectsStart
         startDate={startDate}
         endDate={endDate}
@@ -17,7 +17,7 @@ const RangeMonthPicker = () => {
       />
       <DatePicker
         selected={endDate}
-        onChange={(date: Date | null) => setEndDate(date)}
+        onChange={setEndDate}
         selectsEnd
         startDate={startDate}
         endDate={endDate}
diff --git a/docs-site/src/examples/ts/rangeQuarterPicker.tsx b/docs-site/src/examples/ts/rangeQuarterPicker.tsx
index 91b169784b..14f2ea4310 100644
--- a/docs-site/src/examples/ts/rangeQuarterPicker.tsx
+++ b/docs-site/src/examples/ts/rangeQuarterPicker.tsx
@@ -8,7 +8,7 @@ const RangeQuarterPicker = () => {
     <>
       <DatePicker
         selected={startDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        onChange={setStartDate}
         selectsStart
         startDate={startDate}
         endDate={endDate}
@@ -17,7 +17,7 @@ const RangeQuarterPicker = () => {
       />
       <DatePicker
         selected={endDate}
-        onChange={(date: Date | null) => setEndDate(date)}
+        onChange={setEndDate}
         selectsEnd
         startDate={startDate}
         endDate={endDate}
diff --git a/docs-site/src/examples/ts/rangeSwapRange.tsx b/docs-site/src/examples/ts/rangeSwapRange.tsx
index b5d7127fdd..f67fbe38e2 100644
--- a/docs-site/src/examples/ts/rangeSwapRange.tsx
+++ b/docs-site/src/examples/ts/rangeSwapRange.tsx
@@ -1,11 +1,11 @@
 const { addDays } = DateFNS;
 
 type TExcludeDates =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const RangeSwapRange = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
diff --git a/docs-site/src/examples/ts/rangeYearPicker.tsx b/docs-site/src/examples/ts/rangeYearPicker.tsx
index fd52a4a2df..fa96fc60e4 100644
--- a/docs-site/src/examples/ts/rangeYearPicker.tsx
+++ b/docs-site/src/examples/ts/rangeYearPicker.tsx
@@ -8,7 +8,7 @@ const RangeYearPicker = () => {
     <>
       <DatePicker
         selected={startDate}
-        onChange={(date: Date | null) => setStartDate(date)}
+        onChange={setStartDate}
         selectsStart
         startDate={startDate}
         endDate={endDate}
@@ -17,7 +17,7 @@ const RangeYearPicker = () => {
       />
       <DatePicker
         selected={endDate}
-        onChange={(date: Date | null) => setEndDate(date)}
+        onChange={setEndDate}
         selectsEnd
         startDate={startDate}
         endDate={endDate}
diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx
index 014d000a02..939d702d83 100644
--- a/docs-site/src/examples/ts/rawChange.tsx
+++ b/docs-site/src/examples/ts/rawChange.tsx
@@ -7,36 +7,33 @@ const RawChange = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 
   const handleChangeRaw = (
-    value: string,
+    event:
+      | React.MouseEvent<HTMLElement>
+      | React.KeyboardEvent<HTMLElement>
+      | React.ChangeEvent<HTMLInputElement>,
     selectedDateMeta?: SelectedDateMeta | null,
   ) => {
-    console.log(
-      selectedDateMeta
-        ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}`
-        : "No Selection Meta is available",
-    );
+    if (event.target instanceof HTMLInputElement) {
+      const value = event.target.value;
 
-    if (value === "tomorrow") {
-      setSelectedDate(DateFNS.addDays(new Date(), 1));
+      console.log(
+        selectedDateMeta
+          ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}`
+          : "No Selection Meta is available",
+      );
+
+      if (value === "tomorrow") {
+        setSelectedDate(DateFNS.addDays(new Date(), 1));
+      }
     }
   };
 
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       placeholderText='Enter "tomorrow"'
-      onChangeRaw={(
-        event:
-          | React.MouseEvent<HTMLElement>
-          | React.KeyboardEvent<HTMLElement>
-          | React.ChangeEvent<HTMLInputElement>,
-        selectedDateMeta?: SelectedDateMeta | null,
-      ) => {
-        if (event.target instanceof HTMLInputElement) {
-          handleChangeRaw(event.target.value, selectedDateMeta);
-        }
-      }}
+      onChangeRaw={handleChangeRaw}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/readOnly.tsx b/docs-site/src/examples/ts/readOnly.tsx
index 13128ce4c1..8e15248adc 100644
--- a/docs-site/src/examples/ts/readOnly.tsx
+++ b/docs-site/src/examples/ts/readOnly.tsx
@@ -4,7 +4,7 @@ const ReadOnly = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       placeholderText="This is readOnly"
       readOnly
     />
diff --git a/docs-site/src/examples/ts/renderCustomDay.tsx b/docs-site/src/examples/ts/renderCustomDay.tsx
index 8e79cfca24..b78949dc57 100644
--- a/docs-site/src/examples/ts/renderCustomDay.tsx
+++ b/docs-site/src/examples/ts/renderCustomDay.tsx
@@ -10,7 +10,7 @@ const RenderCustomDay = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       renderDayContents={renderDayContents}
     />
   );
diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx
index 42f21576d5..dbc765cbe6 100644
--- a/docs-site/src/examples/ts/renderCustomHeader.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeader.tsx
@@ -72,7 +72,7 @@ const RenderCustomHeader = () => {
     <DatePicker
       renderCustomHeader={CustomHeader}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
index ec94cc87c4..15a48cd15a 100644
--- a/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
+++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx
@@ -2,62 +2,62 @@ const RenderCustomHeaderTwoMonths = () => {
   const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
   const monthsShown = useMemo(() => 2, []);
 
+  const renderHeader = ({
+    monthDate,
+    customHeaderCount,
+    decreaseMonth,
+    increaseMonth,
+  }: ReactDatePickerCustomHeaderProps) => (
+    <div>
+      <button
+        aria-label="Previous Month"
+        className={
+          "react-datepicker__navigation react-datepicker__navigation--previous"
+        }
+        onClick={decreaseMonth}
+        style={{ visibility: customHeaderCount === 0 ? "visible" : "hidden" }}
+      >
+        <span
+          className={
+            "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
+          }
+        >
+          {"<"}
+        </span>
+      </button>
+      <span className="react-datepicker__current-month">
+        {monthDate.toLocaleString("en-US", {
+          month: "long",
+          year: "numeric",
+        })}
+      </span>
+      <button
+        aria-label="Next Month"
+        className={
+          "react-datepicker__navigation react-datepicker__navigation--next"
+        }
+        onClick={increaseMonth}
+        style={{
+          visibility:
+            customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+        }}
+      >
+        <span
+          className={
+            "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
+          }
+        >
+          {">"}
+        </span>
+      </button>
+    </div>
+  );
+
   return (
     <DatePicker
-      renderCustomHeader={({
-        monthDate,
-        customHeaderCount,
-        decreaseMonth,
-        increaseMonth,
-      }: ReactDatePickerCustomHeaderProps) => (
-        <div>
-          <button
-            aria-label="Previous Month"
-            className={
-              "react-datepicker__navigation react-datepicker__navigation--previous"
-            }
-            onClick={decreaseMonth}
-            style={{
-              visibility: customHeaderCount === 0 ? "visible" : "hidden",
-            }}
-          >
-            <span
-              className={
-                "react-datepicker__navigation-icon react-datepicker__navigation-icon--previous"
-              }
-            >
-              {"<"}
-            </span>
-          </button>
-          <span className="react-datepicker__current-month">
-            {monthDate.toLocaleString("en-US", {
-              month: "long",
-              year: "numeric",
-            })}
-          </span>
-          <button
-            aria-label="Next Month"
-            className={
-              "react-datepicker__navigation react-datepicker__navigation--next"
-            }
-            onClick={increaseMonth}
-            style={{
-              visibility:
-                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
-            }}
-          >
-            <span
-              className={
-                "react-datepicker__navigation-icon react-datepicker__navigation-icon--next"
-              }
-            >
-              {">"}
-            </span>
-          </button>
-        </div>
-      )}
+      renderCustomHeader={renderHeader}
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       monthsShown={monthsShown}
     />
   );
diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
index 56a4dc2914..05bfc0d6af 100644
--- a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
+++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx
@@ -1,10 +1,10 @@
 const { addDays } = DateFNS;
 type TExcludeDate =
-  | {
+  | Array<{
       date: Date;
       message?: string;
-    }[]
-  | Date[];
+    }>
+  | Array<Date>;
 
 const SelectsRangeWithDisabledDates = () => {
   const [startDate, setStartDate] = useState<Date | null>(new Date());
diff --git a/docs-site/src/examples/ts/showTime.tsx b/docs-site/src/examples/ts/showTime.tsx
index 349b5a5396..4168b6ee1c 100644
--- a/docs-site/src/examples/ts/showTime.tsx
+++ b/docs-site/src/examples/ts/showTime.tsx
@@ -6,7 +6,7 @@ const ShowTime = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       timeFormat="HH:mm"
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/showTimeOnly.tsx b/docs-site/src/examples/ts/showTimeOnly.tsx
index 8ee9698865..2dea696074 100644
--- a/docs-site/src/examples/ts/showTimeOnly.tsx
+++ b/docs-site/src/examples/ts/showTimeOnly.tsx
@@ -6,7 +6,7 @@ const ShowTimeOnly = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       showTimeSelect
       showTimeSelectOnly
       timeIntervals={15}
diff --git a/docs-site/src/examples/ts/specificDateRange.tsx b/docs-site/src/examples/ts/specificDateRange.tsx
index 257814ae87..8363cf3dd8 100644
--- a/docs-site/src/examples/ts/specificDateRange.tsx
+++ b/docs-site/src/examples/ts/specificDateRange.tsx
@@ -4,7 +4,7 @@ const SpecificDateRange = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       minDate={new Date()}
       maxDate={DateFNS.addDays(new Date(), 5)}
       placeholderText="Select a date between today and 5 days in the future"
diff --git a/docs-site/src/examples/ts/strictParsing.tsx b/docs-site/src/examples/ts/strictParsing.tsx
index 6abef57bef..a87c86a543 100644
--- a/docs-site/src/examples/ts/strictParsing.tsx
+++ b/docs-site/src/examples/ts/strictParsing.tsx
@@ -4,7 +4,7 @@ const StrictParsing = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       strictParsing
     />
   );
diff --git a/docs-site/src/examples/ts/timeInput.tsx b/docs-site/src/examples/ts/timeInput.tsx
index 526d8c13da..bc0108185a 100644
--- a/docs-site/src/examples/ts/timeInput.tsx
+++ b/docs-site/src/examples/ts/timeInput.tsx
@@ -6,7 +6,7 @@ const TimeInput = () => {
   return (
     <DatePicker
       selected={selectedDateTime}
-      onChange={(date: Date | null) => setSelectedDateTime(date)}
+      onChange={setSelectedDateTime}
       timeInputLabel="Time:"
       dateFormat="MM/dd/yyyy h:mm aa"
       showTimeInput
diff --git a/docs-site/src/examples/ts/today.tsx b/docs-site/src/examples/ts/today.tsx
index 5c3a7c3c49..03d0a5fcfa 100644
--- a/docs-site/src/examples/ts/today.tsx
+++ b/docs-site/src/examples/ts/today.tsx
@@ -5,7 +5,7 @@ const Today = () => {
     <DatePicker
       todayButton="Vandaag"
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
index 8ecb580ce1..a98b95436c 100644
--- a/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
+++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx
@@ -6,7 +6,7 @@ const ToggleCalendarOnIconClick = () => {
       showIcon
       toggleCalendarOnIconClick
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
     />
   );
 };
diff --git a/docs-site/src/examples/ts/weekNumbers.tsx b/docs-site/src/examples/ts/weekNumbers.tsx
index 0cb5476372..496e0503f1 100644
--- a/docs-site/src/examples/ts/weekNumbers.tsx
+++ b/docs-site/src/examples/ts/weekNumbers.tsx
@@ -4,7 +4,7 @@ const WeekNumbers = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       locale="en-GB"
       showWeekNumbers
     />
diff --git a/docs-site/src/examples/ts/weekPicker.tsx b/docs-site/src/examples/ts/weekPicker.tsx
index f1af02ff8a..63df946c09 100644
--- a/docs-site/src/examples/ts/weekPicker.tsx
+++ b/docs-site/src/examples/ts/weekPicker.tsx
@@ -6,7 +6,7 @@ const WeekPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       dateFormat="I/R"
       locale="en-GB"
       showWeekNumbers
diff --git a/docs-site/src/examples/ts/withPortalById.tsx b/docs-site/src/examples/ts/withPortalById.tsx
index bae86588d5..575aee05b3 100644
--- a/docs-site/src/examples/ts/withPortalById.tsx
+++ b/docs-site/src/examples/ts/withPortalById.tsx
@@ -4,7 +4,7 @@ const WithPortalById = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       withPortal
       portalId="root-portal"
     />
diff --git a/docs-site/src/examples/ts/yearDropdown.tsx b/docs-site/src/examples/ts/yearDropdown.tsx
index 4989459a64..502ec32f1d 100644
--- a/docs-site/src/examples/ts/yearDropdown.tsx
+++ b/docs-site/src/examples/ts/yearDropdown.tsx
@@ -4,7 +4,7 @@ const YearDropdown = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       showYearDropdown
       dateFormatCalendar="MMMM"
       yearDropdownItemNumber={15}
diff --git a/docs-site/src/examples/ts/yearItemNumber.tsx b/docs-site/src/examples/ts/yearItemNumber.tsx
index 3692a69928..deb7992f0d 100644
--- a/docs-site/src/examples/ts/yearItemNumber.tsx
+++ b/docs-site/src/examples/ts/yearItemNumber.tsx
@@ -4,7 +4,7 @@ const YearItemNumber = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       showYearPicker
       dateFormat="yyyy"
       yearItemNumber={9}
diff --git a/docs-site/src/examples/ts/yearPicker.tsx b/docs-site/src/examples/ts/yearPicker.tsx
index fc8d3cf613..c5fd6a7d9c 100644
--- a/docs-site/src/examples/ts/yearPicker.tsx
+++ b/docs-site/src/examples/ts/yearPicker.tsx
@@ -4,7 +4,7 @@ const YearPicker = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       showYearPicker
       dateFormat="yyyy"
     />
diff --git a/docs-site/src/examples/ts/yearSelectDropdown.tsx b/docs-site/src/examples/ts/yearSelectDropdown.tsx
index ddc73013ff..ed1673cf6d 100644
--- a/docs-site/src/examples/ts/yearSelectDropdown.tsx
+++ b/docs-site/src/examples/ts/yearSelectDropdown.tsx
@@ -4,7 +4,7 @@ const YearSelectDropdown = () => {
   return (
     <DatePicker
       selected={selectedDate}
-      onChange={(date: Date | null) => setSelectedDate(date)}
+      onChange={setSelectedDate}
       peekNextMonth
       showMonthDropdown
       showYearDropdown