diff --git a/src/calendar.tsx b/src/calendar.tsx
index 69efadd322..664b35be24 100644
--- a/src/calendar.tsx
+++ b/src/calendar.tsx
@@ -182,7 +182,7 @@ type CalendarProps = React.PropsWithChildren<
       ) => void;
       renderCustomHeader?: (
         props: ReactDatePickerCustomHeaderProps,
-      ) => JSX.Element;
+      ) => React.ReactElement;
       onYearMouseEnter?: YearProps["onYearMouseEnter"];
       onYearMouseLeave?: YearProps["onYearMouseLeave"];
       monthAriaLabelPrefix?: MonthProps["ariaLabelPrefix"];
@@ -459,14 +459,14 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  header = (date: Date = this.state.date): JSX.Element[] => {
+  header = (date: Date = this.state.date): React.ReactElement[] => {
     const startOfWeek = getStartOfWeek(
       date,
       this.props.locale,
       this.props.calendarStartDay,
     );
 
-    const dayNames: JSX.Element[] = [];
+    const dayNames: React.ReactElement[] = [];
     if (this.props.showWeekNumbers) {
       dayNames.push(
         <div key="W" className="react-datepicker__day-name">
@@ -524,7 +524,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     this.setState({ selectingDate: undefined });
   };
 
-  renderPreviousButton = (): JSX.Element | void => {
+  renderPreviousButton = (): React.ReactElement | void => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -643,7 +643,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderNextButton = (): JSX.Element | void => {
+  renderNextButton = (): React.ReactElement | void => {
     if (this.props.renderCustomHeader) {
       return;
     }
@@ -740,7 +740,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderCurrentMonth = (date: Date = this.state.date): JSX.Element => {
+  renderCurrentMonth = (date: Date = this.state.date): React.ReactElement => {
     const classes = ["react-datepicker__current-month"];
 
     if (this.props.showYearDropdown) {
@@ -761,7 +761,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderYearDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showYearDropdown || overrideHide) {
       return;
     }
@@ -778,7 +778,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showMonthDropdown || overrideHide) {
       return;
     }
@@ -794,7 +794,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
 
   renderMonthYearDropdown = (
     overrideHide: boolean = false,
-  ): JSX.Element | undefined => {
+  ): React.ReactElement | undefined => {
     if (!this.props.showMonthYearDropdown || overrideHide) {
       return;
     }
@@ -813,7 +813,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     this.props.setPreSelection && this.props.setPreSelection(getStartOfToday());
   };
 
-  renderTodayButton = (): JSX.Element | undefined => {
+  renderTodayButton = (): React.ReactElement | undefined => {
     if (!this.props.todayButton || this.props.showTimeSelectOnly) {
       return;
     }
@@ -914,7 +914,11 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderYearHeader = ({ monthDate }: { monthDate: Date }): JSX.Element => {
+  renderYearHeader = ({
+    monthDate,
+  }: {
+    monthDate: Date;
+  }): React.ReactElement => {
     const {
       showYearPicker,
       yearItemNumber = Calendar.defaultProps.yearItemNumber,
@@ -936,7 +940,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
   }: {
     monthDate: Date;
     i?: number;
-  }): JSX.Element | null => {
+  }): React.ReactElement | null => {
     const headerArgs = { monthDate, i };
     switch (true) {
       case this.props.renderCustomHeader !== undefined:
@@ -950,12 +954,12 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     }
   };
 
-  renderMonths = (): JSX.Element[] | undefined => {
+  renderMonths = (): React.ReactElement[] | undefined => {
     if (this.props.showTimeSelectOnly || this.props.showYearPicker) {
       return;
     }
 
-    const monthList: JSX.Element[] = [];
+    const monthList: React.ReactElement[] = [];
     const monthsShown =
       this.props.monthsShown ?? Calendar.defaultProps.monthsShown;
     const monthsToSubtract = this.props.showPreviousMonths
@@ -1005,7 +1009,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return monthList;
   };
 
-  renderYears = (): JSX.Element | undefined => {
+  renderYears = (): React.ReactElement | undefined => {
     if (this.props.showTimeSelectOnly) {
       return;
     }
@@ -1029,7 +1033,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderTimeSection = (): JSX.Element | undefined => {
+  renderTimeSection = (): React.ReactElement | undefined => {
     if (
       this.props.showTimeSelect &&
       (this.state.monthContainer || this.props.showTimeSelectOnly)
@@ -1048,7 +1052,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderInputTimeSection = (): JSX.Element | undefined => {
+  renderInputTimeSection = (): React.ReactElement | undefined => {
     const time = this.props.selected
       ? new Date(this.props.selected)
       : undefined;
@@ -1070,7 +1074,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  renderAriaLiveRegion = (): JSX.Element => {
+  renderAriaLiveRegion = (): React.ReactElement => {
     const { startPeriod, endPeriod } = getYearsPeriod(
       this.state.date,
       this.props.yearItemNumber ?? Calendar.defaultProps.yearItemNumber,
@@ -1102,7 +1106,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     );
   };
 
-  renderChildren = (): JSX.Element | undefined => {
+  renderChildren = (): React.ReactElement | undefined => {
     if (this.props.children) {
       return (
         <div className="react-datepicker__children-container">
@@ -1113,7 +1117,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
     return;
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const Container = this.props.container || CalendarContainer;
     return (
       <ClickOutsideWrapper
diff --git a/src/calendar_icon.tsx b/src/calendar_icon.tsx
index f8975004a6..624ba7055f 100644
--- a/src/calendar_icon.tsx
+++ b/src/calendar_icon.tsx
@@ -29,7 +29,7 @@ const CalendarIcon: React.FC<CalendarIconProps> = ({
   icon,
   className = "",
   onClick,
-}: CalendarIconProps): JSX.Element => {
+}: CalendarIconProps): React.ReactElement => {
   const defaultClass = "react-datepicker__calendar-icon";
 
   if (typeof icon === "string") {
diff --git a/src/index.tsx b/src/index.tsx
index 9277d9f2db..594116e338 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1389,7 +1389,7 @@ export default class DatePicker extends Component<
     });
   };
 
-  renderClearButton = (): JSX.Element | null => {
+  renderClearButton = (): React.ReactElement | null => {
     const {
       isClearable,
       disabled,
@@ -1428,7 +1428,7 @@ export default class DatePicker extends Component<
     }
   };
 
-  renderInputContainer(): JSX.Element {
+  renderInputContainer(): React.ReactElement {
     const {
       showIcon,
       icon,
@@ -1472,7 +1472,7 @@ export default class DatePicker extends Component<
     );
   }
 
-  render(): JSX.Element | null {
+  render(): React.ReactElement | null {
     const calendar = this.renderCalendar();
 
     if (this.props.inline) return calendar;
diff --git a/src/input_time.tsx b/src/input_time.tsx
index d0306152e0..67229cd3c0 100644
--- a/src/input_time.tsx
+++ b/src/input_time.tsx
@@ -5,7 +5,7 @@ interface InputTimeProps {
   date?: Date;
   timeString?: string;
   timeInputLabel?: string;
-  customTimeInput?: JSX.Element;
+  customTimeInput?: React.ReactElement;
 }
 
 interface InputTimeState {
diff --git a/src/month_dropdown.tsx b/src/month_dropdown.tsx
index 8a0ed18380..fa5afcd22e 100644
--- a/src/month_dropdown.tsx
+++ b/src/month_dropdown.tsx
@@ -33,16 +33,16 @@ export default class MonthDropdown extends Component<
     dropdownVisible: false,
   };
 
-  renderSelectOptions = (monthNames: string[]): JSX.Element[] =>
-    monthNames.map<JSX.Element>(
-      (m: string, i: number): JSX.Element => (
+  renderSelectOptions = (monthNames: string[]): React.ReactElement[] =>
+    monthNames.map<React.ReactElement>(
+      (m: string, i: number): React.ReactElement => (
         <option key={m} value={i}>
           {m}
         </option>
       ),
     );
 
-  renderSelectMode = (monthNames: string[]): JSX.Element => (
+  renderSelectMode = (monthNames: string[]): React.ReactElement => (
     <select
       value={this.props.month}
       className="react-datepicker__month-select"
@@ -52,7 +52,10 @@ export default class MonthDropdown extends Component<
     </select>
   );
 
-  renderReadView = (visible: boolean, monthNames: string[]): JSX.Element => (
+  renderReadView = (
+    visible: boolean,
+    monthNames: string[],
+  ): React.ReactElement => (
     <div
       key="read"
       style={{ visibility: visible ? "visible" : "hidden" }}
@@ -66,7 +69,7 @@ export default class MonthDropdown extends Component<
     </div>
   );
 
-  renderDropdown = (monthNames: string[]): JSX.Element => (
+  renderDropdown = (monthNames: string[]): React.ReactElement => (
     <MonthDropdownOptions
       key="dropdown"
       {...this.props}
@@ -76,7 +79,7 @@ export default class MonthDropdown extends Component<
     />
   );
 
-  renderScrollMode = (monthNames: string[]): JSX.Element[] => {
+  renderScrollMode = (monthNames: string[]): React.ReactElement[] => {
     const { dropdownVisible } = this.state;
     const result = [this.renderReadView(!dropdownVisible, monthNames)];
     if (dropdownVisible) {
@@ -97,14 +100,14 @@ export default class MonthDropdown extends Component<
       dropdownVisible: !this.state.dropdownVisible,
     });
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const monthNames: string[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(
       this.props.useShortMonthInDropdown
         ? (m: number): string => getMonthShortInLocale(m, this.props.locale)
         : (m: number): string => getMonthInLocale(m, this.props.locale),
     );
 
-    let renderedDropdown: JSX.Element | JSX.Element[];
+    let renderedDropdown: React.ReactElement | React.ReactElement[];
     switch (this.props.dropdownMode) {
       case "scroll":
         renderedDropdown = this.renderScrollMode(monthNames);
diff --git a/src/month_dropdown_options.tsx b/src/month_dropdown_options.tsx
index fd8a270a5b..17af165ab3 100644
--- a/src/month_dropdown_options.tsx
+++ b/src/month_dropdown_options.tsx
@@ -12,9 +12,9 @@ interface MonthDropdownOptionsProps {
 export default class MonthDropdownOptions extends Component<MonthDropdownOptionsProps> {
   isSelectedMonth = (i: number): boolean => this.props.month === i;
 
-  renderOptions = (): JSX.Element[] => {
-    return this.props.monthNames.map<JSX.Element>(
-      (month: string, i: number): JSX.Element => (
+  renderOptions = (): React.ReactElement[] => {
+    return this.props.monthNames.map<React.ReactElement>(
+      (month: string, i: number): React.ReactElement => (
         <div
           className={
             this.isSelectedMonth(i)
@@ -40,7 +40,7 @@ export default class MonthDropdownOptions extends Component<MonthDropdownOptions
 
   handleClickOutside = (): void => this.props.onCancel();
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     return (
       <ClickOutsideWrapper
         className="react-datepicker__month-dropdown"
diff --git a/src/month_year_dropdown.tsx b/src/month_year_dropdown.tsx
index 6367f9dd7d..5f10055e4d 100644
--- a/src/month_year_dropdown.tsx
+++ b/src/month_year_dropdown.tsx
@@ -35,7 +35,7 @@ export default class MonthYearDropdown extends Component<
     dropdownVisible: false,
   };
 
-  renderSelectOptions = (): JSX.Element[] => {
+  renderSelectOptions = (): React.ReactElement[] => {
     let currDate = getStartOfMonth(this.props.minDate);
     const lastDate = getStartOfMonth(this.props.maxDate);
     const options = [];
@@ -58,7 +58,7 @@ export default class MonthYearDropdown extends Component<
     this.onChange(parseInt(event.target.value));
   };
 
-  renderSelectMode = (): JSX.Element => (
+  renderSelectMode = (): React.ReactElement => (
     <select
       value={getTime(getStartOfMonth(this.props.date))}
       className="react-datepicker__month-year-select"
@@ -68,7 +68,7 @@ export default class MonthYearDropdown extends Component<
     </select>
   );
 
-  renderReadView = (visible: boolean): JSX.Element => {
+  renderReadView = (visible: boolean): React.ReactElement => {
     const yearMonth = formatDate(
       this.props.date,
       this.props.dateFormat,
@@ -90,7 +90,7 @@ export default class MonthYearDropdown extends Component<
     );
   };
 
-  renderDropdown = (): JSX.Element => (
+  renderDropdown = (): React.ReactElement => (
     <MonthYearDropdownOptions
       key="dropdown"
       {...this.props}
@@ -99,7 +99,7 @@ export default class MonthYearDropdown extends Component<
     />
   );
 
-  renderScrollMode = (): JSX.Element[] => {
+  renderScrollMode = (): React.ReactElement[] => {
     const { dropdownVisible } = this.state;
     const result = [this.renderReadView(!dropdownVisible)];
     if (dropdownVisible) {
@@ -128,7 +128,7 @@ export default class MonthYearDropdown extends Component<
       dropdownVisible: !this.state.dropdownVisible,
     });
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     let renderedDropdown;
     switch (this.props.dropdownMode) {
       case "scroll":
diff --git a/src/month_year_dropdown_options.tsx b/src/month_year_dropdown_options.tsx
index 615c5cedcb..68d0e574d2 100644
--- a/src/month_year_dropdown_options.tsx
+++ b/src/month_year_dropdown_options.tsx
@@ -58,9 +58,9 @@ export default class MonthYearDropdownOptions extends Component<
     };
   }
 
-  renderOptions = (): JSX.Element[] => {
-    return this.state.monthYearsList.map<JSX.Element>(
-      (monthYear: Date): JSX.Element => {
+  renderOptions = (): React.ReactElement[] => {
+    return this.state.monthYearsList.map<React.ReactElement>(
+      (monthYear: Date): React.ReactElement => {
         const monthYearPoint = getTime(monthYear);
         const isSameMonthYear =
           isSameYear(this.props.date, monthYear) &&
@@ -97,7 +97,7 @@ export default class MonthYearDropdownOptions extends Component<
     this.props.onCancel();
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const dropdownClass = clsx({
       "react-datepicker__month-year-dropdown": true,
       "react-datepicker__month-year-dropdown--scrollable":
diff --git a/src/popper_component.tsx b/src/popper_component.tsx
index 94e1f6c8a1..28ea745e1a 100644
--- a/src/popper_component.tsx
+++ b/src/popper_component.tsx
@@ -36,7 +36,7 @@ export class PopperComponent extends Component<PopperComponentProps> {
     };
   }
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const {
       className,
       wrapperClassName,
@@ -51,7 +51,7 @@ export class PopperComponent extends Component<PopperComponentProps> {
       showArrow,
     } = this.props;
 
-    let popper: JSX.Element | undefined = undefined;
+    let popper: React.ReactElement | undefined = undefined;
 
     if (!hidePopper) {
       const classes = clsx("react-datepicker-popper", className);
diff --git a/src/time.tsx b/src/time.tsx
index 11e30634cd..4e1bb3d513 100644
--- a/src/time.tsx
+++ b/src/time.tsx
@@ -185,7 +185,7 @@ export default class Time extends Component<TimeProps, TimeState> {
     this.props.handleOnKeyDown?.(event);
   };
 
-  renderTimes = (): JSX.Element[] => {
+  renderTimes = (): React.ReactElement[] => {
     let times: Date[] = [];
     const format =
       typeof this.props.format === "string" ? this.props.format : "p";
@@ -228,7 +228,7 @@ export default class Time extends Component<TimeProps, TimeState> {
       return prev;
     }, times[0]);
 
-    return times.map<JSX.Element>((time): JSX.Element => {
+    return times.map<React.ReactElement>((time): React.ReactElement => {
       return (
         <li
           key={time.valueOf()}
@@ -253,7 +253,7 @@ export default class Time extends Component<TimeProps, TimeState> {
     });
   };
 
-  renderTimeCaption = (): JSX.Element => {
+  renderTimeCaption = (): React.ReactElement => {
     if (this.props.showTimeCaption === false) {
       return <></>;
     }
diff --git a/src/week.tsx b/src/week.tsx
index 0027d557a3..a8928699fe 100644
--- a/src/week.tsx
+++ b/src/week.tsx
@@ -134,21 +134,25 @@ export default class Week extends Component<WeekProps> {
       );
     }
     return days.concat(
-      [0, 1, 2, 3, 4, 5, 6].map<JSX.Element>((offset: number): JSX.Element => {
-        const day = addDays(startOfWeek, offset);
-        return (
-          <Day
-            {...Week.defaultProps}
-            {...this.props}
-            ariaLabelPrefixWhenEnabled={this.props.chooseDayAriaLabelPrefix}
-            ariaLabelPrefixWhenDisabled={this.props.disabledDayAriaLabelPrefix}
-            key={day.valueOf()}
-            day={day}
-            onClick={this.handleDayClick.bind(this, day)}
-            onMouseEnter={this.handleDayMouseEnter.bind(this, day)}
-          />
-        );
-      }),
+      [0, 1, 2, 3, 4, 5, 6].map<React.ReactElement>(
+        (offset: number): React.ReactElement => {
+          const day = addDays(startOfWeek, offset);
+          return (
+            <Day
+              {...Week.defaultProps}
+              {...this.props}
+              ariaLabelPrefixWhenEnabled={this.props.chooseDayAriaLabelPrefix}
+              ariaLabelPrefixWhenDisabled={
+                this.props.disabledDayAriaLabelPrefix
+              }
+              key={day.valueOf()}
+              day={day}
+              onClick={this.handleDayClick.bind(this, day)}
+              onMouseEnter={this.handleDayMouseEnter.bind(this, day)}
+            />
+          );
+        },
+      ),
     );
   };
 
@@ -164,7 +168,7 @@ export default class Week extends Component<WeekProps> {
     !isSameDay(this.startOfWeek(), this.props.selected) &&
     isSameDay(this.startOfWeek(), this.props.preSelection);
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const weekNumberClasses = {
       "react-datepicker__week": true,
       "react-datepicker__week--selected": isSameDay(
diff --git a/src/week_number.tsx b/src/week_number.tsx
index e244916e12..948d40be68 100644
--- a/src/week_number.tsx
+++ b/src/week_number.tsx
@@ -108,7 +108,7 @@ export default class WeekNumber extends Component<WeekNumberProps> {
       this.weekNumberEl.current.focus({ preventScroll: true });
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     const {
       weekNumber,
       ariaLabelPrefix = WeekNumber.defaultProps.ariaLabelPrefix,
diff --git a/src/with_floating.tsx b/src/with_floating.tsx
index bd6806ea5e..8efed00b28 100644
--- a/src/with_floating.tsx
+++ b/src/with_floating.tsx
@@ -45,7 +45,7 @@ export default function withFloating<T extends FloatingProps>(
   Component: React.ComponentType<T>,
 ) {
   type R = Omit<T, "popperProps"> & WithFloatingProps;
-  const WithFloating: React.FC<R> = (props): JSX.Element => {
+  const WithFloating: React.FC<R> = (props): React.ReactElement => {
     const hidePopper: boolean =
       typeof props.hidePopper === "boolean" ? props.hidePopper : true;
     const arrowRef: React.RefObject<HTMLElement> = useRef(null);
diff --git a/src/year_dropdown.tsx b/src/year_dropdown.tsx
index f6bbd804f1..ac5e3da6bf 100644
--- a/src/year_dropdown.tsx
+++ b/src/year_dropdown.tsx
@@ -28,7 +28,7 @@ export default class YearDropdown extends Component<
     dropdownVisible: false,
   };
 
-  renderSelectOptions = (): JSX.Element[] => {
+  renderSelectOptions = (): React.ReactElement[] => {
     const minYear: number = this.props.minDate
       ? getYear(this.props.minDate)
       : 1900;
@@ -36,7 +36,7 @@ export default class YearDropdown extends Component<
       ? getYear(this.props.maxDate)
       : 2100;
 
-    const options: JSX.Element[] = [];
+    const options: React.ReactElement[] = [];
     for (let i = minYear; i <= maxYear; i++) {
       options.push(
         <option key={i} value={i}>
@@ -51,7 +51,7 @@ export default class YearDropdown extends Component<
     this.onChange(parseInt(event.target.value));
   };
 
-  renderSelectMode = (): JSX.Element => (
+  renderSelectMode = (): React.ReactElement => (
     <select
       value={this.props.year}
       className="react-datepicker__year-select"
@@ -61,7 +61,7 @@ export default class YearDropdown extends Component<
     </select>
   );
 
-  renderReadView = (visible: boolean): JSX.Element => (
+  renderReadView = (visible: boolean): React.ReactElement => (
     <div
       key="read"
       style={{ visibility: visible ? "visible" : "hidden" }}
@@ -77,7 +77,7 @@ export default class YearDropdown extends Component<
     </div>
   );
 
-  renderDropdown = (): JSX.Element => (
+  renderDropdown = (): React.ReactElement => (
     <YearDropdownOptions
       key="dropdown"
       {...this.props}
@@ -86,7 +86,7 @@ export default class YearDropdown extends Component<
     />
   );
 
-  renderScrollMode = (): JSX.Element[] => {
+  renderScrollMode = (): React.ReactElement[] => {
     const { dropdownVisible } = this.state;
     const result = [this.renderReadView(!dropdownVisible)];
     if (dropdownVisible) {
@@ -130,7 +130,7 @@ export default class YearDropdown extends Component<
     this.props.setOpen?.(true);
   };
 
-  render(): JSX.Element {
+  render(): React.ReactElement {
     let renderedDropdown;
     switch (this.props.dropdownMode) {
       case "scroll":
diff --git a/src/year_dropdown_options.tsx b/src/year_dropdown_options.tsx
index dff93e1e0e..cf0c7cc98f 100644
--- a/src/year_dropdown_options.tsx
+++ b/src/year_dropdown_options.tsx
@@ -89,7 +89,7 @@ export default class YearDropdownOptions extends Component<
 
   dropdownRef: React.RefObject<HTMLDivElement>;
 
-  renderOptions = (): JSX.Element[] => {
+  renderOptions = (): React.ReactElement[] => {
     const selectedYear = this.props.year;
     const options = this.state.yearsList.map((year) => (
       <div