diff --git a/.changeset/five-doors-hide.md b/.changeset/five-doors-hide.md
new file mode 100644
index 00000000000..c6a079a66d0
--- /dev/null
+++ b/.changeset/five-doors-hide.md
@@ -0,0 +1,13 @@
+---
+'@aws-amplify/ui-react-core-notifications': patch
+'@aws-amplify/ui-react-notifications': patch
+'@aws-amplify/ui-react-liveness': patch
+'@aws-amplify/ui-react-storage': patch
+'@aws-amplify/ui-react-native': patch
+'@aws-amplify/ui-react-core': patch
+'@aws-amplify/ui-react-geo': patch
+'@aws-amplify/ui-react-ai': patch
+'@aws-amplify/ui-react': patch
+---
+
+revert changes introduced for React 19 support
diff --git a/.github/workflows/reusable-build-system-test.yml b/.github/workflows/reusable-build-system-test.yml
index bb0d0bc6a34..463fca43d31 100644
--- a/.github/workflows/reusable-build-system-test.yml
+++ b/.github/workflows/reusable-build-system-test.yml
@@ -28,7 +28,9 @@ jobs:
       fail-fast: false
       matrix:
         framework: [react]
-        framework-version: [latest]
+        # temporarily pointing all react tests to v18
+        # framework-version: [latest]
+        framework-version: [18]
         build-tool: [next, vite]
         build-tool-version: [latest]
         pkg-manager: [npm]
diff --git a/build-system-tests/templates/components/react-native/cli/App.tsx b/build-system-tests/templates/components/react-native/cli/App.tsx
index 3fa7f4a72dd..6142710083f 100644
--- a/build-system-tests/templates/components/react-native/cli/App.tsx
+++ b/build-system-tests/templates/components/react-native/cli/App.tsx
@@ -23,7 +23,7 @@ function SignOutButton() {
   return <Button title="Sign Out" onPress={signOut} />;
 }
 
-function App(): React.JSX.Element {
+function App(): JSX.Element {
   return (
     <>
       <Authenticator.Provider>
diff --git a/docs/.eslintrc.json b/docs/.eslintrc.json
index 93dc6bd2d60..b039f72a9c7 100644
--- a/docs/.eslintrc.json
+++ b/docs/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["next", "next/core-web-vitals"],
+  "extends": "next/core-web-vitals",
   "rules": {
     "react-hooks/exhaustive-deps": "error" // override next eslint default
   }
diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
index d07bed89456..ba55feddf0e 100644
--- a/docs/__tests__/__snapshots__/props-table.test.ts.snap
+++ b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -2970,7 +2970,7 @@ exports[`Props Table 1`] = `
                     },
                     "children": {
                         "name": "children",
-                        "type": "(item: Item, index: number) => React.JSX.Element",
+                        "type": "(item: Item, index: number) => JSX.Element",
                         "description": "The component to be repeated\\nSame interface as Array.prototype.map",
                         "category": "CollectionChildren",
                         "isOptional": false
@@ -7712,10 +7712,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+                    "placeholder": {
+                        "name": "placeholder",
+                        "type": "string | undefined",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -7747,13 +7747,6 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "name": {
-                        "name": "name",
-                        "type": "string | undefined",
-                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
-                        "category": "BaseInputProps",
-                        "isOptional": true
-                    },
                     "autoComplete": {
                         "name": "autoComplete",
                         "type": "string | undefined",
@@ -7775,6 +7768,13 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+                        "category": "BaseInputProps",
+                        "isOptional": true
+                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -7789,10 +7789,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "placeholder": {
-                        "name": "placeholder",
+                    "name": {
+                        "name": "name",
                         "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
+                        "description": "Name of the field. Submitted with the form as part of a name/value pair.",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8394,10 +8394,10 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
-                    "enterKeyHint": {
-                        "name": "enterKeyHint",
-                        "type": "EnterKeyHint | undefined",
-                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+                    "placeholder": {
+                        "name": "placeholder",
+                        "type": "string | undefined",
+                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
@@ -8436,6 +8436,13 @@ exports[`Props Table 1`] = `
                         "category": "BaseInputProps",
                         "isOptional": true
                     },
+                    "enterKeyHint": {
+                        "name": "enterKeyHint",
+                        "type": "EnterKeyHint | undefined",
+                        "description": "Defines what action label (or icon) to present for the enter key on virtual keyboards. See: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint)",
+                        "category": "BaseInputProps",
+                        "isOptional": true
+                    },
                     "isReadOnly": {
                         "name": "isReadOnly",
                         "type": "boolean | undefined",
@@ -8449,13 +8456,6 @@ exports[`Props Table 1`] = `
                         "description": "Whether field should be marked required.",
                         "category": "BaseInputProps",
                         "isOptional": true
-                    },
-                    "placeholder": {
-                        "name": "placeholder",
-                        "type": "string | undefined",
-                        "description": "Placeholder text shown when field is empty Accessibility tip: avoid putting important instructions for filling out the TextField in the placeholder. Use descriptiveText for important instructions.",
-                        "category": "BaseInputProps",
-                        "isOptional": true
                     }
                 }
             },
@@ -8936,7 +8936,7 @@ exports[`Props Table 1`] = `
                     },
                     "emptyIcon": {
                         "name": "emptyIcon",
-                        "type": "React.JSX.Element | undefined",
+                        "type": "JSX.Element | undefined",
                         "description": "This will override which icon to use as the empty icon. This will only\\noverride the empty icon an will create a rating component that uses\\ndifferent icons for filled and empty icons.",
                         "category": "RatingOptions",
                         "isOptional": true
@@ -8950,7 +8950,7 @@ exports[`Props Table 1`] = `
                     },
                     "icon": {
                         "name": "icon",
-                        "type": "React.JSX.Element | undefined",
+                        "type": "JSX.Element | undefined",
                         "description": "This will override which icon to use. This will override both\\nthe filled and empty icon values unless an empty icon is specified\\nwith the emptyIcon prop\\nDefault is <IconStar />",
                         "category": "RatingOptions",
                         "isOptional": true
diff --git a/docs/package.json b/docs/package.json
index d56fce9ee74..345a1f20e34 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -20,8 +20,7 @@
     "postbuild:sitemap": "node --require esbuild-register ./scripts/generate-sitemap-robotstxt.ts",
     "start": "next start",
     "test": "jest",
-    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts",
-    "typecheck": "tsc --noEmit"
+    "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
     "@aws-amplify/ui-react": "6.8.0",
@@ -39,9 +38,9 @@
     "next-plugin-preval": "^1.2.1",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",
-    "react": "^18.3.0",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.0.4",
-    "react-dom": "^18.3.0",
+    "react-dom": "18.2.0",
     "react-icons": "^4.3.1",
     "react-live": "^4.1.8",
     "rehype": "^11.0.0",
diff --git a/docs/src/components/CodeHighlight.tsx b/docs/src/components/CodeHighlight.tsx
index 761127161c8..0cbf91d0923 100644
--- a/docs/src/components/CodeHighlight.tsx
+++ b/docs/src/components/CodeHighlight.tsx
@@ -43,9 +43,17 @@ export const CodeHighlight = ({
           >
             <View as="code" className={classNames(className, prismClassName)}>
               {tokens.map((line, i) => (
-                <View {...getLineProps({ line })} className="code-line" key={i}>
+                <View
+                  className="code-line"
+                  key={i}
+                  {...getLineProps({ line, key: i })}
+                >
                   {line.map((token, key) => (
-                    <Text {...getTokenProps({ token })} as="span" key={key} />
+                    <Text
+                      as="span"
+                      key={key}
+                      {...getTokenProps({ token, key })}
+                    />
                   ))}
                 </View>
               ))}
diff --git a/docs/src/components/ExpoSnack.tsx b/docs/src/components/ExpoSnack.tsx
index 26f3f892f04..97dea927d67 100644
--- a/docs/src/components/ExpoSnack.tsx
+++ b/docs/src/components/ExpoSnack.tsx
@@ -65,7 +65,7 @@ export const ExpoSnack = (options: SnackOptions) => {
   // We need a unique ID b/c we need to listen to window events that the iframe
   // will send and it sends the iframe id
   const id = React.useRef(Math.random().toString(36).substring(2, 10));
-  const ref = React.useRef<HTMLIFrameElement>(undefined);
+  const ref = React.useRef<HTMLIFrameElement>();
   const [theme, setTheme] = React.useState('light');
 
   React.useLayoutEffect(() => {
diff --git a/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx b/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
index 6bc39873ae2..ff7c68c0423 100644
--- a/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
+++ b/docs/src/components/Layout/GlobalNav/components/DesktopNav.tsx
@@ -12,7 +12,7 @@ interface DesktopNavProps {
   navLinksContainerRef: MutableRefObject<HTMLDivElement>;
   navLinksRightRef: MutableRefObject<HTMLDivElement>;
   hasSecondaryNav: boolean;
-  secondaryNavDesktop?: React.JSX.Element;
+  secondaryNavDesktop?: JSX.Element;
 }
 
 export function DesktopNav({
diff --git a/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx b/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
index 33506fbd8e2..a359f9ac93e 100644
--- a/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
+++ b/docs/src/components/Layout/GlobalNav/components/NavMenuLink.tsx
@@ -15,7 +15,7 @@ export function NavMenuLink({
   setShowGlobalNav?: Dispatch<SetStateAction<boolean>>;
 }) {
   const label: string = navMenuItem.label;
-  const linkContent: React.JSX.Element =
+  const linkContent: JSX.Element =
     navMenuItem.type === 'EXTERNAL' ? (
       <ExternalLink>{label}</ExternalLink>
     ) : (
diff --git a/docs/src/components/propsTable/PropsTableBody.tsx b/docs/src/components/propsTable/PropsTableBody.tsx
index 359a0328d69..56484286b1d 100644
--- a/docs/src/components/propsTable/PropsTableBody.tsx
+++ b/docs/src/components/propsTable/PropsTableBody.tsx
@@ -7,7 +7,7 @@ import { Property } from '../../../scripts/types/catalog';
 export const PropsTableBody = ([
   propName,
   { name, type, description, isOptional },
-]: [string, Property]): React.JSX.Element => {
+]: [string, Property]): JSX.Element => {
   return (
     <TableRow key={name}>
       <ResponsiveTableCell label="Name">
diff --git a/docs/src/components/propsTable/PropsTableExpander.tsx b/docs/src/components/propsTable/PropsTableExpander.tsx
index b09aa1cf400..353d0771295 100644
--- a/docs/src/components/propsTable/PropsTableExpander.tsx
+++ b/docs/src/components/propsTable/PropsTableExpander.tsx
@@ -10,9 +10,7 @@ export function PropsTableExpander({
 }: {
   propsSortedByCategory: SortedPropertiesByCategory;
 }) {
-  const expanderItem = (
-    categoryProperty: CategoryProperty
-  ): React.JSX.Element => {
+  const expanderItem = (categoryProperty: CategoryProperty): JSX.Element => {
     const title = Object.keys(categoryProperty)[0];
     return (
       <Accordion.Item key={title} value={title}>
diff --git a/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx b/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
index 7ac0766797f..991817f44ac 100644
--- a/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
+++ b/docs/src/pages/[platform]/components/alert/AlertPropControls.tsx
@@ -19,7 +19,7 @@ export interface AlertPropControlsProps extends AlertProps {
 }
 
 interface AlertPropControlsInterface {
-  (props: AlertPropControlsProps): React.JSX.Element;
+  (props: AlertPropControlsProps): JSX.Element;
 }
 
 export const AlertPropControls: AlertPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx b/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
index 66eedc75234..6717c5685b5 100644
--- a/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
+++ b/docs/src/pages/[platform]/components/autocomplete/AutocompletePropControls.tsx
@@ -28,7 +28,7 @@ export interface AutocompletePropControlsProps extends AutocompleteProps {
 }
 
 interface AutocompletePropControlsInterface {
-  (props: AutocompletePropControlsProps): React.JSX.Element;
+  (props: AutocompletePropControlsProps): JSX.Element;
 }
 
 export const AutocompletePropControls: AutocompletePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx b/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
index 4da13db2af0..49fc5c749d7 100644
--- a/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
+++ b/docs/src/pages/[platform]/components/avatar/AvatarPropControls.tsx
@@ -16,7 +16,7 @@ export interface AvatarPropControlsProps extends AvatarProps {
 }
 
 interface AvatarPropControlsInterface {
-  (props: AvatarPropControlsProps): React.JSX.Element;
+  (props: AvatarPropControlsProps): JSX.Element;
 }
 
 export const AvatarPropControls: AvatarPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx b/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
index 174355a225b..5a939d790e1 100644
--- a/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
+++ b/docs/src/pages/[platform]/components/badge/BadgePropControls.tsx
@@ -14,7 +14,7 @@ export interface BadgePropControlsProps extends BadgeProps {
 }
 
 interface BadgePropControlsInterface {
-  (props: BadgePropControlsProps): React.JSX.Element;
+  (props: BadgePropControlsProps): JSX.Element;
 }
 
 export const BadgePropControls: BadgePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx b/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
index 96dd79ae898..87e69570d2f 100644
--- a/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/checkboxfield/CheckboxFieldPropControls.tsx
@@ -26,7 +26,7 @@ export interface CheckboxFieldPropControlsProps extends CheckboxFieldProps {
 }
 
 interface CheckboxFieldPropControlsInterface {
-  (props: CheckboxFieldPropControlsProps): React.JSX.Element;
+  (props: CheckboxFieldPropControlsProps): JSX.Element;
 }
 
 export const CheckboxFieldPropControls: CheckboxFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx b/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
index 1be0f27d6ff..3d7cc884356 100644
--- a/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
+++ b/docs/src/pages/[platform]/components/collection/CollectionPropControls.tsx
@@ -18,7 +18,7 @@ export type CollectionPropControlsProps = Omit<
   };
 
 interface CollectionPropControlsInterface {
-  (props: CollectionPropControlsProps): React.JSX.Element;
+  (props: CollectionPropControlsProps): JSX.Element;
 }
 
 export const CollectionPropControls: CollectionPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx b/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
index 1c5966590da..d2fefb2d03d 100644
--- a/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
+++ b/docs/src/pages/[platform]/components/divider/DividerPropControls.tsx
@@ -15,7 +15,7 @@ export interface DividerPropControlsProps extends DividerOptions {
 }
 
 interface DividerPropControlsInterface {
-  (props: DividerPropControlsProps): React.JSX.Element;
+  (props: DividerPropControlsProps): JSX.Element;
 }
 
 export const DividerPropControls: DividerPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx b/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
index 746bfce2ba1..a127bfc40ef 100644
--- a/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
+++ b/docs/src/pages/[platform]/components/fieldset/FieldsetPropControls.tsx
@@ -25,7 +25,7 @@ export interface FieldsetPropControlsProps extends FieldsetProps {
 }
 
 interface FieldsetPropControlsInterface {
-  (props: FieldsetPropControlsProps): React.JSX.Element;
+  (props: FieldsetPropControlsProps): JSX.Element;
 }
 
 export const FieldsetPropControls: FieldsetPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx b/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
index 7a5e90f918a..3ce0d18ca04 100644
--- a/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
+++ b/docs/src/pages/[platform]/components/flex/FlexPropControls.tsx
@@ -15,7 +15,7 @@ export interface FlexPropControlsProps extends FlexProps {
 }
 
 interface FlexPropControlsInterface {
-  (props: FlexPropControlsProps): React.JSX.Element;
+  (props: FlexPropControlsProps): JSX.Element;
 }
 
 export const FlexPropControls: FlexPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
index a2c74b63cda..bfa380dc9bb 100644
--- a/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
+++ b/docs/src/pages/[platform]/components/grid/GridContainerPropControls.tsx
@@ -22,7 +22,7 @@ export interface GridContainerPropControlsProps
 }
 
 interface GridContainerPropControls {
-  (props: GridContainerPropControlsProps): React.JSX.Element;
+  (props: GridContainerPropControlsProps): JSX.Element;
 }
 
 export const GridContainerPropControls: GridContainerPropControls = ({
diff --git a/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx b/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
index 03be45e60d5..86858e5a6c0 100644
--- a/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
+++ b/docs/src/pages/[platform]/components/grid/GridItemPropControls.tsx
@@ -21,7 +21,7 @@ export interface GridItemPropControlsProps extends GridItemStyleProps {
 }
 
 interface GridItemPropControls {
-  (props: GridItemPropControlsProps): React.JSX.Element;
+  (props: GridItemPropControlsProps): JSX.Element;
 }
 
 export const GridItemPropControls: GridItemPropControls = ({
diff --git a/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx b/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
index f41dd1d21e4..f37402ae1d3 100644
--- a/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
+++ b/docs/src/pages/[platform]/components/heading/HeadingPropControls.tsx
@@ -16,7 +16,7 @@ interface HeadingPropControlsProps extends HeadingProps {
 }
 
 interface HeadingPropControlsInterface {
-  (props: HeadingPropControlsProps): React.JSX.Element;
+  (props: HeadingPropControlsProps): JSX.Element;
 }
 
 export const HeadingPropControls: HeadingPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx b/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
index 02854f82360..612f73b5b1a 100644
--- a/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
+++ b/docs/src/pages/[platform]/components/highlightmatch/HighlightMatchPropControls.tsx
@@ -9,7 +9,7 @@ export interface HighlightMatchPropControlsProps extends HighlightMatchProps {
 }
 
 interface HighlightMatchPropControlsInterface {
-  (props: HighlightMatchPropControlsProps): React.JSX.Element;
+  (props: HighlightMatchPropControlsProps): JSX.Element;
 }
 
 export const HighlightMatchPropControls: HighlightMatchPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/icon/IconPropControls.tsx b/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
index a1097176f64..f6d6d2b834e 100644
--- a/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
+++ b/docs/src/pages/[platform]/components/icon/IconPropControls.tsx
@@ -11,7 +11,7 @@ export interface IconPropControlsProps extends IconProps {
 }
 
 interface IconPropControlsInterface {
-  (props: IconPropControlsProps): React.JSX.Element;
+  (props: IconPropControlsProps): JSX.Element;
 }
 
 export const IconPropControls: IconPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/image/ImagePropControls.tsx b/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
index 547518f75ea..04d5f81fd92 100644
--- a/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
+++ b/docs/src/pages/[platform]/components/image/ImagePropControls.tsx
@@ -28,7 +28,7 @@ export interface ImagePropControlsProps extends ImageOptions {
 }
 
 interface ImagePropControlsInterface {
-  (props: ImagePropControlsProps): React.JSX.Element;
+  (props: ImagePropControlsProps): JSX.Element;
 }
 
 export const ImagePropControls: ImagePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/input/InputPropControls.tsx b/docs/src/pages/[platform]/components/input/InputPropControls.tsx
index 7685a31bcb5..7f86e6ea8dd 100644
--- a/docs/src/pages/[platform]/components/input/InputPropControls.tsx
+++ b/docs/src/pages/[platform]/components/input/InputPropControls.tsx
@@ -20,7 +20,7 @@ export interface InputPropControlsProps extends InputProps {
 }
 
 interface InputPropControlsInterface {
-  (props: InputPropControlsProps): React.JSX.Element;
+  (props: InputPropControlsProps): JSX.Element;
 }
 
 export const InputPropControls: InputPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/link/LinkPropControls.tsx b/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
index 4e3b705b239..7d90fc69aa6 100644
--- a/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
+++ b/docs/src/pages/[platform]/components/link/LinkPropControls.tsx
@@ -17,7 +17,7 @@ export interface LinkPropControlsProps extends LinkProps {
 }
 
 interface LinkPropControlsInterface {
-  (props: LinkPropControlsProps): React.JSX.Element;
+  (props: LinkPropControlsProps): JSX.Element;
 }
 
 export const LinkPropControls: LinkPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx b/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
index 6cb91df4160..f1eaa0c5bdd 100644
--- a/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
+++ b/docs/src/pages/[platform]/components/menu/MenuPropControls.tsx
@@ -7,7 +7,7 @@ export interface MenuPropControlsProps extends MenuProps {
 }
 
 interface MenuPropControlsInterface {
-  (props: MenuPropControlsProps): React.JSX.Element;
+  (props: MenuPropControlsProps): JSX.Element;
 }
 
 export const MenuPropControls: MenuPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/message/MessagePropControls.tsx b/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
index 3bdd701edc7..db02c3cfd25 100644
--- a/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
+++ b/docs/src/pages/[platform]/components/message/MessagePropControls.tsx
@@ -24,7 +24,7 @@ export interface MessagePropControlsProps extends MessageProps {
 }
 
 interface MessagePropControlsInterface {
-  (props: MessagePropControlsProps): React.JSX.Element;
+  (props: MessagePropControlsProps): JSX.Element;
 }
 
 export const MessagePropControls: MessagePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx b/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
index e1a0540a76e..7c25252d1a8 100644
--- a/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
+++ b/docs/src/pages/[platform]/components/pagination/PaginationPropControls.tsx
@@ -24,7 +24,7 @@ export interface PaginationPropControlsProps extends PaginationProps {
 }
 
 interface PaginationPropControlsInterface {
-  (props: PaginationPropControlsProps): React.JSX.Element;
+  (props: PaginationPropControlsProps): JSX.Element;
 }
 
 export const PaginationPropControls: PaginationPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx b/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
index d329f6aa031..c372ab619d6 100644
--- a/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/passwordfield/passwordFieldPropControls.tsx
@@ -50,7 +50,7 @@ export interface PasswordFieldControlsProps extends PasswordFieldProps {
 }
 
 interface PasswordFieldPropControlsInterface {
-  (props: PasswordFieldControlsProps): React.JSX.Element;
+  (props: PasswordFieldControlsProps): JSX.Element;
 }
 
 export const PasswordFieldPropControls: PasswordFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx b/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
index d5aba54933a..2dd87fd1764 100644
--- a/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/phonenumberfield/PhoneNumberFieldPropControls.tsx
@@ -45,7 +45,7 @@ export type PhoneNumberFieldPropControlsProps = PhoneNumberFieldProps & {
 };
 
 interface PhoneNumberFieldPropControlsInterface {
-  (props: PhoneNumberFieldPropControlsProps): React.JSX.Element;
+  (props: PhoneNumberFieldPropControlsProps): JSX.Element;
 }
 
 export const PhoneNumberFieldPropControls: PhoneNumberFieldPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx b/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
index 02fd364608b..e2990560176 100644
--- a/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/radiogroupfield/RadioGroupFieldPropControls.tsx
@@ -27,7 +27,7 @@ export interface RadioGroupFieldPropControlsProps extends RadioGroupFieldProps {
 }
 
 interface RadioGroupFieldPropControlsInterface {
-  (props: RadioGroupFieldPropControlsProps): React.JSX.Element;
+  (props: RadioGroupFieldPropControlsProps): JSX.Element;
 }
 
 export const RadioGroupFieldPropControls: RadioGroupFieldPropControlsInterface =
diff --git a/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx b/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
index f375c833d69..bb7b6fbbd2f 100644
--- a/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
+++ b/docs/src/pages/[platform]/components/rating/RatingPropControls.tsx
@@ -17,7 +17,7 @@ export interface RatingPropControlsProps extends RatingProps {
 }
 
 interface RatingPropControlsInterface {
-  (props: RatingPropControlsProps): React.JSX.Element;
+  (props: RatingPropControlsProps): JSX.Element;
 }
 
 export const RatingPropControls: RatingPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx b/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
index 2dbc2ab119d..7e36bb07a59 100644
--- a/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/searchfield/SearchFieldPropControls.tsx
@@ -31,7 +31,7 @@ export interface SearchFieldPropControlsProps extends SearchFieldProps {
 }
 
 interface SearchFieldPropControlsInterface {
-  (props: SearchFieldPropControlsProps): React.JSX.Element;
+  (props: SearchFieldPropControlsProps): JSX.Element;
 }
 
 export const SearchFieldPropControls: SearchFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
index 759cc60db02..b86b4f6cd8b 100644
--- a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
@@ -38,7 +38,7 @@ export interface SelectFieldPropControlsProps extends SelectFieldProps {
 }
 
 interface SelectFieldPropControlsInterface {
-  (props: SelectFieldPropControlsProps): React.JSX.Element;
+  (props: SelectFieldPropControlsProps): JSX.Element;
 }
 
 export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/shared/StylePropControls.tsx b/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
index 78c44f2ab57..2b56ca39cb3 100644
--- a/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
+++ b/docs/src/pages/[platform]/components/shared/StylePropControls.tsx
@@ -33,7 +33,7 @@ export interface StylePropControlsProps extends BaseStyleProps {
 }
 
 interface StylePropControlsInterface {
-  (props: StylePropControlsProps): React.JSX.Element;
+  (props: StylePropControlsProps): JSX.Element;
 }
 
 export const StylePropControls: StylePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx b/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
index 3f672a9e02b..40dd171a6d9 100644
--- a/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/sliderfield/SliderFieldPropControls.tsx
@@ -43,7 +43,7 @@ export interface SliderFieldPropControlsProps extends SliderFieldProps {
 }
 
 interface SliderFieldPropControlsInterface {
-  (props: SliderFieldPropControlsProps): React.JSX.Element;
+  (props: SliderFieldPropControlsProps): JSX.Element;
 }
 
 export const SliderFieldPropControls: SliderFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx b/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
index f102217f608..96ff215aadf 100644
--- a/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
+++ b/docs/src/pages/[platform]/components/switchfield/SwitchPropControls.tsx
@@ -32,7 +32,7 @@ export interface SwitchPropControlsProps extends SwitchFieldProps {
 }
 
 interface SwitchPropControlsInterface {
-  (props: SwitchPropControlsProps): React.JSX.Element;
+  (props: SwitchPropControlsProps): JSX.Element;
 }
 
 export const SwitchPropControls: SwitchPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/table/TablePropControls.tsx b/docs/src/pages/[platform]/components/table/TablePropControls.tsx
index c6781ba756e..445a5737bd7 100644
--- a/docs/src/pages/[platform]/components/table/TablePropControls.tsx
+++ b/docs/src/pages/[platform]/components/table/TablePropControls.tsx
@@ -18,7 +18,7 @@ export interface TablePropControlsProps extends TableProps {
 }
 
 interface TablePropControlsInterface {
-  (props: TablePropControlsProps): React.JSX.Element;
+  (props: TablePropControlsProps): JSX.Element;
 }
 
 export const TablePropControls: TablePropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx b/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
index bba0c596fcc..594a27c27a7 100644
--- a/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
+++ b/docs/src/pages/[platform]/components/tabs/TabsPropControls.tsx
@@ -12,7 +12,7 @@ export interface TabsPropControlsProps extends TabsProps {
 }
 
 interface TabsPropControlsInterface {
-  (props: TabsPropControlsProps): React.JSX.Element;
+  (props: TabsPropControlsProps): JSX.Element;
 }
 
 export const TabsPropControls: TabsPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/text/TextPropControls.tsx b/docs/src/pages/[platform]/components/text/TextPropControls.tsx
index a36dc4d287b..c6318e68f21 100644
--- a/docs/src/pages/[platform]/components/text/TextPropControls.tsx
+++ b/docs/src/pages/[platform]/components/text/TextPropControls.tsx
@@ -29,7 +29,7 @@ export interface TextPropControlsProps extends TextProps {
 }
 
 interface TextPropControlsInterface {
-  (props: TextPropControlsProps): React.JSX.Element;
+  (props: TextPropControlsProps): JSX.Element;
 }
 
 export const TextPropControls: TextPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx b/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
index 115df22f8a2..08bff3cab53 100644
--- a/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/textareafield/TextAreaFieldPropControls.tsx
@@ -47,7 +47,7 @@ export interface TextAreaFieldControlsProps extends BaseTextAreaFieldProps {
 }
 
 interface TextAreaFieldControlsInterface {
-  (props: TextAreaFieldControlsProps): React.JSX.Element;
+  (props: TextAreaFieldControlsProps): JSX.Element;
 }
 
 export const TextAreaFieldPropControls: TextAreaFieldControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx b/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
index 5ee88978a37..7f744672cd7 100644
--- a/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
+++ b/docs/src/pages/[platform]/components/textfield/TextFieldPropControls.tsx
@@ -34,7 +34,7 @@ export interface TextFieldPropControlsProps extends TextFieldProps {
 }
 
 interface TextFieldPropControlsInterface {
-  (props: TextFieldPropControlsProps): React.JSX.Element;
+  (props: TextFieldPropControlsProps): JSX.Element;
 }
 
 export const TextFieldPropControls: TextFieldPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx b/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
index 3fcc9b8fc5a..2be106df680 100644
--- a/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
+++ b/docs/src/pages/[platform]/components/togglebutton/ToggleButtonPropControls.tsx
@@ -17,7 +17,7 @@ export interface ToggleButtonPropControlsProps extends ToggleButtonProps {
 }
 
 export interface ToggleButtonPropControlsInterface {
-  (props: ToggleButtonPropControlsProps): React.JSX.Element;
+  (props: ToggleButtonPropControlsProps): JSX.Element;
 }
 
 export const ToggleButtonPropControls: ToggleButtonPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/components/view/ViewPropControls.tsx b/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
index 10fab253b8f..d204455a524 100644
--- a/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
+++ b/docs/src/pages/[platform]/components/view/ViewPropControls.tsx
@@ -20,7 +20,7 @@ export interface ViewPropControlsProps extends ViewProps {
 }
 
 export interface ViewPropControlsInterface {
-  (props: ViewPropControlsProps): React.JSX.Element;
+  (props: ViewPropControlsProps): JSX.Element;
 }
 
 export const ViewPropControls: ViewPropControlsInterface = ({
diff --git a/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx b/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
index c882623a4f4..b611e9d3e37 100644
--- a/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
+++ b/docs/src/pages/[platform]/connected-components/authenticator/customization/LabelsAndTextDemo.tsx
@@ -10,7 +10,7 @@ import { I18n } from 'aws-amplify/utils';
 import * as React from 'react';
 
 type ScreenProps = {
-  Component: React.JSX.Element;
+  Component: JSX.Element;
 };
 
 function Screen({ Component }: ScreenProps) {
diff --git a/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx b/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
index 477831e24da..ae4b555c492 100644
--- a/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
+++ b/docs/src/pages/[platform]/connected-components/liveness/customization/CustomizationComponents.tsx
@@ -13,7 +13,7 @@ export function CustomizationComponents() {
       region={'us-east-1'}
       onAnalysisComplete={async () => {}}
       components={{
-        PhotosensitiveWarning: (): React.JSX.Element => {
+        PhotosensitiveWarning: (): JSX.Element => {
           return (
             <Alert
               variation="warning"
diff --git a/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx b/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx
index df9ba3bd73d..03a0b301b8e 100644
--- a/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx
+++ b/docs/src/pages/[platform]/connected-components/liveness/full-api.react.mdx
@@ -48,7 +48,7 @@ Below is the full list of props that can be used with the `FaceLivenessDetectorC
 
 ### FaceLivenessDetectorCoreConfig
 
-Below is the full list of props that can be used with the `FaceLivenessDetectorCoreConfig`. This config can only be used with the `<FaceLivenessDetectorCore />` component.
+Below is the full list of props that can be used with the `FaceLivenessDetectorCoreConfig`. This config can only be used with the `<FaceLivenessDetectoreCore />` component.
 
 <ResponsiveTable highlightOnHover>
   <TableHead>
diff --git a/examples/next-app-router/package.json b/examples/next-app-router/package.json
index e379f8765e0..bcfb29ba8dc 100644
--- a/examples/next-app-router/package.json
+++ b/examples/next-app-router/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@aws-amplify/ui-react": "^6.1.0",
-    "react": "^18.3.0",
     "next": "^14.2.15",
+    "react": "18.2.0",
     "react-dom": "^18",
     "react-icons": "^4.3.1"
   },
diff --git a/examples/next/package.json b/examples/next/package.json
index bb6ca6b323b..de960a556f1 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -19,15 +19,16 @@
     "@aws-sdk/credential-providers": "^3.370.0",
     "next": "^14.2.15",
     "next-global-css": "^1.1.1",
-    "react": "^18.3.0",
+    "react": "18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.0",
+    "react-dom": "18.2.0",
     "react-icons": "^4.4.0",
     "react-map-gl": "7.0.23",
     "swr": "^2.0.0"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
+    "@types/react": "^18.2.22",
     "eslint": "^8.44.0",
     "eslint-config-next": "^13.5.5",
     "rimraf": "^3.0.2"
diff --git a/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx b/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
index 39d59031a22..d8a25fb315b 100644
--- a/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
+++ b/examples/next/pages/ui/components/ai/ai-conversation/context.page.tsx
@@ -60,7 +60,7 @@ const AIContextProvider = ({
   children,
 }: {
   children?: React.ReactNode;
-}): React.JSX.Element => {
+}): JSX.Element => {
   const [data, setData] = React.useState({});
   return (
     <AIContext.Provider value={{ data, setData }}>
diff --git a/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx b/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
index dd1978eba10..a594120fe15 100644
--- a/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
+++ b/examples/next/pages/ui/components/liveness/with-custom-components/index.page.tsx
@@ -30,7 +30,7 @@ const App = () => {
               </View>
             );
           },
-          PhotosensitiveWarning: (): React.JSX.Element => {
+          PhotosensitiveWarning: (): JSX.Element => {
             return (
               <Alert
                 variation="warning"
@@ -43,7 +43,7 @@ const App = () => {
               </Alert>
             );
           },
-          Instructions: (): React.JSX.Element => {
+          Instructions: (): JSX.Element => {
             return (
               <Card variation="elevated">
                 Instructions to follow to use liveness face detector
diff --git a/examples/react-native/package.json b/examples/react-native/package.json
index 8c4e974b927..fea604f6fac 100644
--- a/examples/react-native/package.json
+++ b/examples/react-native/package.json
@@ -21,7 +21,7 @@
     "@react-native-async-storage/async-storage": "^1.17.5",
     "@react-native-community/netinfo": "^8.3.0",
     "@xstate/react": "^3.2.2",
-    "react": "^18.3.0",
+    "react": "18.2.0",
     "react-native": "0.71.16",
     "react-native-get-random-values": "^1.9.0",
     "react-native-safe-area-context": "^4.7.3",
@@ -33,7 +33,10 @@
     "@babel/runtime": "^7.20.0",
     "@react-native-community/eslint-config": "^3.2.0",
     "@tsconfig/react-native": "^3.0.2",
+    "@types/jest": "^29.2.1",
+    "@types/react": "^18.2.22",
     "@types/react-native-dotenv": "^0.2.0",
+    "@types/react-test-renderer": "^18.0.2",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-jest": "^29.2.1",
diff --git a/package.json b/package.json
index 221a7a70aed..27223a0259f 100644
--- a/package.json
+++ b/package.json
@@ -81,8 +81,8 @@
     "@babel/traverse": "7.23.2",
     "@cypress/request": "^3.0.0",
     "@sideway/formula": "^3.0.1",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
     "body-parser": "1.20.3",
     "browserslist": "^4.16.15",
     "cookie": "^0.7.0",
@@ -97,8 +97,8 @@
     "path-to-regexp": "0.1.10",
     "postcss": "^8.4.31",
     "prismjs": "^1.25.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-native": "0.71.16",
     "react-devtools-core": "^4.28.4",
     "rollup": "^4.22.4",
@@ -126,9 +126,7 @@
     "@testing-library/user-event": "^14.5.1",
     "@types/fs-extra": "11.0.3",
     "@types/jest": "^29.5.5",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-test-renderer": "^18.3.0",
+    "@types/react-test-renderer": "^18.0.2",
     "@vitejs/plugin-vue": "^2.3.4",
     "aws-amplify": "^6.9.0",
     "esbuild-register": "^3.5.0",
@@ -139,7 +137,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": ">=10",
     "prettier": "^3.0.3",
-    "react-test-renderer": "^18.3.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
     "rollup": "^4.22.4",
     "rollup-plugin-node-externals": "^7.1.3",
diff --git a/packages/configs/.eslintrc.js b/packages/configs/.eslintrc.js
index 8b9417a09d9..284e37fc452 100644
--- a/packages/configs/.eslintrc.js
+++ b/packages/configs/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['eslint:recommended'],
+  extends: ['eslint:recommended', 'plugin:eslint-plugin/recommended'],
   env: { jest: true, node: true },
   parserOptions: { ecmaVersion: 12 },
 };
diff --git a/packages/configs/typescript/tsconfig.base.json b/packages/configs/typescript/tsconfig.base.json
index a4a00b10613..a2c8a7daf7c 100644
--- a/packages/configs/typescript/tsconfig.base.json
+++ b/packages/configs/typescript/tsconfig.base.json
@@ -1,14 +1,30 @@
 {
   "compilerOptions": {
+    // https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports
     "allowSyntheticDefaultImports": true,
+
+    // https://www.typescriptlang.org/tsconfig#baseUrl
     "baseUrl": ".",
+
+    // https://www.typescriptlang.org/tsconfig#declaration
     "declaration": true,
+
+    // https://www.typescriptlang.org/tsconfig#esModuleInterop
     "esModuleInterop": true,
+
+    // https://www.typescriptlang.org/tsconfig#importHelpers
     "importHelpers": true,
+
+    // https://www.typescriptlang.org/tsconfig#module
     "module": "esnext",
+
+    // https://www.typescriptlang.org/tsconfig#moduleResolution
     "moduleResolution": "node",
+
+    // https://www.typescriptlang.org/tsconfig#strict
     "strict": true,
-    "target": "ES2020",
-    "types": ["jest", "@testing-library/jest-dom"]
+
+    // https://www.typescriptlang.org/tsconfig#target
+    "target": "ES2020"
   }
 }
diff --git a/packages/react-ai/package.json b/packages/react-ai/package.json
index a76c2f1a703..aec0ba8c28f 100644
--- a/packages/react-ai/package.json
+++ b/packages/react-ai/package.json
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "@aws-amplify/api-graphql": "unstable",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
     "@aws-amplify/ui": "^6.7.1",
diff --git a/packages/react-ai/src/components/AIConversation/AIConversation.tsx b/packages/react-ai/src/components/AIConversation/AIConversation.tsx
index be1e4904512..b65d9a9ba74 100644
--- a/packages/react-ai/src/components/AIConversation/AIConversation.tsx
+++ b/packages/react-ai/src/components/AIConversation/AIConversation.tsx
@@ -30,7 +30,7 @@ function AIConversationBase({
   avatars,
   controls,
   ...rest
-}: AIConversationBaseProps): React.JSX.Element {
+}: AIConversationBaseProps): JSX.Element {
   useSetUserAgent({
     componentName: 'AIConversation',
     packageName: 'react-ai',
diff --git a/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx b/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
index 707eb81402f..45cca799f98 100644
--- a/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AIContextContext.tsx
@@ -10,7 +10,7 @@ export const AIContextProvider = ({
 }: {
   children?: React.ReactNode;
   aiContext?: () => object;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <AIContextContext.Provider value={aiContext}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
index 79dedf9e9ed..46cec893a9f 100644
--- a/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ActionsContext.tsx
@@ -11,7 +11,7 @@ export const ActionsProvider = ({
 }: {
   children?: React.ReactNode;
   actions?: CustomAction[];
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <ActionsContext.Provider value={actions}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx b/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
index 6b32b00beb8..3195ad6c3c8 100644
--- a/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AttachmentContext.tsx
@@ -24,7 +24,7 @@ export const AttachmentProvider = ({
   allowAttachments = false,
   maxAttachmentSize = 400_000,
   maxAttachments = 20,
-}: React.PropsWithChildren<AttachmentContextProps>): React.JSX.Element => {
+}: React.PropsWithChildren<AttachmentContextProps>): JSX.Element => {
   const providerValue = React.useMemo(
     () => ({ maxAttachmentSize, maxAttachments, allowAttachments }),
     [maxAttachmentSize, maxAttachments, allowAttachments]
diff --git a/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx b/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
index 6eb550c8d70..332168b4dbf 100644
--- a/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/AvatarsContext.tsx
@@ -11,7 +11,7 @@ export const AvatarsProvider = ({
 }: {
   children?: React.ReactNode;
   avatars?: Avatars;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <AvatarsContext.Provider value={avatars}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
index 829c4f0c792..717dd38d5d7 100644
--- a/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ControlsContext.tsx
@@ -29,7 +29,7 @@ export const ControlsProvider = ({
 }: {
   children?: React.ReactNode;
   controls?: ControlsContextProps;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <ControlsContext.Provider value={controls}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx b/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
index a530575d879..dd56f6350b2 100644
--- a/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ConversationInputContext.tsx
@@ -21,7 +21,7 @@ export const ConversationInputContextProvider = ({
   children,
 }: {
   children?: React.ReactNode;
-}): React.JSX.Element => {
+}): JSX.Element => {
   const [input, setInput] = React.useState<ConversationInput | undefined>();
   const [error, setError] = React.useState<string>();
 
diff --git a/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx b/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
index 17d6c180a8f..a5f4655a4f1 100644
--- a/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/FallbackComponentContext.tsx
@@ -11,7 +11,7 @@ export const FallbackComponentProvider = ({
 }: {
   children?: React.ReactNode;
   FallbackComponent?: AIConversationInput['FallbackResponseComponent'];
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <FallbackComponentContext.Provider value={FallbackComponent}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx b/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
index 9f93e53e16c..8246a3f30eb 100644
--- a/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/LoadingContext.tsx
@@ -10,7 +10,7 @@ export const LoadingContextProvider = ({
 }: {
   children?: React.ReactNode;
   isLoading?: boolean;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <LoadingContext.Provider value={isLoading}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx b/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
index 2f5f1af6ddf..908d3657e23 100644
--- a/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/MessageVariantContext.tsx
@@ -11,7 +11,7 @@ export const MessageVariantProvider = ({
 }: {
   children?: React.ReactNode;
   variant?: MessageVariant;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <MessageVariantContext.Provider value={variant}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx b/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
index d93b8ad74df..b2251bdbbf3 100644
--- a/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/MessagesContext.tsx
@@ -17,7 +17,7 @@ export const MessagesProvider = ({
 }: {
   children?: React.ReactNode;
   messages: ConversationMessage[];
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <MessagesContext.Provider value={messages}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx b/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
index 985b5737627..fc71250db77 100644
--- a/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/ResponseComponentsContext.tsx
@@ -27,7 +27,7 @@ export const ResponseComponentsProvider = ({
 }: {
   children?: React.ReactNode;
   responseComponents?: ResponseComponents;
-}): React.JSX.Element => {
+}): JSX.Element => {
   const _responseComponents = React.useMemo(
     () => prependResponseComponents(responseComponents),
     [responseComponents]
diff --git a/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx b/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
index 070953370c4..2171ca27944 100644
--- a/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/SendMessageContext.tsx
@@ -11,7 +11,7 @@ export const SendMessageContextProvider = ({
 }: {
   children?: React.ReactNode;
   handleSendMessage: SendMessage;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <SendMessageContext.Provider value={handleSendMessage}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx b/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
index b38307c0e70..1e3541c386d 100644
--- a/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/SuggestedPromptsContext.tsx
@@ -12,7 +12,7 @@ export const SuggestedPromptProvider = ({
 }: {
   children?: React.ReactNode;
   suggestedPrompts?: SuggestedPrompt[];
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <SuggestedPromptsContext.Provider value={suggestedPrompts}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx b/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
index 65d33c22adb..fe116d97bcf 100644
--- a/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
+++ b/packages/react-ai/src/components/AIConversation/context/WelcomeMessageContext.tsx
@@ -11,7 +11,7 @@ export const WelcomeMessageProvider = ({
 }: {
   children?: React.ReactNode;
   welcomeMessage?: React.ReactNode;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <WelcomeMessageContext.Provider value={welcomeMessage}>
       {children}
diff --git a/packages/react-ai/src/components/AIConversation/createAIConversation.tsx b/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
index aaf0446159e..e6541c38db5 100644
--- a/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
+++ b/packages/react-ai/src/components/AIConversation/createAIConversation.tsx
@@ -24,7 +24,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
     FallbackResponseComponent,
   } = input;
 
-  function AIConversation(props: AIConversationProps): React.JSX.Element {
+  function AIConversation(props: AIConversationProps): JSX.Element {
     const { messages, avatars, handleSendMessage, isLoading } = props;
     const providerProps = {
       actions,
diff --git a/packages/react-ai/src/components/AIConversation/types.ts b/packages/react-ai/src/components/AIConversation/types.ts
index dfebc8c657b..69aef506b39 100644
--- a/packages/react-ai/src/components/AIConversation/types.ts
+++ b/packages/react-ai/src/components/AIConversation/types.ts
@@ -53,10 +53,10 @@ export interface AIConversationProps {
 export interface AIConversation<
   PropsType extends AIConversationProps = AIConversationProps,
 > {
-  (props: PropsType): React.JSX.Element;
-  DefaultMessage: () => React.JSX.Element | undefined;
-  Messages: () => React.JSX.Element;
-  Form: () => React.JSX.Element;
+  (props: PropsType): JSX.Element;
+  DefaultMessage: () => JSX.Element | undefined;
+  Messages: () => JSX.Element;
+  Form: () => JSX.Element;
   Provider: (props: AIConversationProviderProps) => React.JSX.Element;
 }
 
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
index d8bcdcefe58..5b01fd88839 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/AttachmentListControl.tsx
@@ -45,7 +45,7 @@ RemoveButtonControl.Button = RemoveButton;
 interface RemoveButtonControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { onRemove: () => void }): React.JSX.Element;
+  (props: { onRemove: () => void }): JSX.Element;
   Button: T['Button'];
   Icon: T['Icon'];
 }
@@ -91,7 +91,7 @@ TextControl.Separator = Separator;
 interface TextControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { fileName: string; fileSize: number }): React.JSX.Element;
+  (props: { fileName: string; fileSize: number }): JSX.Element;
   Container: T['View'];
   FileName: T['Text'];
   FileSize: T['Text'];
@@ -120,7 +120,7 @@ AttachmentControl.Text = TextControl;
 interface AttachmentControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (props: { image: File; onRemove: () => void }): React.JSX.Element;
+  (props: { image: File; onRemove: () => void }): JSX.Element;
   Container: T['ListItem'];
   ImageIcon: T['Icon'];
   RemoveButton: RemoveButtonControl<T>;
@@ -158,7 +158,7 @@ AttachmentListControl.Item = AttachmentControl;
 export interface AttachmentListControl<
   T extends Partial<AIConversationElements> = AIConversationElements,
 > {
-  (): React.JSX.Element;
+  (): JSX.Element;
   List: T['UnorderedList'];
   Item: AttachmentControl<T>;
 }
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
index 39ba4cfde01..be2e769fbf9 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/DefaultMessageControl.tsx
@@ -3,7 +3,7 @@ import { MessagesContext } from '../../context';
 import { PromptControl } from './PromptControl';
 import { WelcomeMessageContext } from '../../context/WelcomeMessageContext';
 
-export const DefaultMessageControl = (): React.JSX.Element | undefined => {
+export const DefaultMessageControl = (): JSX.Element | undefined => {
   const messages = React.useContext(MessagesContext);
   const welcomeMessage = React.useContext(WelcomeMessageContext);
 
diff --git a/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx b/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
index 372ae305300..feb2ee53d23 100644
--- a/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/Controls/MessagesControl.tsx
@@ -116,7 +116,7 @@ export const MessageControl: MessageControl = ({ message }) => {
   );
 };
 interface MessageControl {
-  (props: { message: ConversationMessage }): React.JSX.Element;
+  (props: { message: ConversationMessage }): JSX.Element;
 }
 
 const Timestamp = withBaseElementProps(Text, {
@@ -232,9 +232,7 @@ export const MessagesControl: MessagesControl = () => {
               tabIndex={focusedItemIndex === index ? 0 : -1}
               onFocus={() => handleFocus(index)}
               onKeyDown={(event) => onKeyDown(index, event)}
-              ref={(el) => {
-                messagesRef.current[index] = el;
-              }}
+              ref={(el) => (messagesRef.current[index] = el)}
             >
               <HeaderContainer>
                 <AvatarControl />
@@ -265,7 +263,7 @@ MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
 
 export interface MessagesControl {
-  (): React.JSX.Element;
+  (): JSX.Element;
   ActionsBar: ActionsBarControl;
   Avatar: AvatarControl;
   Container: AIConversationElements['View'];
diff --git a/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx b/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
index 9c040a471fe..764702cbd7e 100644
--- a/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
+++ b/packages/react-ai/src/components/AIConversation/views/default/Attachments.tsx
@@ -48,7 +48,7 @@ export const Attachments = ({
 }: {
   files?: File[];
   setInput: ConversationInputContextProps['setInput'];
-}): React.JSX.Element | null => {
+}): JSX.Element | null => {
   if (!files || files.length < 1) {
     return null;
   }
diff --git a/packages/react-ai/src/hooks/useAIConversation.tsx b/packages/react-ai/src/hooks/useAIConversation.tsx
index c150f491dd6..f3ece989f09 100644
--- a/packages/react-ai/src/hooks/useAIConversation.tsx
+++ b/packages/react-ai/src/hooks/useAIConversation.tsx
@@ -69,9 +69,7 @@ export function createUseAIConversation<
 
     // We need to keep track of the stream events as the come in
     // for an assistant message, but don't need to keep them in state
-    const contentBlocksRef = React.useRef<
-      ConversationStreamEvent[][] | undefined
-    >(undefined);
+    const contentBlocksRef = React.useRef<ConversationStreamEvent[][]>();
     // Using this hook without an existing conversation id means
     // it will create a new conversation when it is executed
     // we don't want to create 2 conversations
diff --git a/packages/react-auth/package.json b/packages/react-auth/package.json
index 20f9ab6cc45..49ce6387854 100644
--- a/packages/react-auth/package.json
+++ b/packages/react-auth/package.json
@@ -50,8 +50,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": [
     "dist/**/*.css"
diff --git a/packages/react-core-auth/package.json b/packages/react-core-auth/package.json
index e2f684b1a30..ec8949f4617 100644
--- a/packages/react-core-auth/package.json
+++ b/packages/react-core-auth/package.json
@@ -43,7 +43,7 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx b/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
index 29b3e7d19bf..6286555c0a6 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
+++ b/packages/react-core-auth/src/components/Authenticator/context/ComponentRoute/ComponentRouteContext.tsx
@@ -35,7 +35,7 @@ export const routeSelector: UseMachineSelector = ({ route }) => [route];
 function ComponentRouteProvider({
   children,
   hideSignUp = false,
-}: ComponentRouteProviderProps): React.JSX.Element {
+}: ComponentRouteProviderProps): JSX.Element {
   const { route: _route, setRoute: setRouteBase } = useMachine(routeSelector);
 
   const route = isRoute(_route, ...COMPONENT_ROUTE) ? _route : undefined;
diff --git a/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx b/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
index a3a56f281a0..8e1490a867d 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
+++ b/packages/react-core-auth/src/components/Authenticator/context/Machine/MachineContext.tsx
@@ -47,7 +47,7 @@ export function MachineProvider({
   children,
   initialRoute: initialState,
   ...data
-}: MachineProviderProps): React.JSX.Element {
+}: MachineProviderProps): JSX.Element {
   const service = useInterpret(() =>
     createAuthenticatorMachine({
       ...data,
diff --git a/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts b/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
index 2fe03a30488..04e63e2a163 100644
--- a/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
+++ b/packages/react-core-auth/src/components/Authenticator/context/Primitives/types.ts
@@ -144,7 +144,7 @@ interface ActionsPrimitives<P> {
   SecondaryButton: React.ComponentType<SecondaryButtonPrimitiveProps<P>>;
 }
 
-export type ActionsControlType<T = unknown> = (() => React.JSX.Element) &
+export type ActionsControlType<T = unknown> = (() => JSX.Element) &
   ActionsPrimitives<T>;
 
 interface LinksPrimitives<P> {
@@ -152,7 +152,7 @@ interface LinksPrimitives<P> {
   ButtonGroup: React.ComponentType<ButtonGroupPrimitiveProps>;
 }
 
-export type LinksControlType<T = unknown> = (() => React.JSX.Element) &
+export type LinksControlType<T = unknown> = (() => JSX.Element) &
   LinksPrimitives<T> &
   NonPrimitiveControls['Links'];
 
@@ -162,10 +162,9 @@ interface FederatedProvidersPrimitives<P> {
   Divider: React.ComponentType<ViewPrimitiveProps>;
 }
 
-export type FederatedProvidersControlType<T = unknown> =
-  (() => React.JSX.Element) &
-    FederatedProvidersPrimitives<T> &
-    NonPrimitiveControls['FederatedProviders'];
+export type FederatedProvidersControlType<T = unknown> = (() => JSX.Element) &
+  FederatedProvidersPrimitives<T> &
+  NonPrimitiveControls['FederatedProviders'];
 
 export interface SetupTotpPrimitives<P> {
   Container: React.ComponentType<ViewPrimitiveProps>;
@@ -177,15 +176,15 @@ export interface SetupTotpPrimitives<P> {
   Loader: React.ComponentType;
 }
 
-export type SetupTotpControlType<T = unknown> = (() => React.JSX.Element) &
+export type SetupTotpControlType<T = unknown> = (() => JSX.Element) &
   SetupTotpPrimitives<T>;
 
 interface VerifyContactMethodPrimitives<T = unknown> {
   RadioGroup: React.ComponentType<RadioGroupPrimitiveProps<T>>;
 }
 
-export type VerifyContactMethodControlType<T = unknown> =
-  (() => React.JSX.Element) & VerifyContactMethodPrimitives<T>;
+export type VerifyContactMethodControlType<T = unknown> = (() => JSX.Element) &
+  VerifyContactMethodPrimitives<T>;
 
 /**
  * Compound Control values contain primitives
diff --git a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
index 36c58eb1c2f..7ebbfed56dc 100644
--- a/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
+++ b/packages/react-core-auth/src/components/Authenticator/createProvider/types.ts
@@ -27,4 +27,4 @@ export interface ProviderProps<T extends PrimitivesDefault, K> {
 
 export type ProviderComponent<T extends PrimitivesDefault, K> = (
   params: ProviderProps<T, K>
-) => React.JSX.Element;
+) => JSX.Element;
diff --git a/packages/react-core-notifications/package.json b/packages/react-core-notifications/package.json
index 44cc94a30f0..dd080e830e0 100644
--- a/packages/react-core-notifications/package.json
+++ b/packages/react-core-notifications/package.json
@@ -40,7 +40,7 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index 42f64999262..01dff8507b3 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -43,12 +43,12 @@
     "@aws-amplify/ui": "6.7.2",
     "@xstate/react": "^3.2.2",
     "lodash": "4.17.21",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.43.5",
     "xstate": "^4.33.6"
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0"
   },
   "sideEffects": false
 }
diff --git a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
index 4ea300de9bf..011bc9979c3 100644
--- a/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
+++ b/packages/react-core/src/Authenticator/context/AuthenticatorProvider.tsx
@@ -24,7 +24,7 @@ export default function AuthenticatorProvider({
   children,
 }: {
   children: ReactNode;
-}): React.JSX.Element {
+}): JSX.Element {
   // `authStatus` is exposed by `useAuthenticator` but should not be derived directly from the
   // state machine as the machine only updates on `Authenticator` initiated events, which
   // leads to scenarios where the state machine `authStatus` gets "stuck". For exmample,
diff --git a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
index a4d8fdf650d..1736a916100 100644
--- a/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
+++ b/packages/react-core/src/Authenticator/context/__tests__/AuthenticatorProvider.test.tsx
@@ -16,7 +16,7 @@ const getCurrentUserSpy = jest
   .spyOn(Auth, 'getCurrentUser')
   .mockResolvedValue({ userId: '1234', username: 'test' });
 
-function TestComponent(): React.JSX.Element | null {
+function TestComponent(): JSX.Element | null {
   const { authStatus } = useAuthenticator();
   return <>{authStatus}</>;
 }
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
index 092aa722ee5..ebd5557b34f 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useField.spec.ts.snap
@@ -7,7 +7,6 @@ exports[`useField returns the expected values in the happy path 1`] = `
   "invalid": false,
   "isDirty": false,
   "isTouched": false,
-  "isValidating": false,
   "name": "test-field",
   "onBlur": [Function],
   "onChange": [Function],
diff --git a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
index 1cc48bf0bf3..250bcc448ba 100644
--- a/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
+++ b/packages/react-core/src/components/FormCore/__tests__/__snapshots__/useForm.spec.ts.snap
@@ -7,7 +7,6 @@ exports[`useForm returns the expected values from getFieldState in the happy pat
   "invalid": false,
   "isDirty": false,
   "isTouched": false,
-  "isValidating": false,
 }
 `;
 
diff --git a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
index 01052370714..45542354156 100644
--- a/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
+++ b/packages/react-core/src/components/FormCore/__tests__/useForm.spec.ts
@@ -1,5 +1,5 @@
 import { renderHook } from '@testing-library/react-hooks';
-import ReactHookForm from 'react-hook-form';
+import * as ReactHookForm from 'react-hook-form';
 
 import { useForm } from '..';
 import FormProvider from '../FormProvider';
@@ -9,7 +9,6 @@ import { DEFAULT_ERROR_MESSAGE } from '../useForm';
 // mock 'react-hook-form` context
 const mockFormContext: ReactHookForm.UseFormReturn = {
   formState: {
-    disabled: false,
     isDirty: false,
     isLoading: false,
     isSubmitSuccessful: false,
@@ -21,7 +20,6 @@ const mockFormContext: ReactHookForm.UseFormReturn = {
     dirtyFields: [],
     touchedFields: [],
     errors: {},
-    validatingFields: {},
   },
   getFieldState: jest.fn(),
   getValues: jest.fn(),
diff --git a/packages/react-core/src/components/FormCore/withFormProvider.tsx b/packages/react-core/src/components/FormCore/withFormProvider.tsx
index dd814261bcd..71f159d957d 100644
--- a/packages/react-core/src/components/FormCore/withFormProvider.tsx
+++ b/packages/react-core/src/components/FormCore/withFormProvider.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { AnyComponent } from '../../types';
+import { AnyComponent, MergeProps } from '../../types';
 
 import FormProvider from './FormProvider';
 import { FormHandle, FormProviderProps } from './types';
@@ -12,7 +12,7 @@ import { FormHandle, FormProviderProps } from './types';
 export default function withFormProvider<
   ChildComp extends AnyComponent,
   ChildProps extends React.ComponentPropsWithRef<ChildComp>,
-  Props extends ChildProps & FormProviderProps,
+  Props extends MergeProps<FormProviderProps, ChildProps>
 >(
   Child: ChildComp
 ): React.ForwardRefExoticComponent<
@@ -23,11 +23,7 @@ export default function withFormProvider<
     ref
   ) {
     return (
-      <FormProvider
-        defaultValues={defaultValues as Props['defaultValues']}
-        mode={mode as Props['mode']}
-        ref={ref}
-      >
+      <FormProvider defaultValues={defaultValues} mode={mode} ref={ref}>
         <Child {...(props as ChildProps)} />
       </FormProvider>
     );
diff --git a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
index bddff9c0092..b8b35a490c8 100644
--- a/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
+++ b/packages/react-core/src/components/RenderNothing/RenderNothing.tsx
@@ -1,8 +1,6 @@
 /**
  * Utility component for rendering nothing.
  */
-export default function RenderNothing<Props>(
-  _: Props
-): React.JSX.Element | null {
+export default function RenderNothing<Props>(_: Props): JSX.Element | null {
   return null;
 }
diff --git a/packages/react-core/src/hooks/usePreviousValue.ts b/packages/react-core/src/hooks/usePreviousValue.ts
index 2623db6040f..7824e2fdd6c 100644
--- a/packages/react-core/src/hooks/usePreviousValue.ts
+++ b/packages/react-core/src/hooks/usePreviousValue.ts
@@ -3,7 +3,7 @@ import { useEffect, useRef } from 'react';
 export default function usePreviousValue<Value>(
   value: Value
 ): Value | undefined {
-  const previous = useRef<Value | undefined>(undefined);
+  const previous = useRef<Value>();
 
   // update ref post render
   useEffect(() => {
diff --git a/packages/react-geo/package.json b/packages/react-geo/package.json
index e14a0b90a49..0b4ba4c7264 100644
--- a/packages/react-geo/package.json
+++ b/packages/react-geo/package.json
@@ -49,8 +49,8 @@
   "peerDependencies": {
     "@aws-amplify/geo": "^3.0.59",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "devDependencies": {
     "@aws-amplify/geo": "^3.0.59",
diff --git a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
index fae42c6b49e..6eff1540666 100644
--- a/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
+++ b/packages/react-geo/src/components/LocationSearch/LocationSearch.tsx
@@ -74,9 +74,7 @@ const LocationSearchStandalone = (props: LocationSearchProps) => {
  *   return <LocationSearch />;
  * }
  */
-export const LocationSearch = (
-  props: LocationSearchProps
-): React.JSX.Element => {
+export const LocationSearch = (props: LocationSearchProps): JSX.Element => {
   const { current: map } = useMap();
 
   useSetUserAgent({
diff --git a/packages/react-liveness/package.json b/packages/react-liveness/package.json
index 00c0f0df22f..9158ed56168 100644
--- a/packages/react-liveness/package.json
+++ b/packages/react-liveness/package.json
@@ -44,8 +44,8 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
     "@aws-amplify/ui": "6.7.2",
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
index 5665341706a..397747fe2b9 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetector.tsx
@@ -21,7 +21,7 @@ const credentialProvider = async () => {
 
 export default function FaceLivenessDetector(
   props: FaceLivenessDetectorProps
-): React.JSX.Element {
+): JSX.Element {
   const { config, ...rest } = props;
   return (
     <FaceLivenessDetectorCore
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
index 6c701bf8fce..200dbf7ec20 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/FaceLivenessDetectorCore.tsx
@@ -22,7 +22,7 @@ export interface FaceLivenessDetectorCoreProps
 
 export default function FaceLivenessDetectorCore(
   props: FaceLivenessDetectorCoreProps
-): React.JSX.Element {
+): JSX.Element {
   const { components, config, displayText } = props;
   const currElementRef = React.useRef<HTMLDivElement>(null);
   const {
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
index d9be3d3f811..d3be78737bd 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/LivenessCheck/LivenessCameraModule.tsx
@@ -95,7 +95,7 @@ const MemoizedMatchIndicator = React.memo(MatchIndicator);
 
 export const LivenessCameraModule = (
   props: LivenessCameraModuleProps
-): React.JSX.Element => {
+): JSX.Element => {
   const {
     isMobileScreen,
     isRecordingStopped,
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
index 9dc5fc4fca1..2fc51349784 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/__mocks__/utils.tsx
@@ -11,7 +11,7 @@ type RenderWithLivenessLivenessProviderResult = RenderResult & {
 };
 
 export function renderWithLivenessProvider(
-  ui: React.JSX.Element
+  ui: JSX.Element
 ): RenderWithLivenessLivenessProviderResult {
   const mockComponentProps: FaceLivenessDetectorProps = {
     region: 'us-east-1',
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
index dba293d6c13..8a97d8a3c6b 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/providers/FaceLivenessDetectorProvider.tsx
@@ -16,7 +16,7 @@ export interface FaceLivenessDetectorProviderProps
 export function FaceLivenessDetectorProvider({
   children,
   ...props
-}: FaceLivenessDetectorProviderProps): React.JSX.Element {
+}: FaceLivenessDetectorProviderProps): JSX.Element {
   return (
     <FaceLivenessDetectorContext.Provider value={props}>
       {children}
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
index 554bc13d73e..55c91b1e12e 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/DefaultStartScreenComponents.tsx
@@ -26,7 +26,7 @@ export const DefaultPhotosensitiveWarning = ({
   headingText,
   infoText,
   labelText,
-}: DefaultPhotosensitiveWarningProps): React.JSX.Element => {
+}: DefaultPhotosensitiveWarningProps): JSX.Element => {
   return (
     <Flex
       className={`${ComponentClassName.Alert} ${LivenessClassNames.StartScreenWarning}`}
@@ -49,7 +49,7 @@ interface DefaultRecordingIconProps {
 
 export const DefaultRecordingIcon = ({
   recordingIndicatorText,
-}: DefaultRecordingIconProps): React.JSX.Element => {
+}: DefaultRecordingIconProps): JSX.Element => {
   return (
     <View className={LivenessClassNames.RecordingIconContainer}>
       <RecordingIcon>{recordingIndicatorText}</RecordingIcon>
@@ -63,7 +63,7 @@ interface CancelButtonProps {
 
 export const DefaultCancelButton = ({
   cancelLivenessCheckText,
-}: CancelButtonProps): React.JSX.Element => {
+}: CancelButtonProps): JSX.Element => {
   return (
     <View className={LivenessClassNames.CancelContainer}>
       <CancelButtonComponent
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
index f66af53bf9b..de87b479800 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/shared/FaceLivenessErrorModal.tsx
@@ -94,7 +94,7 @@ export const renderErrorModal = ({
 }: {
   errorState: ErrorState;
   overrideErrorDisplayText?: ErrorDisplayText;
-}): React.JSX.Element | null => {
+}): JSX.Element | null => {
   const displayText: Required<ErrorDisplayText> = {
     ...defaultErrorDisplayText,
     ...overrideErrorDisplayText,
diff --git a/packages/react-liveness/tsconfig.json b/packages/react-liveness/tsconfig.json
index 9fa9a542d53..5be1de00eac 100644
--- a/packages/react-liveness/tsconfig.json
+++ b/packages/react-liveness/tsconfig.json
@@ -1,6 +1,5 @@
 {
   "extends": "@aws-amplify/typescript-config/tsconfig.react.json",
-  "compilerOptions": { "types": ["@types/emscripten", "@types/long"] },
   "include": ["*.mjs", "*.ts", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["node_modules"]
 }
diff --git a/packages/react-native-auth/package.json b/packages/react-native-auth/package.json
index d4dd895ff53..f3a6718cd4f 100644
--- a/packages/react-native-auth/package.json
+++ b/packages/react-native-auth/package.json
@@ -24,7 +24,7 @@
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
-    "@testing-library/react-native": "^12.9.0",
+    "@testing-library/react-native": "^12.3.0",
     "metro-react-native-babel-preset": "^0.77.0"
   },
   "dependencies": {
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index 9f0b14a6959..a6bd2ced45f 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -25,7 +25,7 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-typescript": "^7.23.2",
     "@react-native-async-storage/async-storage": "*",
-    "@testing-library/react-native": "^12.9.0",
+    "@testing-library/react-native": "^12.3.0",
     "metro-react-native-babel-preset": "^0.77.0",
     "react-native-safe-area-context": "^4.7.3"
   },
diff --git a/packages/react-native/src/Authenticator/Authenticator.tsx b/packages/react-native/src/Authenticator/Authenticator.tsx
index bd074852337..4b5a443d568 100644
--- a/packages/react-native/src/Authenticator/Authenticator.tsx
+++ b/packages/react-native/src/Authenticator/Authenticator.tsx
@@ -56,7 +56,7 @@ function Authenticator({
   Footer,
   Header,
   ...options
-}: AuthenticatorProps): React.JSX.Element | null {
+}: AuthenticatorProps): JSX.Element | null {
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
index 73c6be323ca..3b4d1b2b5bb 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
@@ -30,7 +30,7 @@ const ConfirmResetPassword = ({
   resendCode,
   validationErrors,
   ...rest
-}: DefaultConfirmResetPasswordProps): React.JSX.Element => {
+}: DefaultConfirmResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
index 32e86838085..3f686a74808 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmResetPassword/__tests__/ConfirmResetPassword.spec.tsx
@@ -53,7 +53,7 @@ describe('ConfirmResetPassword', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getSubmitText())).toBeDefined();
     expect(getByText(getResendCodeText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(5);
+    expect(getAllByRole('text')).toHaveLength(fields.length);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
index 9a5e578c220..c63a4e8b0fe 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
@@ -30,7 +30,7 @@ const ConfirmSignIn = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultConfirmSignInProps): React.JSX.Element => {
+}: DefaultConfirmSignInProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
index ead0e3dbf1e..393adc6845d 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
@@ -44,7 +44,7 @@ describe('ConfirmSignIn', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getChallengeText('SMS_MFA'))).toBeDefined();
     expect(getByText(getConfirmText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(3);
+    expect(getAllByRole('text')).toHaveLength(fields.length);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
index f18d36c3514..150a8adbf2d 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
@@ -31,7 +31,7 @@ const ConfirmSignUp = ({
   resendCode,
   validationErrors,
   ...rest
-}: DefaultConfirmSignUpProps): React.JSX.Element => {
+}: DefaultConfirmSignUpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
index e3cc30693a0..a3b100d7d96 100644
--- a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
@@ -29,7 +29,7 @@ const ConfirmVerifyUser = ({
   skipVerification,
   validationErrors,
   ...rest
-}: DefaultConfirmVerifyUserProps): React.JSX.Element => {
+}: DefaultConfirmVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
index d90e692a776..4943d3137b6 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
@@ -26,7 +26,7 @@ const ForceNewPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultForceNewPasswordProps): React.JSX.Element => {
+}: DefaultForceNewPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
index c734a21ee64..77dd70ea4d6 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/ForgotPassword.tsx
@@ -28,7 +28,7 @@ const ForgotPassword = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultForgotPasswordProps): React.JSX.Element => {
+}: DefaultForgotPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
index 316d827ce7e..e1a58c75888 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForgotPassword/__tests__/ForgotPassword.spec.tsx
@@ -44,7 +44,7 @@ describe('ForgotPassword', () => {
     expect(getAllByRole('header')).toBeDefined();
     expect(getByText(getResetYourPasswordText())).toBeDefined();
     expect(getByText(getSendCodeText())).toBeDefined();
-    expect(getAllByRole('text')).toHaveLength(3);
+    expect(getAllByRole('text')).toHaveLength(fields.length);
   });
 
   it('renders an error message', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
index ee27c1a0abd..4712876dacf 100644
--- a/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SetupTotp/SetupTotp.tsx
@@ -35,7 +35,7 @@ const SetupTotp = ({
   totpSecretCode,
   validationErrors,
   ...rest
-}: DefaultSetupTotpProps): React.JSX.Element => {
+}: DefaultSetupTotpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
index 08cf3a3d73b..4a22619e651 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
@@ -26,7 +26,7 @@ const SignIn = ({
   toSignUp,
   validationErrors,
   ...rest
-}: DefaultSignInProps): React.JSX.Element => {
+}: DefaultSignInProps): JSX.Element => {
   const {
     getSignInTabText,
     getSignInText,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
index e4685bedb1e..e370099b6e6 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
@@ -49,7 +49,7 @@ describe('SignIn', () => {
     const { toJSON, getAllByRole, getByText } = render(<SignIn {...props} />);
     expect(toJSON()).toMatchSnapshot();
 
-    expect(getAllByRole('text')).toHaveLength(5);
+    expect(getAllByRole('text')).toHaveLength(fields.length);
     expect(getByText(getSignInText())).toBeDefined();
     expect(getByText(getForgotPasswordText(true))).toBeDefined();
   });
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
index 631c63549f5..b94e01de114 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/SignUp.tsx
@@ -34,7 +34,7 @@ const SignUp = ({
   toSignIn,
   validationErrors,
   ...rest
-}: DefaultSignUpProps): React.JSX.Element => {
+}: DefaultSignUpProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
index 08dd5cd7aaa..f7ad231d87c 100644
--- a/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/SignUp/__tests__/SignUp.spec.tsx
@@ -59,7 +59,7 @@ describe('SignUp', () => {
     expect(toJSON()).toMatchSnapshot();
 
     expect(queryByText(getCreatingAccountText())).toBe(null);
-    expect(getAllByRole('text')).toHaveLength(6);
+    expect(getAllByRole('text')).toHaveLength(fields.length);
   });
 
   it('renders as expected with errors', () => {
diff --git a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
index 9a6cb18afbe..0047d5f85b9 100644
--- a/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx
@@ -27,7 +27,7 @@ const VerifyUser = ({
   skipVerification,
   validationErrors,
   ...rest
-}: DefaultVerifyUserProps): React.JSX.Element => {
+}: DefaultVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
index 01f4fc7fa52..e826b25c024 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContainer/DefaultContainer.tsx
@@ -26,7 +26,7 @@ export default function DefaultContainer({
   scrollViewContentContainerStyle,
   style,
   ...rest
-}: ContainerProps): React.JSX.Element | null {
+}: ContainerProps): JSX.Element | null {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
 
diff --git a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx b/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
index 35d42b85609..0ca446c9942 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContainer/InnerContainer.tsx
@@ -8,7 +8,7 @@ import { ContainerProps } from './types';
 export default function InnerContainer({
   children,
   ...rest
-}: ContainerProps): React.JSX.Element | null {
+}: ContainerProps): JSX.Element | null {
   const theme = useTheme();
 
   const themedStyle = getInnerContainerStyles(theme);
diff --git a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx b/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
index dac1cd48788..6ed12ad08d9 100644
--- a/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultContent/DefaultContent.tsx
@@ -26,7 +26,7 @@ export default function DefaultContent<
   Header,
   headerText,
   validationErrors,
-}: DefaultContentProps<FieldsType>): React.JSX.Element {
+}: DefaultContentProps<FieldsType>): JSX.Element {
   const themedStyles = useThemedStyles(getDefaultStyle);
 
   const linkButtons = useMemo(
diff --git a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx b/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
index fc73223bd8b..057a8cef95b 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFooter/DefaultFooter.tsx
@@ -6,6 +6,6 @@ import { DefaultFooterProps } from './types';
 export default function DefaultFooter({
   children,
   ...rest
-}: DefaultFooterProps): React.JSX.Element | null {
+}: DefaultFooterProps): JSX.Element | null {
   return children ? <View {...rest}>{children}</View> : null;
 }
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
index c0473ef9c4a..aaf246d1d55 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx
@@ -20,7 +20,7 @@ const DefaultRadioFormFields = ({
   fieldLabelStyle,
   isPending,
   style,
-}: DefaultRadioFormFieldsProps): React.JSX.Element => {
+}: DefaultRadioFormFieldsProps): JSX.Element => {
   return (
     <RadioGroup disabled={isPending} style={style}>
       {(fields ?? []).map(({ name, value, ...props }) => {
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
index ba86fe8a828..98a1638eb59 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx
@@ -19,7 +19,7 @@ const DefaultTextFormFields = ({
   isPending = false,
   style,
   validationErrors,
-}: DefaultTextFormFieldsProps): React.JSX.Element => {
+}: DefaultTextFormFieldsProps): JSX.Element => {
   const formFields = (fields ?? []).map(({ name, type, ...field }) => {
     const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
 
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
index a60c3647da6..b879b6e1ffe 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/Field.tsx
@@ -28,7 +28,7 @@ const HIDDEN_INPUT_PROPS: TextInputProps = {
 
 const HiddenInput = () => <TextInput {...HIDDEN_INPUT_PROPS} />;
 
-const Field = ({ type, ...rest }: FieldProps): React.JSX.Element => {
+const Field = ({ type, ...rest }: FieldProps): JSX.Element => {
   const isPassword = type === 'password';
   const Field = isPassword
     ? PasswordField
diff --git a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx b/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
index 73fdd560312..206a2bd3d37 100644
--- a/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultFormFields/FieldErrors.tsx
@@ -7,7 +7,7 @@ export const FieldErrors = ({
   errors,
   errorStyle,
   style,
-}: FieldErrorsProps): React.JSX.Element | null => {
+}: FieldErrorsProps): JSX.Element | null => {
   if (!errors || !errors.length) {
     return null;
   }
diff --git a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx b/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
index 014781e871d..fb58da67941 100644
--- a/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
+++ b/packages/react-native/src/Authenticator/common/DefaultHeader/DefaultHeader.tsx
@@ -7,7 +7,7 @@ export default function DefaultHeader({
   children,
   level = 3,
   ...rest
-}: DefaultHeaderProps): React.JSX.Element | null {
+}: DefaultHeaderProps): JSX.Element | null {
   return children ? (
     <Heading {...rest} level={level}>
       {children}
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
index 66f848b80fc..15ade7884e7 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButton/FederatedProviderButton.tsx
@@ -11,7 +11,7 @@ export default function FederatedProviderButton({
   style,
   textStyle,
   ...rest
-}: FederatedProviderButtonProps): React.JSX.Element {
+}: FederatedProviderButtonProps): JSX.Element {
   const pressableStyle = usePressableContainerStyles({
     overrideStyle: style,
   });
diff --git a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
index 484b5540997..3c6b9e6b66d 100644
--- a/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
+++ b/packages/react-native/src/Authenticator/common/FederatedProviderButtons/FederatedProviderButtons.tsx
@@ -23,7 +23,7 @@ export default function FederatedProviderButtons({
   socialProviders,
   style,
   toFederatedSignIn,
-}: FederatedProviderButtonsProps): React.JSX.Element | null {
+}: FederatedProviderButtonsProps): JSX.Element | null {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/Authenticator/withAuthenticator.tsx b/packages/react-native/src/Authenticator/withAuthenticator.tsx
index 6d0f0b7c322..79331b5f5be 100644
--- a/packages/react-native/src/Authenticator/withAuthenticator.tsx
+++ b/packages/react-native/src/Authenticator/withAuthenticator.tsx
@@ -5,12 +5,12 @@ import { WithAuthenticatorOptions } from './types';
 export default function withAuthenticator<Props = {}>(
   Component: React.ComponentType<Props>,
   options: WithAuthenticatorOptions = {}
-): (props: Props) => React.JSX.Element {
+): (props: Props) => JSX.Element {
   return function WrappedWithAuthenticator(props: Props) {
     return (
       <Authenticator.Provider>
         <Authenticator {...options}>
-          <Component {...(props as Props & React.JSX.IntrinsicAttributes)} />
+          <Component {...(props as Props & JSX.IntrinsicAttributes)} />
         </Authenticator>
       </Authenticator.Provider>
     );
diff --git a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx b/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
index f8ee7266ca6..ca537203094 100644
--- a/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/BannerMessage/BannerMessage.tsx
@@ -10,7 +10,7 @@ import { BannerMessageProps } from './types';
 export default function BannerMessage({
   position = 'top',
   ...props
-}: BannerMessageProps): React.JSX.Element | null {
+}: BannerMessageProps): JSX.Element | null {
   const messageProps = useMessageProps(
     props,
     (imageDimensions: ImageDimensions) =>
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
index b54289d1395..47ee927c033 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessage.tsx
@@ -11,7 +11,7 @@ import { CarouselMessageProps } from './types';
 
 export default function CarouselMessage(
   props: CarouselMessageProps
-): React.JSX.Element {
+): JSX.Element {
   const { data, ...rest } = props;
   const { style } = rest;
 
diff --git a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
index d47ade24290..07d21a1accd 100644
--- a/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
+++ b/packages/react-native/src/InAppMessaging/components/CarouselMessage/CarouselMessageItem.tsx
@@ -10,7 +10,7 @@ import { CarouselMessageItemProps } from './types';
 
 export default function CarouselMessageItem(
   props: CarouselMessageItemProps
-): React.JSX.Element | null {
+): JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,
diff --git a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx b/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
index 7c38ccb3b98..9d6da819885 100644
--- a/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/FullScreenMessage/FullScreenMessage.tsx
@@ -11,7 +11,7 @@ import { FullScreenMessageProps } from './types';
 
 export default function FullScreenMessage(
   props: FullScreenMessageProps
-): React.JSX.Element | null {
+): JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,
diff --git a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx b/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
index da669ea257f..fb5e77f6454 100644
--- a/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
+++ b/packages/react-native/src/InAppMessaging/components/InAppMessageDisplay/InAppMessageDisplay.tsx
@@ -27,7 +27,7 @@ const onMessageAction: OnMessageAction = ({ action, url }) => {
 
 function InAppMessageDisplay({
   components: overrideComponents,
-}: InAppMessageDisplayProps): React.JSX.Element | null {
+}: InAppMessageDisplayProps): JSX.Element | null {
   const components = React.useMemo(
     () => ({ ...platformComponents, ...overrideComponents }),
     [overrideComponents]
diff --git a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx b/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
index 72baab59c97..c2d37b7c102 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
+++ b/packages/react-native/src/InAppMessaging/components/MessageLayout/MessageLayout.tsx
@@ -16,7 +16,7 @@ import { LayoutProps } from './types';
 export default function MessageLayout({
   orientation,
   ...props
-}: LayoutProps): React.JSX.Element {
+}: LayoutProps): JSX.Element {
   const {
     body,
     hasButtons,
diff --git a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx b/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
index 55c3a7658e5..b37bb4d8f61 100644
--- a/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
+++ b/packages/react-native/src/InAppMessaging/components/MessageWrapper/MessageWrapper.tsx
@@ -17,7 +17,7 @@ export default function MessageWrapper({
   children,
   disableSafeAreaView,
   style,
-}: MessageWrapperProps): React.JSX.Element {
+}: MessageWrapperProps): JSX.Element {
   return (
     <Modal transparent visible supportedOrientations={SUPPORTED_ORIENTATIONS}>
       <SafeAreaProvider>
diff --git a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx b/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
index 3aa01096118..2267e1de9e2 100644
--- a/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
+++ b/packages/react-native/src/InAppMessaging/components/ModalMessage/ModalMessage.tsx
@@ -10,7 +10,7 @@ import { ModalMessageProps } from './types';
 
 export default function ModalMessage(
   props: ModalMessageProps
-): React.JSX.Element | null {
+): JSX.Element | null {
   const { deviceOrientation, isPortraitMode } = useDeviceOrientation();
   const messageProps = useMessageProps(
     props,
diff --git a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx b/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
index 693c3aedc5b..9501989fb10 100644
--- a/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
+++ b/packages/react-native/src/InAppMessaging/components/withInAppMessaging/withInAppMessaging.tsx
@@ -6,12 +6,12 @@ import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
 export default function withInAppMessaging<Props = {}>(
   Component: React.ComponentType<Props>,
   options?: { components?: MessageComponents }
-): (props: Props) => React.JSX.Element {
+): (props: Props) => JSX.Element {
   return function WrappedWithInAppMessaging(props: Props) {
     return (
       <InAppMessagingProvider>
         <InAppMessageDisplay {...options} />
-        <Component {...(props as Props & React.JSX.IntrinsicAttributes)} />
+        <Component {...(props as Props & JSX.IntrinsicAttributes)} />
       </InAppMessagingProvider>
     );
   };
diff --git a/packages/react-native/src/primitives/Button/Button.tsx b/packages/react-native/src/primitives/Button/Button.tsx
index 8dbfe6ebb22..b14770fa319 100644
--- a/packages/react-native/src/primitives/Button/Button.tsx
+++ b/packages/react-native/src/primitives/Button/Button.tsx
@@ -15,7 +15,7 @@ export default function Button({
   textStyle,
   variant = 'default',
   ...rest
-}: ButtonProps): React.JSX.Element {
+}: ButtonProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Carousel/Carousel.tsx b/packages/react-native/src/primitives/Carousel/Carousel.tsx
index 495012b7d2e..9ae45204ff2 100644
--- a/packages/react-native/src/primitives/Carousel/Carousel.tsx
+++ b/packages/react-native/src/primitives/Carousel/Carousel.tsx
@@ -15,7 +15,7 @@ import { CarouselProps } from './types';
 
 export default function Carousel<T>(
   props: CarouselProps<T>
-): React.JSX.Element | null {
+): JSX.Element | null {
   const {
     data,
     indicatorActiveStyle,
diff --git a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx b/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
index 563b6353f10..46f6fe66784 100644
--- a/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
+++ b/packages/react-native/src/primitives/Carousel/CarouselPageIndicator.tsx
@@ -15,7 +15,7 @@ export default function CarouselPageIndicator({
   indicatorTestId,
   numberOfItems,
   style,
-}: CarouselPageIndicatorProps): React.JSX.Element {
+}: CarouselPageIndicatorProps): JSX.Element {
   const items = useMemo(
     () =>
       new Array(numberOfItems ?? 0)
diff --git a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx b/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
index 854f4a750c7..689003a651a 100644
--- a/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react-native/src/primitives/Checkbox/Checkbox.tsx
@@ -21,7 +21,7 @@ export default function Checkbox<T>({
   style,
   value,
   ...rest
-}: CheckboxProps<T>): React.JSX.Element {
+}: CheckboxProps<T>): JSX.Element {
   const [checked, setChecked] = useState(selected ?? false);
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, labelPosition);
diff --git a/packages/react-native/src/primitives/Divider/Divider.tsx b/packages/react-native/src/primitives/Divider/Divider.tsx
index ca3ecf7b5ac..125845295bd 100644
--- a/packages/react-native/src/primitives/Divider/Divider.tsx
+++ b/packages/react-native/src/primitives/Divider/Divider.tsx
@@ -13,7 +13,7 @@ export default function Divider({
   labelStyle,
   lineStyle,
   style,
-}: DividerProps): React.JSX.Element {
+}: DividerProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx b/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
index de7a9c4560a..1f6cb1d84dc 100644
--- a/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
+++ b/packages/react-native/src/primitives/ErrorMessage/ErrorMessage.tsx
@@ -21,7 +21,7 @@ export default function ErrorMessage({
   onDismiss,
   style,
   ...rest
-}: ErrorMessageProps): React.JSX.Element {
+}: ErrorMessageProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Heading/Heading.tsx b/packages/react-native/src/primitives/Heading/Heading.tsx
index 5f9f7688433..4ca0ac419e0 100644
--- a/packages/react-native/src/primitives/Heading/Heading.tsx
+++ b/packages/react-native/src/primitives/Heading/Heading.tsx
@@ -11,7 +11,7 @@ export default function Heading({
   level = 6,
   style,
   ...rest
-}: HeadingProps): React.JSX.Element {
+}: HeadingProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Icon/Icon.tsx b/packages/react-native/src/primitives/Icon/Icon.tsx
index 59a690fdd4d..f3d49d18e21 100644
--- a/packages/react-native/src/primitives/Icon/Icon.tsx
+++ b/packages/react-native/src/primitives/Icon/Icon.tsx
@@ -13,7 +13,7 @@ export default function Icon({
   size,
   style,
   ...rest
-}: IconProps): React.JSX.Element {
+}: IconProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = useMemo(
     () => getThemedStyles(theme, color, size),
diff --git a/packages/react-native/src/primitives/IconButton/IconButton.tsx b/packages/react-native/src/primitives/IconButton/IconButton.tsx
index 21a099c207a..94f776a94b7 100644
--- a/packages/react-native/src/primitives/IconButton/IconButton.tsx
+++ b/packages/react-native/src/primitives/IconButton/IconButton.tsx
@@ -17,7 +17,7 @@ export default function IconButton({
   source,
   style,
   ...rest
-}: IconButtonProps): React.JSX.Element {
+}: IconButtonProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Label/Label.tsx b/packages/react-native/src/primitives/Label/Label.tsx
index 05a54fe4fd9..6d1e65900bd 100644
--- a/packages/react-native/src/primitives/Label/Label.tsx
+++ b/packages/react-native/src/primitives/Label/Label.tsx
@@ -11,7 +11,7 @@ export default function Label({
   style,
   variant = 'primary',
   ...rest
-}: LabelProps): React.JSX.Element {
+}: LabelProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
   const textStyle = [themedStyle.text, themedStyle[variant], style];
diff --git a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx b/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
index 29c2537a431..2af94288d7a 100644
--- a/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
+++ b/packages/react-native/src/primitives/PasswordField/PasswordField.tsx
@@ -19,7 +19,7 @@ export default function PasswordField({
   showPasswordButton = true,
   style,
   ...rest
-}: PasswordFieldProps): React.JSX.Element {
+}: PasswordFieldProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx b/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
index d406f9e4db9..08bc85f271b 100644
--- a/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
+++ b/packages/react-native/src/primitives/PhoneNumberField/PhoneNumberField.tsx
@@ -11,7 +11,7 @@ export default function PhoneNumberField({
   labelStyle,
   style,
   ...rest
-}: PhoneNumberFieldProps): React.JSX.Element {
+}: PhoneNumberFieldProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Radio/Radio.tsx b/packages/react-native/src/primitives/Radio/Radio.tsx
index e6c25e7f165..5d2dfa79d06 100644
--- a/packages/react-native/src/primitives/Radio/Radio.tsx
+++ b/packages/react-native/src/primitives/Radio/Radio.tsx
@@ -33,7 +33,7 @@ export default function Radio<T>({
   style,
   value,
   ...rest
-}: RadioProps<T>): React.JSX.Element {
+}: RadioProps<T>): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx b/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
index 6ca9c9065de..157ace888c0 100644
--- a/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
+++ b/packages/react-native/src/primitives/RadioGroup/RadioGroup.tsx
@@ -34,7 +34,7 @@ export default function RadioGroup<T>({
   size,
   style,
   ...rest
-}: RadioGroupProps<T>): React.JSX.Element {
+}: RadioGroupProps<T>): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme);
 
diff --git a/packages/react-native/src/primitives/Tabs/Tab.tsx b/packages/react-native/src/primitives/Tabs/Tab.tsx
index 17778b54b14..232ebbf8b5a 100644
--- a/packages/react-native/src/primitives/Tabs/Tab.tsx
+++ b/packages/react-native/src/primitives/Tabs/Tab.tsx
@@ -14,7 +14,7 @@ export default function Tab({
   textStyle,
   indicatorPosition,
   ...rest
-}: TabProps): React.JSX.Element {
+}: TabProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, indicatorPosition);
 
diff --git a/packages/react-native/src/primitives/Tabs/Tabs.tsx b/packages/react-native/src/primitives/Tabs/Tabs.tsx
index 52e11619fe5..72af1b2cc73 100644
--- a/packages/react-native/src/primitives/Tabs/Tabs.tsx
+++ b/packages/react-native/src/primitives/Tabs/Tabs.tsx
@@ -14,7 +14,7 @@ export default function Tabs({
   selectedIndex = 0,
   style,
   ...rest
-}: TabsProps): React.JSX.Element {
+}: TabsProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = getThemedStyles(theme, indicatorPosition);
 
diff --git a/packages/react-native/src/primitives/TextField/TextField.tsx b/packages/react-native/src/primitives/TextField/TextField.tsx
index d7f5157a886..09b7a6ff83b 100644
--- a/packages/react-native/src/primitives/TextField/TextField.tsx
+++ b/packages/react-native/src/primitives/TextField/TextField.tsx
@@ -25,7 +25,7 @@ export default function TextField({
   labelStyle,
   style,
   ...rest
-}: TextFieldProps): React.JSX.Element {
+}: TextFieldProps): JSX.Element {
   const theme = useTheme();
   const themedStyle = useMemo(() => getThemedStyles(theme), [theme]);
 
diff --git a/packages/react-native/src/theme/ThemeProvider.tsx b/packages/react-native/src/theme/ThemeProvider.tsx
index 4c020fa9586..258447c5d4c 100644
--- a/packages/react-native/src/theme/ThemeProvider.tsx
+++ b/packages/react-native/src/theme/ThemeProvider.tsx
@@ -14,7 +14,7 @@ export const ThemeProvider = ({
   children,
   theme,
   colorMode,
-}: ThemeProviderProps): React.JSX.Element => {
+}: ThemeProviderProps): JSX.Element => {
   const value = React.useMemo(
     () => ({ theme: createTheme(theme, colorMode) }),
     [theme, colorMode]
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index 7631488f272..5f1e4c06372 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -47,8 +47,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "devDependencies": {
     "@types/tinycolor2": "^1.4.3"
diff --git a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
index 4e40c05bc3d..8bdbdff1671 100644
--- a/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/Backdrop/Backdrop.tsx
@@ -6,10 +6,7 @@ import { BackdropProps } from './types';
 
 export const BACKDROP_TEST_ID = 'inappmessaging-backdrop';
 
-export function Backdrop({
-  onClick,
-  ...rest
-}: BackdropProps): React.JSX.Element {
+export function Backdrop({ onClick, ...rest }: BackdropProps): JSX.Element {
   return (
     <View
       className="amplify-inappmessaging-backdrop"
diff --git a/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx b/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
index 91e32ad25cf..adc26235d29 100644
--- a/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/Backdrop/withBackdrop.tsx
@@ -6,16 +6,16 @@ import { Backdrop } from './Backdrop';
 import { BackdropProps } from './types';
 
 export function withBackdrop<Props>(
-  Content: (props: Props) => React.JSX.Element,
+  Content: (props: Props) => JSX.Element,
   options: BackdropProps = {}
-): (props: Props) => React.JSX.Element {
+): (props: Props) => JSX.Element {
   return function ContentWithBackdrop(props: Props) {
     return (
       <>
         <Backdrop {...options} />
         <Flex className="amplify-inappmessaging-backdrop-content-container">
           <View className="amplify-inappmessaging-backdrop-content">
-            <Content {...(props as Props & React.JSX.IntrinsicAttributes)} />
+            <Content {...(props as Props & JSX.IntrinsicAttributes)} />
           </View>
         </Flex>
       </>
diff --git a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
index b5d94855a62..5a0b8d1d348 100644
--- a/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/BannerMessage/BannerMessage.tsx
@@ -9,9 +9,7 @@ import { MessageLayout } from '../MessageLayout';
 import { BLOCK_CLASS } from './constants';
 import { BannerMessageProps } from './types';
 
-export function BannerMessage(
-  props: BannerMessageProps
-): React.JSX.Element | null {
+export function BannerMessage(props: BannerMessageProps): JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullWidth = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
index 5eae1c5ac47..96da2266ed7 100644
--- a/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/CloseIconButton/CloseIconButton.tsx
@@ -11,7 +11,7 @@ export function CloseIconButton({
   onClick,
   style,
   ...rest
-}: CloseIconButtonProps): React.JSX.Element {
+}: CloseIconButtonProps): JSX.Element {
   return (
     <Button
       ariaLabel={dismissButtonLabel}
diff --git a/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
index e7c8ac3d8c7..2e0f9465e42 100644
--- a/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/FullScreenMessage/FullScreenMessage.tsx
@@ -12,7 +12,7 @@ import { FullScreenMessageProps } from './types';
 
 export function FullScreenMessage(
   props: FullScreenMessageProps
-): React.JSX.Element | null {
+): JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullScreen = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx b/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
index 756c7a00dce..01ca58d6e4c 100644
--- a/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/InAppMessageDisplay/InAppMessageDisplay.tsx
@@ -38,7 +38,7 @@ const onMessageAction: OnMessageAction = ({ action, url }) => {
 
 function InAppMessageDisplay({
   components: overrideComponents,
-}: InAppMessageDisplayProps): React.JSX.Element {
+}: InAppMessageDisplayProps): JSX.Element {
   const components = React.useMemo(
     () => ({ ...platformComponents, ...overrideComponents }),
     [overrideComponents]
diff --git a/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx b/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
index 65915163365..1ba149c1869 100644
--- a/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/MessageLayout/MessageLayout.tsx
@@ -47,7 +47,7 @@ export function MessageLayout({
   primaryButton,
   secondaryButton,
   styles,
-}: MessageLayoutProps): React.JSX.Element {
+}: MessageLayoutProps): JSX.Element {
   const buttonModifiers = React.useMemo(
     () => ({
       primary: getButtonModifier(styles.primaryButton),
diff --git a/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx b/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
index 94a8fb0d5fc..2e30fd8f8de 100644
--- a/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/ModalMessage/ModalMessage.tsx
@@ -9,9 +9,7 @@ import { MessageLayout } from '../MessageLayout';
 import { BLOCK_CLASS, DIALOG_CLASS } from './constants';
 import { ModalMessageProps } from './types';
 
-export function ModalMessage(
-  props: ModalMessageProps
-): React.JSX.Element | null {
+export function ModalMessage(props: ModalMessageProps): JSX.Element | null {
   const messageProps = useMessageProps(props);
   const shouldBeFullWidth = useBreakpointValue([true, true, false]);
   const { shouldRenderMessage, styles } = messageProps;
diff --git a/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx b/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx
index 693c3aedc5b..9501989fb10 100644
--- a/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx
+++ b/packages/react-notifications/src/components/InAppMessaging/withInAppMessaging/withInAppMessaging.tsx
@@ -6,12 +6,12 @@ import { InAppMessageDisplay, MessageComponents } from '../InAppMessageDisplay';
 export default function withInAppMessaging<Props = {}>(
   Component: React.ComponentType<Props>,
   options?: { components?: MessageComponents }
-): (props: Props) => React.JSX.Element {
+): (props: Props) => JSX.Element {
   return function WrappedWithInAppMessaging(props: Props) {
     return (
       <InAppMessagingProvider>
         <InAppMessageDisplay {...options} />
-        <Component {...(props as Props & React.JSX.IntrinsicAttributes)} />
+        <Component {...(props as Props & JSX.IntrinsicAttributes)} />
       </InAppMessagingProvider>
     );
   };
diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json
index c69dbcc1097..c77a24dc582 100644
--- a/packages/react-storage/package.json
+++ b/packages/react-storage/package.json
@@ -54,8 +54,8 @@
   },
   "peerDependencies": {
     "aws-amplify": "^6.9.0",
-    "react": "^16.14 || ^17 || ^18 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "devDependencies": {
     "jest-tsd": "^0.2.2",
@@ -70,7 +70,7 @@
       "name": "createStorageBrowser",
       "path": "dist/esm/browser.mjs",
       "import": "{ createStorageBrowser }",
-      "limit": "63 kB",
+      "limit": "60.5 kB",
       "ignore": [
         "@aws-amplify/storage"
       ]
@@ -79,7 +79,7 @@
       "name": "StorageBrowser",
       "path": "dist/esm/index.mjs",
       "import": "{ StorageBrowser }",
-      "limit": "85.1 kB"
+      "limit": "83 kB"
     },
     {
       "name": "FileUploader",
diff --git a/packages/react-storage/src/components/FileUploader/FileUploader.tsx b/packages/react-storage/src/components/FileUploader/FileUploader.tsx
index 1d2b59d3577..755e551891a 100644
--- a/packages/react-storage/src/components/FileUploader/FileUploader.tsx
+++ b/packages/react-storage/src/components/FileUploader/FileUploader.tsx
@@ -61,7 +61,7 @@ const FileUploaderBase = React.forwardRef(function FileUploader(
     useAccelerateEndpoint,
   }: FileUploaderPathProps | FileUploaderProps,
   ref: React.ForwardedRef<FileUploaderHandle>
-): React.JSX.Element {
+): JSX.Element {
   if (!maxFileCount) {
     // eslint-disable-next-line no-console
     console.warn(MISSING_REQUIRED_PROPS_MESSAGE);
diff --git a/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts b/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
index cfa5c92f12c..be4e9a2c395 100644
--- a/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
+++ b/packages/react-storage/src/components/FileUploader/hooks/useFileUploader/useFileUploader.ts
@@ -3,7 +3,7 @@ import React from 'react';
 import { isObject } from '@aws-amplify/ui';
 
 import { StorageFiles, FileStatus, DefaultFile } from '../../types';
-import { GetFileErrorMessage } from './types';
+import { Action, GetFileErrorMessage, UseFileUploaderState } from './types';
 import { fileUploaderStateReducer } from './reducer';
 import {
   addFilesAction,
@@ -45,7 +45,9 @@ const createFileFromDefault = (file: DefaultFile) =>
 export function useFileUploader(
   defaultFiles: Array<DefaultFile> = []
 ): UseFileUploader {
-  const [{ files }, dispatch] = React.useReducer(fileUploaderStateReducer, {
+  const [{ files }, dispatch] = React.useReducer<
+    (prevState: UseFileUploaderState, action: Action) => UseFileUploaderState
+  >(fileUploaderStateReducer, {
     files: (Array.isArray(defaultFiles)
       ? defaultFiles.map(createFileFromDefault).filter((file) => !!file)
       : []) as StorageFiles,
diff --git a/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx b/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
index d7063c40eeb..e417120f27e 100644
--- a/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/Container/Container.tsx
@@ -10,6 +10,6 @@ export interface ContainerProps {
 export function Container({
   children,
   className,
-}: ContainerProps): React.JSX.Element {
+}: ContainerProps): JSX.Element {
   return <View className={className}>{children}</View>;
 }
diff --git a/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx b/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
index b888f7669e5..b32f06661bf 100644
--- a/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/Container/__tests__/Container.spec.tsx
@@ -7,7 +7,7 @@ import { Container } from '../Container';
 
 const CHILD_CONTENT = 'Test Children';
 
-const MockChildren = (): React.JSX.Element => {
+const MockChildren = (): JSX.Element => {
   return <View>{CHILD_CONTENT}</View>;
 };
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx b/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
index a5c1de6e560..0d1111aad29 100644
--- a/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/DropZone/DropZone.tsx
@@ -17,7 +17,7 @@ export function DropZone({
   onDragStart,
   onDrop,
   testId,
-}: DropZoneProps): React.JSX.Element {
+}: DropZoneProps): JSX.Element {
   const { dropFilesText } = displayText;
   const icons = useIcons('storageManager');
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
index ffdd0d8196a..b20f1614e3c 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileControl.tsx
@@ -25,7 +25,7 @@ export function FileControl({
   status,
   displayText,
   thumbnailUrl,
-}: FileControlProps): React.JSX.Element {
+}: FileControlProps): JSX.Element {
   const {
     getPausedText,
     getUploadingText,
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
index a33cd68e663..54321b215e6 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileDetails.tsx
@@ -6,7 +6,7 @@ import { UploadDetailsProps } from './types';
 export const UploadDetails = ({
   displayName,
   fileSize,
-}: UploadDetailsProps): React.JSX.Element => {
+}: UploadDetailsProps): JSX.Element => {
   return (
     <>
       <View className={ComponentClassName.FileUploaderFileMain}>
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
index a0dced4dc1c..4c584a06c06 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileList.tsx
@@ -18,7 +18,7 @@ export function FileList({
   onPause,
   showThumbnails,
   maxFileCount,
-}: FileListProps): React.JSX.Element | null {
+}: FileListProps): JSX.Element | null {
   if (files.length < 1) {
     return null;
   }
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
index 412de21c270..a117ad4753a 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileRemoveButton.tsx
@@ -6,7 +6,7 @@ import { FileRemoveButtonProps } from './types';
 export const FileRemoveButton = ({
   altText,
   onClick,
-}: FileRemoveButtonProps): React.JSX.Element => {
+}: FileRemoveButtonProps): JSX.Element => {
   const icons = useIcons('storageManager');
   return (
     <Button
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
index faa4cdd4d56..4818537ddad 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileStatusMessage.tsx
@@ -15,7 +15,7 @@ export const FileStatusMessage = ({
   percentage,
   status,
   uploadSuccessfulText,
-}: FileStatusMessageProps): React.JSX.Element | null => {
+}: FileStatusMessageProps): JSX.Element | null => {
   const icons = useIcons('storageManager');
   switch (status) {
     case FileStatus.UPLOADING: {
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx b/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
index 70d0071e04a..8bbfc12b052 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileList/FileThumbnail.tsx
@@ -9,7 +9,7 @@ export const FileThumbnail = ({
   fileName,
   isImage,
   url,
-}: FileThumbnailProps): React.JSX.Element => {
+}: FileThumbnailProps): JSX.Element => {
   const icons = useIcons('storageManager');
   const thumbnail = isImage ? (
     <Image alt={fileName} src={url} />
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx b/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
index 594602107db..beb0a1d4a58 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileListFooter/FileListFooter.tsx
@@ -16,7 +16,7 @@ export function FileListFooter({
   remainingFilesCount,
   onClearAll,
   onUploadAll,
-}: FileListFooterProps): React.JSX.Element {
+}: FileListFooterProps): JSX.Element {
   const { clearAllButtonText, getUploadButtonText } = displayText;
   return (
     <View className={ComponentClassName.FileUploaderPreviewerFooter}>
diff --git a/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx b/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
index 2d1e49e661e..1dedbb4cc2b 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FileListHeader/FileListHeader.tsx
@@ -17,7 +17,7 @@ export function FileListHeader({
   fileCount,
   remainingFilesCount,
   selectedFilesCount = 0,
-}: FileListHeaderProps): React.JSX.Element {
+}: FileListHeaderProps): JSX.Element {
   const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } =
     displayText;
 
diff --git a/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx b/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
index 5f8dacd6df1..c249b5fd976 100644
--- a/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
+++ b/packages/react-storage/src/components/FileUploader/ui/FilePicker/FilePicker.tsx
@@ -10,7 +10,7 @@ export function FilePicker({
   className = ComponentClassName.FileUploaderFilePicker,
   size = 'small',
   ...props
-}: FilePickerProps): React.JSX.Element {
+}: FilePickerProps): JSX.Element {
   return (
     <Button {...props} className={className} size={size}>
       {children}
diff --git a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
index c6d3e1539f1..9cfea0f4537 100644
--- a/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
+++ b/packages/react-storage/src/components/StorageBrowser/context/elements/defaults.tsx
@@ -215,7 +215,7 @@ function View({ variant, ...props }: ViewElementProps): React.JSX.Element {
   }
 }
 
-const Nav = (props: NavElementProps): React.JSX.Element => (
+const Nav = (props: NavElementProps): JSX.Element => (
   <_View {...props} as="nav" />
 );
 
diff --git a/packages/react-storage/src/components/StorageImage/StorageImage.tsx b/packages/react-storage/src/components/StorageImage/StorageImage.tsx
index f12aec452c5..56bfd573146 100644
--- a/packages/react-storage/src/components/StorageImage/StorageImage.tsx
+++ b/packages/react-storage/src/components/StorageImage/StorageImage.tsx
@@ -53,7 +53,7 @@ export const StorageImage = ({
   onGetUrlError,
   validateObjectExistence = true,
   ...rest
-}: StorageImageProps | StorageImagePathProps): React.JSX.Element => {
+}: StorageImageProps | StorageImagePathProps): JSX.Element => {
   const hasImgkey = !!imgKey;
   const hasPath = !!path;
   const hasDeprecatedOptions = !!accessLevel || !!identityId;
diff --git a/packages/react-storage/src/components/StorageManager/StorageManager.tsx b/packages/react-storage/src/components/StorageManager/StorageManager.tsx
index 97170827075..aacbc785759 100644
--- a/packages/react-storage/src/components/StorageManager/StorageManager.tsx
+++ b/packages/react-storage/src/components/StorageManager/StorageManager.tsx
@@ -62,7 +62,7 @@ const StorageManagerBase = React.forwardRef(function StorageManager(
     useAccelerateEndpoint,
   }: StorageManagerPathProps | StorageManagerProps,
   ref: React.ForwardedRef<StorageManagerHandle>
-): React.JSX.Element {
+): JSX.Element {
   useDeprecationWarning({
     message:
       'The `StorageManager` component has been renamed as the `FileUploader` component.',
diff --git a/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx b/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
index d7063c40eeb..e417120f27e 100644
--- a/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/Container/Container.tsx
@@ -10,6 +10,6 @@ export interface ContainerProps {
 export function Container({
   children,
   className,
-}: ContainerProps): React.JSX.Element {
+}: ContainerProps): JSX.Element {
   return <View className={className}>{children}</View>;
 }
diff --git a/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx b/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
index b888f7669e5..b32f06661bf 100644
--- a/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/Container/__tests__/Container.spec.tsx
@@ -7,7 +7,7 @@ import { Container } from '../Container';
 
 const CHILD_CONTENT = 'Test Children';
 
-const MockChildren = (): React.JSX.Element => {
+const MockChildren = (): JSX.Element => {
   return <View>{CHILD_CONTENT}</View>;
 };
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx b/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
index 6b882c9f192..7ccc29139ca 100644
--- a/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/DropZone/DropZone.tsx
@@ -17,7 +17,7 @@ export function DropZone({
   onDragStart,
   onDrop,
   testId,
-}: DropZoneProps): React.JSX.Element {
+}: DropZoneProps): JSX.Element {
   const { dropFilesText } = displayText;
   const icons = useIcons('storageManager');
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
index 3baba83b2ba..83fa59fa38a 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileControl.tsx
@@ -26,7 +26,7 @@ export function FileControl({
   status,
   displayText,
   thumbnailUrl,
-}: FileControlProps): React.JSX.Element {
+}: FileControlProps): JSX.Element {
   const {
     getPausedText,
     getUploadingText,
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
index 0bde2dd5936..7b915e34509 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileDetails.tsx
@@ -6,7 +6,7 @@ import { UploadDetailsProps } from './types';
 export const UploadDetails = ({
   displayName,
   fileSize,
-}: UploadDetailsProps): React.JSX.Element => {
+}: UploadDetailsProps): JSX.Element => {
   return (
     <>
       <View className={ComponentClassName.StorageManagerFileMain}>
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
index bd4ee6eda97..649d7c2df66 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileList.tsx
@@ -18,7 +18,7 @@ export function FileList({
   onPause,
   showThumbnails,
   maxFileCount,
-}: FileListProps): React.JSX.Element | null {
+}: FileListProps): JSX.Element | null {
   if (files.length < 1) {
     return null;
   }
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
index 412de21c270..a117ad4753a 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileRemoveButton.tsx
@@ -6,7 +6,7 @@ import { FileRemoveButtonProps } from './types';
 export const FileRemoveButton = ({
   altText,
   onClick,
-}: FileRemoveButtonProps): React.JSX.Element => {
+}: FileRemoveButtonProps): JSX.Element => {
   const icons = useIcons('storageManager');
   return (
     <Button
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
index 9fcb634e10b..15c75bf8b99 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileStatusMessage.tsx
@@ -15,7 +15,7 @@ export const FileStatusMessage = ({
   percentage,
   status,
   uploadSuccessfulText,
-}: FileStatusMessageProps): React.JSX.Element | null => {
+}: FileStatusMessageProps): JSX.Element | null => {
   const icons = useIcons('storageManager');
   switch (status) {
     case FileStatus.UPLOADING: {
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx b/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
index 54d11b77b6b..c1abd1de491 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileList/FileThumbnail.tsx
@@ -9,7 +9,7 @@ export const FileThumbnail = ({
   fileName,
   isImage,
   url,
-}: FileThumbnailProps): React.JSX.Element => {
+}: FileThumbnailProps): JSX.Element => {
   const icons = useIcons('storageManager');
   const thumbnail = isImage ? (
     <Image alt={fileName} src={url} />
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx b/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
index 745fc9d708c..48d94870220 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileListFooter/FileListFooter.tsx
@@ -16,7 +16,7 @@ export function FileListFooter({
   remainingFilesCount,
   onClearAll,
   onUploadAll,
-}: FileListFooterProps): React.JSX.Element {
+}: FileListFooterProps): JSX.Element {
   const { clearAllButtonText, getUploadButtonText } = displayText;
   return (
     <View className={ComponentClassName.StorageManagerPreviewerFooter}>
diff --git a/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx b/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
index ef49773d069..156dde0aa4d 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FileListHeader/FileListHeader.tsx
@@ -18,7 +18,7 @@ export function FileListHeader({
   fileCount,
   remainingFilesCount,
   selectedFilesCount = 0,
-}: FileListHeaderProps): React.JSX.Element {
+}: FileListHeaderProps): JSX.Element {
   const { getFilesUploadedText, getRemainingFilesText, getSelectedFilesText } =
     displayText;
 
diff --git a/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx b/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
index 06f208da75c..3fd5fbc888a 100644
--- a/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
+++ b/packages/react-storage/src/components/StorageManager/ui/FilePicker/FilePicker.tsx
@@ -10,7 +10,7 @@ export function FilePicker({
   className = ComponentClassName.StorageManagerFilePicker,
   size = 'small',
   ...props
-}: FilePickerProps): React.JSX.Element {
+}: FilePickerProps): JSX.Element {
   return (
     <Button {...props} className={className} size={size}>
       {children}
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
index 1a7ecf72d69..cadfd91bc45 100644
--- a/packages/react/__tests__/__snapshots__/exports.ts.snap
+++ b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -339,9 +339,6 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
-      "ref": {
-        "type": "string",
-      },
       "right": {
         "type": "string",
       },
@@ -1755,9 +1752,6 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
-      "ref": {
-        "type": "string",
-      },
       "right": {
         "type": "string",
       },
@@ -4034,9 +4028,6 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
-      "ref": {
-        "type": "string",
-      },
       "right": {
         "type": "string",
       },
@@ -9923,9 +9914,6 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "readOnly": {
         "type": "boolean",
       },
-      "ref": {
-        "type": "string",
-      },
       "rel": {
         "type": "string",
       },
@@ -14940,9 +14928,6 @@ exports[`primitive catalog should match primitives catalog snapshot 1`] = `
       "position": {
         "type": "string",
       },
-      "ref": {
-        "type": "string",
-      },
       "right": {
         "type": "string",
       },
diff --git a/packages/react/package.json b/packages/react/package.json
index 9601f70fa57..a6df797d66f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -68,8 +68,8 @@
   "peerDependencies": {
     "@aws-amplify/core": "*",
     "aws-amplify": "^6.9.0",
-    "react": "^16.14.0 || ^17.0 || ^18.0 || ^19",
-    "react-dom": "^16.14 || ^17 || ^18 || ^19"
+    "react": "^16.14.0 || ^17.0 || ^18.0",
+    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "peerDependenciesMeta": {
     "aws-amplify": {
@@ -79,7 +79,8 @@
   "devDependencies": {
     "@svgr/core": "^5.5.0",
     "@types/qrcode": "^1.4.2",
-    "jest-matchmedia-mock": "^1.1.0"
+    "jest-matchmedia-mock": "^1.1.0",
+    "react-router-dom": "^6.2.1"
   },
   "sideEffects": [
     "dist/**/*.css"
diff --git a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
index cb979070def..742ca68d47a 100644
--- a/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
+++ b/packages/react/src/components/AccountSettings/ChangePassword/ChangePassword.tsx
@@ -46,7 +46,7 @@ function ChangePassword({
   onError,
   onSuccess,
   validators,
-}: ChangePasswordProps): React.JSX.Element | null {
+}: ChangePasswordProps): JSX.Element | null {
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
   const [formValues, setFormValues] = React.useState<FormValues>({});
   const [validationError, setValidationError] = React.useState<ValidationError>(
diff --git a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
index ec9494360dc..49eb5456265 100644
--- a/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
+++ b/packages/react/src/components/AccountSettings/DeleteUser/DeleteUser.tsx
@@ -19,7 +19,7 @@ function DeleteUser({
   handleDelete,
   onError,
   onSuccess,
-}: DeleteUserProps): React.JSX.Element | null {
+}: DeleteUserProps): JSX.Element | null {
   const [state, setState] = React.useState<DeleteUserState>('IDLE');
   const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
 
diff --git a/packages/react/src/components/Authenticator/Authenticator.tsx b/packages/react/src/components/Authenticator/Authenticator.tsx
index 0896c1131f3..aa1a0cc0399 100644
--- a/packages/react/src/components/Authenticator/Authenticator.tsx
+++ b/packages/react/src/components/Authenticator/Authenticator.tsx
@@ -37,10 +37,7 @@ export type AuthenticatorProps = Partial<
     RouterProps & {
       children:
         | React.ReactNode
-        | ((props: {
-            signOut?: SignOut;
-            user?: AuthUser;
-          }) => React.JSX.Element);
+        | ((props: { signOut?: SignOut; user?: AuthUser }) => JSX.Element);
       formFields: {
         [key in FormFieldComponents]?: {
           [field_name: string]: ReactFormFieldOptions;
@@ -79,7 +76,7 @@ export function AuthenticatorInternal({
   services,
   socialProviders,
   variation,
-}: AuthenticatorProps): React.JSX.Element {
+}: AuthenticatorProps): JSX.Element {
   useDeprecationWarning({
     message:
       'The `passwordSettings` prop has been deprecated and will be removed in a future major version of Amplify UI.',
@@ -140,7 +137,7 @@ export function AuthenticatorInternal({
 /**
  * [📖 Docs](https://ui.docs.amplify.aws/react/connected-components/authenticator)
  */
-export function Authenticator(props: AuthenticatorProps): React.JSX.Element {
+export function Authenticator(props: AuthenticatorProps): JSX.Element {
   useSetUserAgent({
     componentName: 'Authenticator',
     packageName: 'react',
diff --git a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
index f5c35b0009c..8fb4190e691 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx
@@ -16,7 +16,7 @@ const { getChallengeText } = authenticatorTextUtil;
 export const ConfirmSignIn = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -64,7 +64,7 @@ function Header() {
 }
 
 ConfirmSignIn.Header = Header;
-ConfirmSignIn.Footer = function Footer(): React.JSX.Element {
+ConfirmSignIn.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
index c6469654501..bfd7fca371d 100644
--- a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
+++ b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -22,7 +22,7 @@ const {
 export function ConfirmSignUp({
   className,
   variation,
-}: RouteProps): React.JSX.Element {
+}: RouteProps): JSX.Element {
   const { isPending, resendCode, codeDeliveryDetails } = useAuthenticator(
     (context) => [
       context.isPending,
@@ -97,7 +97,7 @@ const DefaultHeader = () => {
 
 ConfirmSignUp.Header = DefaultHeader;
 
-ConfirmSignUp.Footer = function Footer(): React.JSX.Element {
+ConfirmSignUp.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
index 588f4a33d08..1b6dfdf595b 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
+++ b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignIn.tsx
@@ -11,7 +11,7 @@ import { FederatedSignInButton } from './FederatedSignInButtons';
 
 const { getSignInWithFederationText, getOrText } = authenticatorTextUtil;
 
-export function FederatedSignIn(): React.JSX.Element {
+export function FederatedSignIn(): JSX.Element {
   const { route, socialProviders } = useAuthenticator(
     ({ route, socialProviders }) => [route, socialProviders]
   );
diff --git a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
index e731dd7dbab..4706d577ccb 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
+++ b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
@@ -12,7 +12,7 @@ export interface FederatedSignInButtonProps {
   text: string;
 }
 
-const AppleIcon = (): React.JSX.Element => {
+const AppleIcon = (): JSX.Element => {
   return (
     <svg
       aria-label="Apple icon"
@@ -29,7 +29,7 @@ const AppleIcon = (): React.JSX.Element => {
   );
 };
 
-const GoogleIcon = (): React.JSX.Element => {
+const GoogleIcon = (): JSX.Element => {
   return (
     <svg
       aria-label="Google icon"
@@ -58,7 +58,7 @@ const GoogleIcon = (): React.JSX.Element => {
   );
 };
 
-const FacebookIcon = (): React.JSX.Element => {
+const FacebookIcon = (): JSX.Element => {
   return (
     <Icon
       className="federated-sign-in-icon"
@@ -70,7 +70,7 @@ const FacebookIcon = (): React.JSX.Element => {
   );
 };
 
-const AmazonIcon = (): React.JSX.Element => {
+const AmazonIcon = (): JSX.Element => {
   return (
     <svg
       aria-label="Amazon icon"
@@ -95,7 +95,7 @@ const AmazonIcon = (): React.JSX.Element => {
 
 export const FederatedSignInButton = (
   props: FederatedSignInButtonProps
-): React.JSX.Element => {
+): JSX.Element => {
   const { icon, provider, text } = props;
   const { toFederatedSignIn } = useAuthenticator();
 
diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
index 40c5033a2c8..fa8ac3d252d 100644
--- a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -17,7 +17,7 @@ const { getChangePasswordText, getChangingText, getBackToSignInText } =
 export const ForceNewPassword = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { isPending, toSignIn } = useAuthenticator((context) => [
     context.isPending,
     context.toSignIn,
@@ -76,14 +76,14 @@ export const ForceNewPassword = ({
   );
 };
 
-ForceNewPassword.FormFields = function FormFields(): React.JSX.Element | null {
+ForceNewPassword.FormFields = function FormFields(): JSX.Element | null {
   return <DefaultFormFields />;
 };
 
-ForceNewPassword.Header = function Header(): React.JSX.Element | null {
+ForceNewPassword.Header = function Header(): JSX.Element | null {
   return <Heading level={4}>{getChangePasswordText()}</Heading>;
 };
 
-ForceNewPassword.Footer = function Footer(): React.JSX.Element | null {
+ForceNewPassword.Footer = function Footer(): JSX.Element | null {
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx b/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
index bb0eded765d..d5d8eb928f2 100644
--- a/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForgotPassword/ConfirmResetPassword.tsx
@@ -16,7 +16,7 @@ const { getResendCodeText, getResetYourPasswordText } = authenticatorTextUtil;
 export const ConfirmResetPassword = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleBlur, handleChange, handleSubmit } = useFormHandlers();
 
@@ -59,13 +59,13 @@ export const ConfirmResetPassword = ({
   );
 };
 
-ConfirmResetPassword.Header = function Header(): React.JSX.Element {
+ConfirmResetPassword.Header = function Header(): JSX.Element {
   const headerText = getResetYourPasswordText();
 
   return <Heading level={3}>{headerText}</Heading>;
 };
 
-ConfirmResetPassword.Footer = function Footer(): React.JSX.Element {
+ConfirmResetPassword.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx b/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
index 0980578bade..a792dcd8542 100644
--- a/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
+++ b/packages/react/src/components/Authenticator/ForgotPassword/ForgotPassword.tsx
@@ -21,7 +21,7 @@ const {
 export const ForgotPassword = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -70,11 +70,11 @@ export const ForgotPassword = ({
   );
 };
 
-ForgotPassword.Header = function Header(): React.JSX.Element {
+ForgotPassword.Header = function Header(): JSX.Element {
   return <Heading level={3}>{getResetYourPasswordText()}</Heading>;
 };
 
-ForgotPassword.Footer = function Footer(): React.JSX.Element {
+ForgotPassword.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx b/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
index 1f1170b619a..68ff8d05dbd 100644
--- a/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
+++ b/packages/react/src/components/Authenticator/RouteContainer/RouteContainer.tsx
@@ -17,7 +17,7 @@ export function RouteContainer({
   children,
   className,
   variation = 'default',
-}: RouteContainerProps): React.JSX.Element {
+}: RouteContainerProps): JSX.Element {
   const { route } = useAuthenticator(({ route }) => [route]);
 
   const {
diff --git a/packages/react/src/components/Authenticator/Router/Router.tsx b/packages/react/src/components/Authenticator/Router/Router.tsx
index 14c2c85d7c4..78c81018af2 100644
--- a/packages/react/src/components/Authenticator/Router/Router.tsx
+++ b/packages/react/src/components/Authenticator/Router/Router.tsx
@@ -11,11 +11,9 @@ import { ConfirmResetPassword, ForgotPassword } from '../ForgotPassword';
 import { isSignInOrSignUpRoute } from '../utils';
 import { RouterProps } from './types';
 
-type RouteComponent = (
-  props: Omit<RouterProps, 'children'>
-) => React.JSX.Element;
+type RouteComponent = (props: Omit<RouterProps, 'children'>) => JSX.Element;
 
-function RenderNothing(): React.JSX.Element {
+function RenderNothing(): JSX.Element {
   // @ts-ignore
   return null;
 }
@@ -59,7 +57,7 @@ export function Router({
   className,
   hideSignUp,
   variation,
-}: RouterProps): React.JSX.Element {
+}: RouterProps): JSX.Element {
   const { route } = useAuthenticator(({ route }) => [route]);
   const RouterChildren = useMemo(() => getRouteComponent(route), [route]);
 
diff --git a/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx b/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
index 417721df1d1..a75570dd12e 100644
--- a/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
+++ b/packages/react/src/components/Authenticator/SetupTotp/SetupTotp.tsx
@@ -24,7 +24,7 @@ const { getSetupTotpText, getCopiedText, getLoadingText } =
 export const SetupTotp = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { totpSecretCode, isPending, username, QRFields } = useAuthenticator(
     (context) => [context.isPending, context.totpSecretCode, context.username]
   );
@@ -125,11 +125,11 @@ export const SetupTotp = ({
   );
 };
 
-SetupTotp.Header = function Header(): React.JSX.Element {
+SetupTotp.Header = function Header(): JSX.Element {
   return <Heading level={3}>{getSetupTotpText()}</Heading>;
 };
 
-SetupTotp.Footer = function Footer(): React.JSX.Element {
+SetupTotp.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
index d0b10030412..fa9675bff11 100644
--- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
+++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -15,7 +15,7 @@ import { FormFields } from '../shared/FormFields';
 const { getSignInText, getSigningInText, getForgotPasswordText } =
   authenticatorTextUtil;
 
-export function SignIn(): React.JSX.Element {
+export function SignIn(): JSX.Element {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -79,7 +79,7 @@ const DefaultFooter = () => {
 };
 
 SignIn.Footer = DefaultFooter;
-SignIn.Header = function Header(): React.JSX.Element {
+SignIn.Header = function Header(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
index 6869b3715e0..2088b16dfdc 100644
--- a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
+++ b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
@@ -13,7 +13,7 @@ import { FormFields as DefaultFormFields } from '../shared/FormFields';
 
 const { getCreateAccountText, getCreatingAccountText } = authenticatorTextUtil;
 
-export function SignUp(): React.JSX.Element {
+export function SignUp(): JSX.Element {
   const { hasValidationErrors, isPending } = useAuthenticator((context) => [
     context.hasValidationErrors,
     context.isPending,
@@ -68,14 +68,14 @@ export function SignUp(): React.JSX.Element {
   );
 }
 
-SignUp.Header = function Header(): React.JSX.Element {
+SignUp.Header = function Header(): JSX.Element {
   // @ts-ignore
   return null;
 };
 SignUp.FormFields = function FormFields() {
   return <DefaultFormFields />;
 };
-SignUp.Footer = function Footer(): React.JSX.Element {
+SignUp.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
index 92468a9f4bc..c28b3ff020e 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx
@@ -16,7 +16,7 @@ const { getAccountRecoveryInfoText, getSkipText } = authenticatorTextUtil;
 export const ConfirmVerifyUser = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const { isPending } = useAuthenticator((context) => [context.isPending]);
   const { handleChange, handleSubmit } = useFormHandlers();
 
@@ -63,6 +63,6 @@ ConfirmVerifyUser.Header = function Header() {
   return <Heading level={3}>{getAccountRecoveryInfoText()}</Heading>;
 };
 
-ConfirmVerifyUser.Footer = function Footer(): React.JSX.Element | null {
+ConfirmVerifyUser.Footer = function Footer(): JSX.Element | null {
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
index 0f5c42e5e25..9dc3d68ab85 100644
--- a/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
+++ b/packages/react/src/components/Authenticator/VerifyUser/VerifyUser.tsx
@@ -28,7 +28,7 @@ const {
 
 const generateRadioGroup = (
   attributes: UnverifiedUserAttributes
-): React.JSX.Element[] => {
+): JSX.Element[] => {
   return Object.entries(attributes).map(
     ([key, value]: [string, string], index) => {
       const verificationType = (
@@ -52,7 +52,7 @@ const generateRadioGroup = (
 export const VerifyUser = ({
   className,
   variation,
-}: RouteProps): React.JSX.Element => {
+}: RouteProps): JSX.Element => {
   const {
     components: {
       // @ts-ignore
@@ -113,11 +113,11 @@ export const VerifyUser = ({
   );
 };
 
-VerifyUser.Header = function Header(): React.JSX.Element {
+VerifyUser.Header = function Header(): JSX.Element {
   return <Heading level={3}>{getAccountRecoveryInfoText()}</Heading>;
 };
 
-VerifyUser.Footer = function Footer(): React.JSX.Element {
+VerifyUser.Footer = function Footer(): JSX.Element {
   // @ts-ignore
   return null;
 };
diff --git a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
index eb65ec883b9..81135a4d1da 100644
--- a/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
+++ b/packages/react/src/components/Authenticator/hooks/useCustomComponents/defaultComponents.tsx
@@ -9,9 +9,9 @@ import { ConfirmResetPassword, ForgotPassword } from '../../ForgotPassword';
 
 // use the very generic name of Components as this is a temporary interface and is not exported
 interface Components {
-  Footer?: () => React.JSX.Element | null;
-  FormFields?: () => React.JSX.Element | null;
-  Header?: () => React.JSX.Element | null;
+  Footer?: () => JSX.Element | null;
+  FormFields?: () => JSX.Element | null;
+  Header?: () => JSX.Element | null;
 }
 
 export interface DefaultComponents extends Omit<Components, 'FormFields'> {
@@ -29,7 +29,7 @@ export interface DefaultComponents extends Omit<Components, 'FormFields'> {
 
 export const defaultComponents: DefaultComponents = {
   // @ts-ignore
-  Header: (): React.JSX.Element => null,
+  Header: (): JSX.Element => null,
   SignIn: {
     Header: SignIn.Header,
     Footer: SignIn.Footer,
@@ -74,5 +74,5 @@ export const defaultComponents: DefaultComponents = {
     Footer: ForgotPassword.Footer,
   },
   // @ts-ignore
-  Footer: (): React.JSX.Element => null,
+  Footer: (): JSX.Element => null,
 };
diff --git a/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx b/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
index d4f355e2b5c..7e4285c921c 100644
--- a/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
+++ b/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
@@ -8,7 +8,7 @@ import { Flex } from '../../../primitives/Flex';
 const { getConfirmText, getConfirmingText, getBackToSignInText } =
   authenticatorTextUtil;
 
-export const ConfirmSignInFooter = (): React.JSX.Element => {
+export const ConfirmSignInFooter = (): JSX.Element => {
   const { isPending, toSignIn } = useAuthenticator((context) => [
     context.isPending,
     context.toSignIn,
diff --git a/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx b/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
index b6f481eb59e..c42dd53fc5f 100644
--- a/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
+++ b/packages/react/src/components/Authenticator/shared/ConfirmationCodeInput.tsx
@@ -14,7 +14,7 @@ export interface ConfirmationCodeInputProps {
 
 export const ConfirmationCodeInput = (
   props: ConfirmationCodeInputProps
-): React.JSX.Element => {
+): JSX.Element => {
   const {
     errorText,
     labelHidden = true,
diff --git a/packages/react/src/components/Authenticator/shared/FormField.tsx b/packages/react/src/components/Authenticator/shared/FormField.tsx
index 1e752bebda8..1b8f3fc3154 100644
--- a/packages/react/src/components/Authenticator/shared/FormField.tsx
+++ b/packages/react/src/components/Authenticator/shared/FormField.tsx
@@ -20,7 +20,7 @@ export function FormField({
   name,
   type,
   ...props
-}: FormFieldProps): React.JSX.Element {
+}: FormFieldProps): JSX.Element {
   const { validationErrors } = useAuthenticator(({ validationErrors }) => [
     validationErrors,
   ]);
diff --git a/packages/react/src/components/Authenticator/shared/FormFields.tsx b/packages/react/src/components/Authenticator/shared/FormFields.tsx
index d9d0b90af7b..a8f63d5a98a 100644
--- a/packages/react/src/components/Authenticator/shared/FormFields.tsx
+++ b/packages/react/src/components/Authenticator/shared/FormFields.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { FormField, FormFieldProps } from './FormField';
 import { useAuthenticator } from '@aws-amplify/ui-react-core';
 
-export function FormFields(): React.JSX.Element {
+export function FormFields(): JSX.Element {
   const { fields } = useAuthenticator(({ route }) => [route]);
 
   const formFields = React.useRef(
diff --git a/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx b/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
index fd76a8e0827..99b3df67ab1 100644
--- a/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
+++ b/packages/react/src/components/Authenticator/shared/RemoteErrorMessage.tsx
@@ -4,7 +4,7 @@ import { translate } from '@aws-amplify/ui';
 import { useAuthenticator } from '@aws-amplify/ui-react-core';
 import { Alert } from '../../../primitives/Alert';
 
-export const RemoteErrorMessage = (): React.JSX.Element => {
+export const RemoteErrorMessage = (): JSX.Element => {
   const { error } = useAuthenticator((context) => [context.error]);
 
   return (
diff --git a/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx b/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
index cf199af36a2..fb0f01bd559 100644
--- a/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
+++ b/packages/react/src/components/Authenticator/shared/SignInSignUpTabs.tsx
@@ -16,7 +16,7 @@ export const SignInSignUpTabs = ({
   variation,
 }: {
   hideSignUp: boolean;
-} & RouteProps): React.JSX.Element => {
+} & RouteProps): JSX.Element => {
   const { route, toSignIn, toSignUp } = useAuthenticator((context) => [
     context.route,
     context.toSignIn,
diff --git a/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx b/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
index b0774d61e0c..e6dcbf79b30 100644
--- a/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
+++ b/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
@@ -8,14 +8,14 @@ import { Flex } from '../../../primitives/Flex';
 export interface TwoButtonSubmitFooterProps {
   cancelButtonSendType: AuthEventTypes;
   cancelButtonText: string;
-  submitButtonText?: React.JSX.Element;
+  submitButtonText?: JSX.Element;
 }
 
 const { getSubmitText, getSubmittingText } = authenticatorTextUtil;
 
 export const TwoButtonSubmitFooter = (
   props: TwoButtonSubmitFooterProps
-): React.JSX.Element => {
+): JSX.Element => {
   const { cancelButtonSendType, cancelButtonText, submitButtonText } = props;
 
   const { isPending, resendCode, skipVerification, toSignIn } =
diff --git a/packages/react/src/components/Authenticator/withAuthenticator.tsx b/packages/react/src/components/Authenticator/withAuthenticator.tsx
index 450a8b88cbf..f12ef167c39 100644
--- a/packages/react/src/components/Authenticator/withAuthenticator.tsx
+++ b/packages/react/src/components/Authenticator/withAuthenticator.tsx
@@ -15,7 +15,7 @@ export interface WithAuthenticatorProps {
 export function withAuthenticator<Props = {}>(
   Component: React.ComponentType<Props & WithAuthenticatorProps>,
   options: WithAuthenticatorOptions = {}
-): (props: Props) => React.JSX.Element {
+): (props: Props) => JSX.Element {
   const { variation = 'modal' } = options;
 
   return function WrappedWithAuthenticator(props: Props) {
diff --git a/packages/react/src/components/FilterChildren/FilterChildren.tsx b/packages/react/src/components/FilterChildren/FilterChildren.tsx
index 568c0d367ec..3d7bca0d449 100644
--- a/packages/react/src/components/FilterChildren/FilterChildren.tsx
+++ b/packages/react/src/components/FilterChildren/FilterChildren.tsx
@@ -13,7 +13,7 @@ export const FilterChildren = ({
   allowedFilters,
   children = null,
   targetFilter,
-}: FilterChildrenProps): React.JSX.Element | null => {
+}: FilterChildrenProps): JSX.Element | null => {
   const showContent =
     Array.isArray(allowedFilters) &&
     allowedFilters.some((filter) => filter === targetFilter);
diff --git a/packages/react/src/components/ThemeProvider/ComponentStyle.tsx b/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
index f06c6cf0ea1..933a8d09260 100644
--- a/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/ComponentStyle.tsx
@@ -18,7 +18,7 @@ export const ComponentStyle = ({
   theme,
   componentThemes = [],
   ...rest
-}: ComponentStyleProps): React.JSX.Element | null => {
+}: ComponentStyleProps): JSX.Element | null => {
   if (!theme || !componentThemes.length) {
     return null;
   }
diff --git a/packages/react/src/components/ThemeProvider/GlobalStyle.tsx b/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
index e47e1f88d38..67fbca0af9b 100644
--- a/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/GlobalStyle.tsx
@@ -15,7 +15,7 @@ interface GlobalStyleProps extends React.ComponentProps<'style'> {
 export const GlobalStyle = ({
   styles,
   ...rest
-}: GlobalStyleProps): React.JSX.Element | null => {
+}: GlobalStyleProps): JSX.Element | null => {
   if (!styles) {
     return null;
   }
diff --git a/packages/react/src/components/ThemeProvider/Style.tsx b/packages/react/src/components/ThemeProvider/Style.tsx
index 6f2e2ba4d06..2c72940ab5b 100644
--- a/packages/react/src/components/ThemeProvider/Style.tsx
+++ b/packages/react/src/components/ThemeProvider/Style.tsx
@@ -4,10 +4,7 @@ interface StyleProps extends React.ComponentProps<'style'> {
   cssText?: string;
 }
 
-export const Style = ({
-  cssText,
-  ...rest
-}: StyleProps): React.JSX.Element | null => {
+export const Style = ({ cssText, ...rest }: StyleProps): JSX.Element | null => {
   /*
     Only inject theme CSS variables if given a theme.
     The CSS file users import already has the default theme variables in it.
diff --git a/packages/react/src/components/ThemeProvider/ThemeProvider.tsx b/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
index 4fa6d763528..b382ee885c6 100644
--- a/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/components/ThemeProvider/ThemeProvider.tsx
@@ -50,7 +50,7 @@ export function ThemeProvider({
   direction = 'ltr',
   nonce,
   theme,
-}: ThemeProviderProps): React.JSX.Element {
+}: ThemeProviderProps): JSX.Element {
   const value = React.useMemo(
     () => ({ theme: createTheme(theme), colorMode }),
     [theme, colorMode]
diff --git a/packages/react/src/components/ThemeProvider/ThemeStyle.tsx b/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
index 28f5d1c3f9d..769d90a4870 100644
--- a/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
+++ b/packages/react/src/components/ThemeProvider/ThemeStyle.tsx
@@ -15,7 +15,7 @@ interface ThemeStyleProps extends React.ComponentProps<'style'> {
 export const ThemeStyle = ({
   theme,
   ...rest
-}: ThemeStyleProps): React.JSX.Element | null => {
+}: ThemeStyleProps): JSX.Element | null => {
   if (!theme) return null;
 
   const { name, cssText } = theme;
diff --git a/packages/react/src/components/shared/ValidationErrors.tsx b/packages/react/src/components/shared/ValidationErrors.tsx
index 958b72d01c5..7007db4c324 100644
--- a/packages/react/src/components/shared/ValidationErrors.tsx
+++ b/packages/react/src/components/shared/ValidationErrors.tsx
@@ -13,7 +13,7 @@ export const ValidationErrors = ({
   errors,
   id,
   dataAttr,
-}: ValidationErrorsProps): React.JSX.Element | null => {
+}: ValidationErrorsProps): JSX.Element | null => {
   if (!(errors?.length > 0)) return null;
 
   const dataAttrProp = dataAttr ? { [dataAttr]: true } : {};
diff --git a/packages/react/src/primitives/Alert/AlertIcon.tsx b/packages/react/src/primitives/Alert/AlertIcon.tsx
index c8b958bbad4..9628d049a74 100644
--- a/packages/react/src/primitives/Alert/AlertIcon.tsx
+++ b/packages/react/src/primitives/Alert/AlertIcon.tsx
@@ -24,7 +24,7 @@ export const AlertIcon = ({
   ariaHidden,
   ariaLabel,
   role,
-}: AlertIconProps): React.JSX.Element | null => {
+}: AlertIconProps): JSX.Element | null => {
   const icons = useIcons('alert');
   let icon;
   switch (variation) {
diff --git a/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx b/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
index f53ff6525e9..83275041240 100644
--- a/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
+++ b/packages/react/src/primitives/CheckboxField/__tests__/CheckboxField.test.tsx
@@ -64,7 +64,7 @@ describe('CheckboxField test suite', () => {
   });
 
   describe('Checkbox functionality', () => {
-    const expectFunctionality = async (component: React.JSX.Element) => {
+    const expectFunctionality = async (component: JSX.Element) => {
       render(component);
 
       const checkbox = await screen.findByTestId(
diff --git a/packages/react/src/primitives/Collection/Collection.tsx b/packages/react/src/primitives/Collection/Collection.tsx
index e19153fcd99..e15ce2ec08b 100644
--- a/packages/react/src/primitives/Collection/Collection.tsx
+++ b/packages/react/src/primitives/Collection/Collection.tsx
@@ -42,7 +42,7 @@ const GridCollection = <Item,>({
 );
 
 const renderCollectionOrNoResultsFound = <Item,>(
-  collection: React.JSX.Element | null,
+  collection: JSX.Element | null,
   items: Item[],
   searchNoResultsFound: React.ReactNode
 ) => {
@@ -75,7 +75,7 @@ export const Collection = <Item, Element extends ElementType>({
   type = 'list',
   testId,
   ...rest
-}: BaseCollectionProps<Item, Element>): React.JSX.Element => {
+}: BaseCollectionProps<Item, Element>): JSX.Element => {
   const [searchText, setSearchText] = React.useState<string>();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/react/src/primitives/DropZone/DropZone.tsx b/packages/react/src/primitives/DropZone/DropZone.tsx
index 83ace13ee67..2d15d3ce684 100644
--- a/packages/react/src/primitives/DropZone/DropZone.tsx
+++ b/packages/react/src/primitives/DropZone/DropZone.tsx
@@ -6,14 +6,7 @@ import { DropZoneProps, BaseDropZoneProps } from './types';
 import { DropZoneProvider } from './DropZoneProvider';
 import { DropZoneContainer } from './DropZoneContainer';
 import { primitiveWithForwardRef } from '../utils/primitiveWithForwardRef';
-import {
-  Accepted,
-  AcceptedType,
-  Default,
-  DefaultType,
-  Rejected,
-  RejectedType,
-} from './DropZoneChildren';
+import { Accepted, Default, Rejected } from './DropZoneChildren';
 
 const DropZonePrimitive: Primitive<DropZoneProps, 'div'> = (
   { children, testId, isDisabled, acceptedFileTypes, onDropComplete, ...rest },
@@ -52,9 +45,9 @@ const DropZonePrimitive: Primitive<DropZoneProps, 'div'> = (
 };
 
 type DropZoneType = ForwardRefPrimitive<BaseDropZoneProps, 'div'> & {
-  Accepted: AcceptedType;
-  Rejected: RejectedType;
-  Default: DefaultType;
+  Accepted: typeof Accepted;
+  Rejected: typeof Rejected;
+  Default: typeof Default;
 };
 
 /**
diff --git a/packages/react/src/primitives/DropZone/DropZoneChildren.tsx b/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
index d1a05904add..07cbe9c8699 100644
--- a/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
+++ b/packages/react/src/primitives/DropZone/DropZoneChildren.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Primitive } from '../types';
 import { DropZoneContext } from './DropZoneProvider';
 
 /**
@@ -6,13 +7,12 @@ import { DropZoneContext } from './DropZoneProvider';
  * in DropZone without having to expose the DropZoneContext.
  */
 
-export type AcceptedType = (props: {
-  children?: React.ReactNode;
-}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ONLY accepted files on the DropZone.
  */
-export const Accepted: AcceptedType = ({ children }) => {
+const Accepted: Primitive<{ children?: React.ReactNode }, 'div'> = ({
+  children,
+}) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Accept` must be used inside a DropZone');
@@ -20,13 +20,12 @@ export const Accepted: AcceptedType = ({ children }) => {
   return dragState === 'accept' ? <>{children}</> : null;
 };
 
-export type RejectedType = (props: {
-  children?: React.ReactNode;
-}) => React.JSX.Element | null;
 /**
  * This component renders when the user is dragging ANY rejected files on the DropZone.
  */
-export const Rejected: RejectedType = ({ children }) => {
+const Rejected: Primitive<{ children?: React.ReactNode }, 'div'> = ({
+  children,
+}) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Rejected` must be used inside a DropZone');
@@ -34,16 +33,17 @@ export const Rejected: RejectedType = ({ children }) => {
   return dragState === 'reject' ? <>{children}</> : null;
 };
 
-export type DefaultType = (props: {
-  children?: React.ReactNode;
-}) => React.JSX.Element | null;
 /**
  * This component renders by default when the user is not dragging.
  */
-export const Default: DefaultType = ({ children }) => {
+const Default: Primitive<{ children?: React.ReactNode }, 'div'> = ({
+  children,
+}) => {
   const dragState = React.useContext(DropZoneContext);
   if (!dragState) {
     throw new Error('`DropZone.Default` must be used inside a DropZone');
   }
   return dragState === 'inactive' ? <>{children}</> : null;
 };
+
+export { Accepted, Rejected, Default };
diff --git a/packages/react/src/primitives/DropZone/DropZoneProvider.tsx b/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
index 048f1f138c0..e1b2992dfa5 100644
--- a/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
+++ b/packages/react/src/primitives/DropZone/DropZoneProvider.tsx
@@ -10,7 +10,7 @@ const DropZoneProvider = ({
 }: {
   value: DragState;
   children?: React.ReactNode;
-}): React.JSX.Element => {
+}): JSX.Element => {
   return (
     <DropZoneContext.Provider value={value}>
       {children}
diff --git a/packages/react/src/primitives/Icon/context/IconsProvider.tsx b/packages/react/src/primitives/Icon/context/IconsProvider.tsx
index b9d037443ea..5120810aa36 100644
--- a/packages/react/src/primitives/Icon/context/IconsProvider.tsx
+++ b/packages/react/src/primitives/Icon/context/IconsProvider.tsx
@@ -11,7 +11,7 @@ export { IconsContextInterface };
 export function IconsProvider({
   children,
   icons,
-}: IconProviderProps): React.JSX.Element {
+}: IconProviderProps): JSX.Element {
   return (
     <IconsContext.Provider value={icons}>{children}</IconsContext.Provider>
   );
diff --git a/packages/react/src/primitives/Icon/icons/types.ts b/packages/react/src/primitives/Icon/icons/types.ts
index cd871a9a5eb..618816aa673 100644
--- a/packages/react/src/primitives/Icon/icons/types.ts
+++ b/packages/react/src/primitives/Icon/icons/types.ts
@@ -4,4 +4,4 @@ export type InternalIcon = (
   props: ViewProps & {
     size?: string | number;
   }
-) => React.JSX.Element;
+) => JSX.Element;
diff --git a/packages/react/src/primitives/Link/__tests__/Link.test.tsx b/packages/react/src/primitives/Link/__tests__/Link.test.tsx
index d5c784d95ac..0f27bde9abd 100644
--- a/packages/react/src/primitives/Link/__tests__/Link.test.tsx
+++ b/packages/react/src/primitives/Link/__tests__/Link.test.tsx
@@ -1,9 +1,47 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Link } from '../Link';
 import { Text } from '../../Text/Text';
+import { Flex } from '../../Flex';
+import { Heading } from '../../Heading';
+
+import {
+  BrowserRouter as Router,
+  Link as ReactRouterLink,
+  Routes,
+  Route,
+} from 'react-router-dom';
+
+function Home() {
+  return <Heading level={2}>You are home</Heading>;
+}
+
+function About() {
+  return <Heading level={2}>You are on the about page</Heading>;
+}
+
+function SampleRoutingApp() {
+  return (
+    <Router>
+      <Flex>
+        <Link as={ReactRouterLink} to="/">
+          Home
+        </Link>
+        <Link as={ReactRouterLink} to="/about">
+          About
+        </Link>
+      </Flex>
+
+      <Routes>
+        <Route path="/about" element={<About />} />
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </Router>
+  );
+}
 
 describe('Link:', () => {
   const linkText = 'My Link';
@@ -66,4 +104,17 @@ describe('Link:', () => {
       textDecoration: 'underline',
     });
   });
+
+  it('can integrate with react-router-dom using the "to" prop', async () => {
+    render(<SampleRoutingApp />);
+
+    expect(screen.getByText(/you are home/i)).toBeInTheDocument();
+
+    const events = userEvent.setup();
+    await act(async () => {
+      await events.click(screen.getByText(/about/i));
+    });
+
+    expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
+  });
 });
diff --git a/packages/react/src/primitives/Pagination/usePaginationItems.tsx b/packages/react/src/primitives/Pagination/usePaginationItems.tsx
index ba8dc33302f..7a15dd77a1f 100644
--- a/packages/react/src/primitives/Pagination/usePaginationItems.tsx
+++ b/packages/react/src/primitives/Pagination/usePaginationItems.tsx
@@ -40,7 +40,7 @@ export const usePaginationItems = ({
   onNext,
   onPrevious,
   onChange,
-}: UsePaginationItemsProps): React.JSX.Element[] => {
+}: UsePaginationItemsProps): JSX.Element[] => {
   const previousItem = (
     <PaginationItem
       type="previous"
diff --git a/packages/react/src/primitives/Tabs/TabsList.tsx b/packages/react/src/primitives/Tabs/TabsList.tsx
index c8804644225..d9b28e47768 100644
--- a/packages/react/src/primitives/Tabs/TabsList.tsx
+++ b/packages/react/src/primitives/Tabs/TabsList.tsx
@@ -10,7 +10,7 @@ import { BaseTabsListProps, TabsListProps, TabsItemProps } from './types';
 import { TabsContext } from './TabsContext';
 
 const isValidTab = (
-  child: unknown
+  child: React.ReactFragment | React.ReactChild | React.ReactPortal
 ): child is React.ReactElement<TabsItemProps> =>
   React.isValidElement<TabsItemProps>(child);
 
diff --git a/packages/react/src/primitives/types/autocomplete.ts b/packages/react/src/primitives/types/autocomplete.ts
index 5c4619bbf6d..77bc636b20d 100644
--- a/packages/react/src/primitives/types/autocomplete.ts
+++ b/packages/react/src/primitives/types/autocomplete.ts
@@ -56,7 +56,7 @@ export interface BaseAutocompleteMenuProps extends BaseViewProps {
    * @description
    * A list of Option JSX elements
    */
-  children: React.JSX.Element[];
+  children: JSX.Element[];
 
   /**
    * @description
diff --git a/packages/react/src/primitives/types/collection.ts b/packages/react/src/primitives/types/collection.ts
index 0d001d9e334..48fd7ce5fe3 100644
--- a/packages/react/src/primitives/types/collection.ts
+++ b/packages/react/src/primitives/types/collection.ts
@@ -66,7 +66,7 @@ interface CollectionChildren<Item> {
    * The component to be repeated
    * Same interface as Array.prototype.map
    */
-  children: (item: Item, index: number) => React.JSX.Element;
+  children: (item: Item, index: number) => JSX.Element;
 }
 
 export interface CollectionBaseProps<Item> extends CollectionChildren<Item> {
@@ -84,7 +84,7 @@ export type GridCollectionProps<Item> = Omit<BaseGridProps, 'children'> &
 
 /**
  * Omits `React.ReactNode` as children to prevent intersection type for `children` of
- * `React.ReactNode & (item: Item, index: number) => React.JSX.Element`
+ * `React.ReactNode & (item: Item, index: number) => JSX.Element`
  * and replaces with `CollectionChildren`
  */
 type ReplaceChildren<T, Item> = Omit<T, 'children'> & CollectionChildren<Item>;
diff --git a/packages/react/src/primitives/types/rating.ts b/packages/react/src/primitives/types/rating.ts
index dba149202a0..cb2212eeec0 100644
--- a/packages/react/src/primitives/types/rating.ts
+++ b/packages/react/src/primitives/types/rating.ts
@@ -21,7 +21,7 @@ export interface RatingOptions {
    * override the empty icon an will create a rating component that uses
    * different icons for filled and empty icons.
    */
-  emptyIcon?: React.JSX.Element;
+  emptyIcon?: JSX.Element;
 
   /**
    * @description
@@ -37,7 +37,7 @@ export interface RatingOptions {
    * with the emptyIcon prop
    * Default is <IconStar />
    */
-  icon?: React.JSX.Element;
+  icon?: JSX.Element;
 
   /**
    * @description
diff --git a/packages/react/src/primitives/types/view.ts b/packages/react/src/primitives/types/view.ts
index 6bf95f001b9..dd44242a6d6 100644
--- a/packages/react/src/primitives/types/view.ts
+++ b/packages/react/src/primitives/types/view.ts
@@ -62,7 +62,7 @@ export type PrimitiveProps<
  */
 interface JSElementForwardRefRenderFunction<T, P = {}> {
   // return `JSX.Element` or `null` in place of `React.ReactNode`
-  (props: P, ref: React.ForwardedRef<T>): React.JSX.Element | null;
+  (props: P, ref: React.ForwardedRef<T>): JSX.Element | null;
   displayName?: string | undefined;
   // explicit rejected with `never` required due to
   // https://github.com/microsoft/TypeScript/issues/36826
@@ -94,8 +94,7 @@ interface JSXElementForwardRefExoticComponent<P = {}> {
   (props: P): React.ReactElement | null;
   defaultProps?: Partial<P> | undefined;
   displayName?: string | undefined;
-  // deprecated in React@19 but needed for backwards compatibility in previous versions
-  propTypes?: any;
+  propTypes?: React.WeakValidationMap<P> | undefined;
   readonly $$typeof: symbol;
 }
 
@@ -108,7 +107,7 @@ export interface ForwardRefPrimitive<
   // overload the JSX constructor to make it accept generics
   <Element extends ElementType = DefaultElement>(
     props: PrimitiveProps<Props, Element>
-  ): React.ReactElement<Props, Element> | null;
+  ): React.ReactElement | null;
 }
 
 /** @deprecated For internal use only */
diff --git a/packages/react/src/primitives/utils/primitiveWithForwardRef.ts b/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
index 165063403a1..7956895011c 100644
--- a/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
+++ b/packages/react/src/primitives/utils/primitiveWithForwardRef.ts
@@ -20,6 +20,6 @@ export const primitiveWithForwardRef = <
   P extends BaseViewProps,
   E extends ElementType,
 >(
-  primitive: Primitive<React.PropsWithoutRef<P>, E>
+  primitive: Primitive<P, E>
 ): ForwardRefPrimitive<P, E> =>
   React.forwardRef(primitive) as ForwardRefPrimitive<P, E>;
diff --git a/yarn.lock b/yarn.lock
index 9272f219b49..87cde210a7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5532,14 +5532,14 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.6", "@babel/runtime@^7.15.4", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.21.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz#5b55c9d394e5fcf304909a8b00c07dc217b56673"
   integrity sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.13.10", "@babel/runtime@^7.18.3":
+"@babel/runtime@^7.18.3":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
   integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
@@ -6577,19 +6577,19 @@
 
 "@floating-ui/core@^0.7.3":
   version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz#d274116678ffae87f6b60e90f88cc4083eefab86"
   integrity sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==
 
 "@floating-ui/dom@^0.5.3":
   version "0.5.4"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz#4eae73f78bcd4bd553ae2ade30e6f1f9c73fe3f1"
   integrity sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==
   dependencies:
     "@floating-ui/core" "^0.7.3"
 
 "@floating-ui/react-dom@0.7.2":
   version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
+  resolved "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.7.2.tgz#0bf4ceccb777a140fc535c87eb5d6241c8e89864"
   integrity sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg==
   dependencies:
     "@floating-ui/dom" "^0.5.3"
@@ -7615,21 +7615,21 @@
 
 "@radix-ui/number@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
+  resolved "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
   integrity sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/primitive@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
+  resolved "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
   integrity sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-arrow@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.0.tgz#c461f4c2cab3317e3d42a1ae62910a4cbb0192a1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.0.tgz#c461f4c2cab3317e3d42a1ae62910a4cbb0192a1"
   integrity sha512-1MUuv24HCdepi41+qfv125EwMuxgQ+U+h0A9K3BjCO/J8nVRREKHHpkD9clwfnjEDk9hgGzCnff4aUKCPiRepw==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7637,7 +7637,7 @@
 
 "@radix-ui/react-collection@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
+  resolved "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.0.tgz#0ec4c72fabd35a03b5787075ac799e3b17ca5710"
   integrity sha512-8i1pf5dKjnq90Z8udnnXKzdCEV3/FYrfw0n/b6NvB6piXEn3fO1bOh7HBcpG8XrnIXzxlYu2oCcR38QpyLS/mg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7648,28 +7648,28 @@
 
 "@radix-ui/react-compose-refs@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
+  resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
   integrity sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-context@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
   integrity sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-direction@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
+  resolved "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
   integrity sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-dismissable-layer@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.0.tgz#35b7826fa262fd84370faef310e627161dffa76b"
   integrity sha512-n7kDRfx+LB1zLueRDvZ1Pd0bxdJWDUZNQ/GWoxDn2prnuJKRdxsjulejX/ePkOsLi2tTm6P24mDqlMSgQpsT6g==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7681,7 +7681,7 @@
 
 "@radix-ui/react-dropdown-menu@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-1.0.0.tgz#687959e1bcdd5e8eb0de406484aff28d0974c593"
+  resolved "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-1.0.0.tgz#687959e1bcdd5e8eb0de406484aff28d0974c593"
   integrity sha512-Ptben3TxPWrZLbInO7zjAK73kmjYuStsxfg6ujgt+EywJyREoibhZYnsSNqC+UiOtl4PdW/MOHhxVDtew5fouQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7695,14 +7695,14 @@
 
 "@radix-ui/react-focus-guards@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.0.tgz#339c1c69c41628c1a5e655f15f7020bf11aa01fa"
   integrity sha512-UagjDk4ijOAnGu4WMUPj9ahi7/zJJqNZ9ZAiGPp7waUWJO0O1aWXi/udPphI0IUjvrhBsZJGSN66dR2dsueLWQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-focus-scope@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
+  resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.0.tgz#95a0c1188276dc8933b1eac5f1cdb6471e01ade5"
   integrity sha512-C4SWtsULLGf/2L4oGeIHlvWQx7Rf+7cX/vKOAD2dXW0A1b5QXwi3wWeaEgW+wn+SEVrraMUk05vLU9fZZz5HbQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7712,7 +7712,7 @@
 
 "@radix-ui/react-id@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
+  resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.0.tgz#8d43224910741870a45a8c9d092f25887bb6d11e"
   integrity sha512-Q6iAB/U7Tq3NTolBBQbHTgclPmGWE3OlktGGqrClPozSw4vkQ1DfQAOtzgRPecKsMdJINE05iaoDUG8tRzCBjw==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7720,7 +7720,7 @@
 
 "@radix-ui/react-menu@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-1.0.0.tgz#f1e07778c0011aa0c5be260fee88491d3aadf261"
+  resolved "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-1.0.0.tgz#f1e07778c0011aa0c5be260fee88491d3aadf261"
   integrity sha512-icW4C64T6nHh3Z4Q1fxO1RlSShouFF4UpUmPV8FLaJZfphDljannKErDuALDx4ClRLihAPZ9i+PrLNPoWS2DMA==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7745,7 +7745,7 @@
 
 "@radix-ui/react-popper@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
+  resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.0.0.tgz#fb4f937864bf39c48f27f55beee61fa9f2bef93c"
   integrity sha512-k2dDd+1Wl0XWAMs9ZvAxxYsB9sOsEhrFQV4CINd7IUZf0wfdye4OHen9siwxvZImbzhgVeKTJi68OQmPRvVdMg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7761,7 +7761,7 @@
 
 "@radix-ui/react-portal@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
+  resolved "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.0.tgz#7220b66743394fabb50c55cb32381395cc4a276b"
   integrity sha512-a8qyFO/Xb99d8wQdu4o7qnigNjTPG123uADNecz0eX4usnQEj7o+cG4ZX4zkqq98NYekT7UoEQIjxBNWIFuqTA==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7769,7 +7769,7 @@
 
 "@radix-ui/react-presence@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
+  resolved "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
   integrity sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7778,7 +7778,7 @@
 
 "@radix-ui/react-primitive@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
+  resolved "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.0.tgz#376cd72b0fcd5e0e04d252ed33eb1b1f025af2b0"
   integrity sha512-EyXe6mnRlHZ8b6f4ilTDrXmkLShICIuOTTj0GX4w1rp+wSxf3+TD05u1UOITC8VsJ2a9nwHvdXtOXEOl0Cw/zQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7786,7 +7786,7 @@
 
 "@radix-ui/react-roving-focus@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz#aadeb65d5dbcdbdd037078156ae1f57c2ff754ee"
+  resolved "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.0.tgz#aadeb65d5dbcdbdd037078156ae1f57c2ff754ee"
   integrity sha512-lHvO4MhvoWpeNbiJAoyDsEtbKqP2jkkdwsMVJ3kfqbkC71J/aXE6Th6gkZA1xHEqSku+t+UgoDjvE7Z3gsBpcg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7802,7 +7802,7 @@
 
 "@radix-ui/react-slider@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.0.0.tgz#4cabadd243aa088eb45ac710cd7cdc518fafb07e"
   integrity sha512-LMZET7vn7HYwYSjsc9Jcen8Vn4cJXZZxQT7T+lGlqp+F+FofX+H86TBF2yDq+L51d99f1KLEsflTGBz9WRLSig==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7820,7 +7820,7 @@
 
 "@radix-ui/react-slot@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
+  resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.0.tgz#7fa805b99891dea1e862d8f8fbe07f4d6d0fd698"
   integrity sha512-3mrKauI/tWXo1Ll+gN5dHcxDPdm/Df1ufcDLCecn+pnCIVcdWE7CujXo8QaXOWRJyZyQWWbpB8eFwHzWXlv5mQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7828,14 +7828,14 @@
 
 "@radix-ui/react-use-callback-ref@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
   integrity sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-use-controllable-state@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.0.tgz#a64deaafbbc52d5d407afaa22d493d687c538b7f"
   integrity sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7843,7 +7843,7 @@
 
 "@radix-ui/react-use-escape-keydown@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.0.tgz#aef375db4736b9de38a5a679f6f49b45a060e5d1"
   integrity sha512-JwfBCUIfhXRxKExgIqGa4CQsiMemo1Xt0W/B4ei3fpzpvPENKpMKQ8mZSB6Acj3ebrAEgi2xiQvcI1PAAodvyg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7851,21 +7851,21 @@
 
 "@radix-ui/react-use-layout-effect@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
   integrity sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-use-previous@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.0.tgz#e48a69c3a7d8078a967084038df66d0d181c56ac"
   integrity sha512-RG2K8z/K7InnOKpq6YLDmT49HGjNmrK+fr82UCVKT2sW0GYfVnYp4wZWBooT/EYfQ5faA9uIjvsuMMhH61rheg==
   dependencies:
     "@babel/runtime" "^7.13.10"
 
 "@radix-ui/react-use-rect@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.0.tgz#b040cc88a4906b78696cd3a32b075ed5b1423b3e"
   integrity sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7873,7 +7873,7 @@
 
 "@radix-ui/react-use-size@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
+  resolved "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.0.tgz#a0b455ac826749419f6354dc733e2ca465054771"
   integrity sha512-imZ3aYcoYCKhhgNpkNDh/aTiU05qw9hX+HHI1QDBTyIlcFjgeFlKKySNGMwTp7nYFLQg/j0VA2FmCY4WPDDHMg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -7881,7 +7881,7 @@
 
 "@radix-ui/rect@1.0.0":
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
+  resolved "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.0.tgz#0dc8e6a829ea2828d53cbc94b81793ba6383bf3c"
   integrity sha512-d0O68AYy/9oeEy1DdC07bz1/ZXX+DqCskRd3i4JzLSTXwefzaepQrKjXC7aNM8lTHjFLDO0pDgaEiQ7jEk+HVg==
   dependencies:
     "@babel/runtime" "^7.13.10"
@@ -8104,6 +8104,11 @@
   resolved "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-2.0.0.tgz#4c40b74655c83982c8cf47530ee7dc13d957b6aa"
   integrity sha512-K0aGNn1TjalKj+65D7ycc1//H9roAQ51GJVk5ZJQFb2teECGmzd86bYDC0aYdbRf7gtovescq4Zt6FR0tgXiHQ==
 
+"@remix-run/router@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz#57618e57942a5f0131374a9fdb0167e25a117fdc"
+  integrity sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==
+
 "@rollup/plugin-commonjs@^28.0.0":
   version "28.0.0"
   resolved "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-28.0.0.tgz#44b5e49cb5d5e6233f1e4996013a8649fdbb9557"
@@ -9746,19 +9751,19 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react-native@^12.9.0":
-  version "12.9.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-12.9.0.tgz#9c727d9ffec91024be3288ed9376df3673154784"
-  integrity sha512-wIn/lB1FjV2N4Q7i9PWVRck3Ehwq5pkhAef5X5/bmQ78J/NoOsGbVY2/DG5Y9Lxw+RfE+GvSEh/fe5Tz6sKSvw==
+"@testing-library/react-native@^12.3.0":
+  version "12.3.0"
+  resolved "https://registry.npmjs.org/@testing-library/react-native/-/react-native-12.3.0.tgz#ebf04dddb7e1c34c869b97b187ecd061211c9466"
+  integrity sha512-E2Prl8D/ey9sRgzLyfCPPmqvsevJW5tVUy4E/pBbO7nOP6OzI/jn2P3vctn/kFdkPY2aE/udlU5ZeNAben9U2A==
   dependencies:
-    jest-matcher-utils "^29.7.0"
-    pretty-format "^29.7.0"
+    jest-matcher-utils "^29.6.2"
+    pretty-format "^29.6.2"
     redent "^3.0.0"
 
 "@testing-library/react@^14.0.0":
-  version "14.3.1"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-14.3.1.tgz#29513fc3770d6fb75245c4e1245c470e4ffdd830"
-  integrity sha512-H99XjUhWQw0lTgyMN05W3xQG1Nh4lq574D8keFf1dDoNTJgp66VbJozRaczoF+wsiaPJNt/TcnfpLGufGxSrZQ==
+  version "14.0.0"
+  resolved "https://registry.npmjs.org/@testing-library/react/-/react-14.0.0.tgz#59030392a6792450b9ab8e67aea5f3cc18d6347c"
+  integrity sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^9.0.0"
@@ -10193,7 +10198,7 @@
     expect "^29.0.0"
     pretty-format "^29.0.0"
 
-"@types/jest@^29.5.5":
+"@types/jest@^29.2.1", "@types/jest@^29.5.5":
   version "29.5.6"
   resolved "https://registry.npmjs.org/@types/jest/-/jest-29.5.6.tgz#f4cf7ef1b5b0bfc1aa744e41b24d9cc52533130b"
   integrity sha512-/t9NnzkOpXb4Nfvg17ieHE6EeSjDS2SGSpNYfoLbUAeL/EOueU/RSdOWFpfQTXBEM7BguYW1XQ0EbM+6RlIh6w==
@@ -10370,12 +10375,7 @@
   resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.5.tgz#72499abbb4c4ec9982446509d2f14fb8483869d6"
   integrity sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==
 
-"@types/prop-types@*":
-  version "15.7.14"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.14.tgz#1433419d73b2a7ebfc6918dcefd2ec0d5cd698f2"
-  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
-
-"@types/prop-types@^15.0.0":
+"@types/prop-types@*", "@types/prop-types@^15.0.0":
   version "15.7.5"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -10397,29 +10397,32 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^18.0.0", "@types/react-dom@^18.3.0":
-  version "18.3.5"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.5.tgz#45f9f87398c5dcea085b715c58ddcf1faf65f716"
-  integrity sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==
+"@types/react-dom@^18.0.0", "@types/react-dom@^18.2.7":
+  version "18.3.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.0.tgz#0cbc818755d87066ab6ca74fbedb2547d74a82b0"
+  integrity sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==
+  dependencies:
+    "@types/react" "*"
 
 "@types/react-native-dotenv@^0.2.0":
   version "0.2.0"
   resolved "https://registry.npmjs.org/@types/react-native-dotenv/-/react-native-dotenv-0.2.0.tgz#32c58422a422c1adf68acce363ed791314d5a8e7"
   integrity sha512-ZxX+dU/yoQc0jTk+/NWttkiuXceJyN5FpOSqDl0WynN5GDzxwH7OMruQ47qcY8llo2RD3irjvzJ9BwC8gDiq0A==
 
-"@types/react-test-renderer@^18.3.0":
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d"
-  integrity sha512-vAhnk0tG2eGa37lkU9+s5SoroCsRI08xnsWFiAXOuPH2jqzMbcXvKExXViPi1P5fIklDeCvXqyrdmipFaSkZrA==
+"@types/react-test-renderer@^18.0.2":
+  version "18.0.5"
+  resolved "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.0.5.tgz#b67a6ff37acd93d1b971ec4c838f69d52e772db0"
+  integrity sha512-PsnmF4Hpi61PTRX+dTxkjgDdtZ09kFFgPXczoF+yBfOVxn7xBLPvKP1BUrSasYHmerj33rhoJuvpIMsJuyRqHw==
   dependencies:
-    "@types/react" "^18"
+    "@types/react" "*"
 
-"@types/react@>=16", "@types/react@^18", "@types/react@^18.3.0":
-  version "18.3.17"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.17.tgz#d86ca0e081c7a5e979b7db175f9515a41038cea7"
-  integrity sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==
+"@types/react@*", "@types/react@>=16", "@types/react@^18.2.22":
+  version "18.2.31"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.2.31.tgz#74ae2630e4aa9af599584157abd3b95d96fb9b40"
+  integrity sha512-c2UnPv548q+5DFh03y8lEDeMfDwBn9G3dRwfkrxQMo/dOtRHUUO57k6pHvBIfH/VF4Nh+98mZ5aaSe+2echD5g==
   dependencies:
     "@types/prop-types" "*"
+    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -10434,6 +10437,11 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
+"@types/scheduler@*":
+  version "0.16.3"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
+  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
+
 "@types/seedrandom@^2.4.28":
   version "2.4.31"
   resolved "https://registry.yarnpkg.com/@types/seedrandom/-/seedrandom-2.4.31.tgz#a6cac4a7c3b56fa0f3986ef1462b5725a7855471"
@@ -18519,7 +18527,7 @@ jest-matcher-utils@^29.5.0:
     jest-get-type "^29.4.3"
     pretty-format "^29.5.0"
 
-jest-matcher-utils@^29.7.0:
+jest-matcher-utils@^29.6.2, jest-matcher-utils@^29.7.0:
   version "29.7.0"
   resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.7.0.tgz#ae8fec79ff249fd592ce80e3ee474e83a6c44f12"
   integrity sha512-sBkD+Xi9DtcChsI3L3u0+N0opgPYnCRPtGcQYrgXmR+hmt/fYfWAL0xRXYU8eWOdfuLgBe0YCW3AFtnRLagq/g==
@@ -23070,19 +23078,19 @@ pretty-format@^29.0.0, pretty-format@^29.5.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.6.3:
-  version "29.6.3"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
-  integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
+pretty-format@^29.6.2, pretty-format@^29.7.0:
+  version "29.7.0"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
+  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
   dependencies:
     "@jest/schemas" "^29.6.3"
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^29.7.0:
-  version "29.7.0"
-  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812"
-  integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==
+pretty-format@^29.6.3:
+  version "29.6.3"
+  resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.3.tgz#d432bb4f1ca6f9463410c3fb25a0ba88e594ace7"
+  integrity sha512-ZsBgjVhFAj5KeK+nHfF1305/By3lechHQSMWCTl8iHSbfOm2TN5nHEtFc/+W7fAyUeCs2n5iow72gld4gW0xDw==
   dependencies:
     "@jest/schemas" "^29.6.3"
     ansi-styles "^5.0.0"
@@ -23453,13 +23461,13 @@ react-devtools-core@^4.26.1, react-devtools-core@^4.28.4:
     shell-quote "^1.6.1"
     ws "^7"
 
-react-dom@^18, react-dom@^18.3.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+react-dom@18.2.0, react-dom@^18:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.2"
+    scheduler "^0.23.0"
 
 react-error-boundary@^3.1.0:
   version "3.1.4"
@@ -23468,17 +23476,17 @@ react-error-boundary@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-react-hook-form@^7.53.2:
-  version "7.53.2"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.2.tgz#6fa37ae27330af81089baadd7f322cc987b8e2ac"
-  integrity sha512-YVel6fW5sOeedd1524pltpHX+jgU2u3DSDtXEaBORNdqiNrsX/nUI/iGXONegttg0mJVnfrIkiV0cmTU6Oo2xw==
+react-hook-form@^7.43.5:
+  version "7.43.7"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.43.7.tgz#88b8bc257635d706955e19c05254fb492fa77ad1"
+  integrity sha512-38yehQkQQ5uufaPKFScs7jhLE8n3+LG9H/BZfFAiBL2+7piDmw/BrdNJV4irzMaPnWZGhmGLHVICHXNVGIuXZg==
 
 react-icons@^4.3.1, react-icons@^4.4.0:
   version "4.8.0"
   resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445"
   integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
@@ -23493,11 +23501,6 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
-
 react-live@^4.1.8:
   version "4.1.8"
   resolved "https://registry.yarnpkg.com/react-live/-/react-live-4.1.8.tgz#287fb6c5127c2d89a6fe39380278d95cc8e661b6"
@@ -23628,16 +23631,16 @@ react-refresh@^0.4.0:
   integrity sha512-Hwln1VNuGl/6bVwnd0Xdn1e84gT/8T9aYNL+HAKDArLCS7LWjwr7StE30IEYbIkx0Vi3vs+coQxe+SQDbGbbpA==
 
 react-remove-scroll-bar@^2.3.3:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz#99c20f908ee467b385b68a3469b4a3e750012223"
-  integrity sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==
+  version "2.3.4"
+  resolved "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
   dependencies:
-    react-style-singleton "^2.2.2"
+    react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
 react-remove-scroll@2.5.4:
   version "2.5.4"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
+  resolved "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.4.tgz#afe6491acabde26f628f844b67647645488d2ea0"
   integrity sha512-xGVKJJr0SJGQVirVFAUZ2k1QLyO6m+2fy0l8Qawbp5Jgrv3DeLalrfMNBFSlmz5kriGGzsVBtGVnf4pTKIhhWA==
   dependencies:
     react-remove-scroll-bar "^2.3.3"
@@ -23646,6 +23649,21 @@ react-remove-scroll@2.5.4:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
+react-router-dom@^6.2.1:
+  version "6.10.0"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz#090ddc5c84dc41b583ce08468c4007c84245f61f"
+  integrity sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+    react-router "6.10.0"
+
+react-router@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz#230f824fde9dd0270781b5cb497912de32c0a971"
+  integrity sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==
+  dependencies:
+    "@remix-run/router" "1.5.0"
+
 react-shallow-renderer@^16.15.0:
   version "16.15.0"
   resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
@@ -23663,27 +23681,19 @@ react-style-singleton@^2.2.1:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-style-singleton@^2.2.2:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.3.tgz#4265608be69a4d70cfe3047f2c6c88b2c3ace388"
-  integrity sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==
-  dependencies:
-    get-nonce "^1.0.0"
-    tslib "^2.0.0"
-
-react-test-renderer@^18.3.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
-  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
+react-test-renderer@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
+  integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==
   dependencies:
-    react-is "^18.3.1"
+    react-is "^18.2.0"
     react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.2"
+    scheduler "^0.23.0"
 
-react@^18.3.0:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
+react@18.2.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -24478,13 +24488,6 @@ scheduler@^0.23.0:
   dependencies:
     loose-envify "^1.1.0"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -26802,9 +26805,9 @@ urlpattern-polyfill@10.0.0, urlpattern-polyfill@^10.0.0:
   integrity sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==
 
 use-callback-ref@^1.3.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.3.3.tgz#98d9fab067075841c5b2c6852090d5d0feabe2bf"
-  integrity sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz#772199899b9c9a50526fedc4993fc7fa1f7e32d5"
+  integrity sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==
   dependencies:
     tslib "^2.0.0"
 
@@ -26813,12 +26816,7 @@ use-editable@^2.3.3:
   resolved "https://registry.yarnpkg.com/use-editable/-/use-editable-2.3.3.tgz#a292fe9ba4c291cd28d1cc2728c75a5fc8d9a33f"
   integrity sha512-7wVD2JbfAFJ3DK0vITvXBdpd9JAz5BcKAAolsnLBuBn6UDDwBGuCIAGvR3yA2BNKm578vAMVHFCWaOcA+BhhiA==
 
-use-isomorphic-layout-effect@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz#afb292eb284c39219e8cb8d3d62d71999361a21d"
-  integrity sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==
-
-use-isomorphic-layout-effect@^1.1.2:
+use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
   integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==