fix(types): PropsWithChildren not compatible with React 17 (#1947)

Co-authored-by: Binh Van Phan <[email protected]>

src/components/Months/Months.tsx

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 
 /** The props for the {@link Months} component. */
-export type MonthsProps = PropsWithChildren;
+export type MonthsProps = { children: ReactNode };
 
 /**
  * Render the wrapper for the mont grids.

src/contexts/Focus/FocusContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, PropsWithChildren, useContext, useState } from 'react';
+import { createContext, ReactNode, useContext, useState } from 'react';
 
 import { isSameDay } from 'date-fns';
 
@@ -54,7 +54,7 @@ export const FocusContext = createContext<FocusContextValue | undefined>(
   undefined
 );
 
-export type FocusProviderProps = PropsWithChildren;
+export type FocusProviderProps = { children: ReactNode };
 
 /** The provider for the {@link FocusContext}. */
 export function FocusProvider(props: FocusProviderProps): JSX.Element {

src/contexts/Modifiers/ModifiersContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, PropsWithChildren, useContext } from 'react';
+import { createContext, useContext, ReactNode } from 'react';
 
 import { useDayPicker } from 'contexts/DayPicker';
 import { useSelectMultiple } from 'contexts/SelectMultiple';
@@ -11,7 +11,7 @@ import { getInternalModifiers } from './utils/getInternalModifiers';
 /** The Modifiers context store the modifiers used in DayPicker. To access the value of this context, use {@link useModifiers}. */
 export const ModifiersContext = createContext<Modifiers | undefined>(undefined);
 
-export type ModifiersProviderProps = PropsWithChildren;
+export type ModifiersProviderProps = { children: ReactNode };
 
 /** Provide the value for the {@link ModifiersContext}. */
 export function ModifiersProvider(props: ModifiersProviderProps): JSX.Element {

src/contexts/SelectRange/SelectRangeContext.tsx

@@ -44,9 +44,9 @@ export const SelectRangeContext = createContext<
   SelectRangeContextValue | undefined
 >(undefined);
 
-type SelectRangeProviderProps = {
+type SelectRangeProviderProps = PropsWithChildren<{
   initialProps: DayPickerBase;
-} & PropsWithChildren;
+}>;
 
 /** Provides the values for the {@link SelectRangeProvider}. */
 export function SelectRangeProvider(
@@ -76,9 +76,9 @@ export function SelectRangeProvider(
   );
 }
 
-type SelectRangeProviderInternalProps = {
+type SelectRangeProviderInternalProps = PropsWithChildren<{
   initialProps: DayPickerRangeProps;
-} & PropsWithChildren;
+}>;
 
 export function SelectRangeProviderInternal({
   initialProps,