diff --git a/apps/chart-docsite/src/DocsComponents/FluentDocsContainer.tsx b/apps/chart-docsite/src/DocsComponents/FluentDocsContainer.tsx
index 118e756ccca4a..598199640e3cf 100644
--- a/apps/chart-docsite/src/DocsComponents/FluentDocsContainer.tsx
+++ b/apps/chart-docsite/src/DocsComponents/FluentDocsContainer.tsx
@@ -11,7 +11,10 @@ interface FluentDocsContainerProps {
 /**
  * A container that wraps storybook's native docs container to add extra components to the docs experience
  */
-export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
+export const FluentDocsContainer: React.FC<React.PropsWithChildren<FluentDocsContainerProps>> = ({
+  children,
+  context,
+}) => {
   return (
     <>
       {/** TODO add table of contents */}
diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json
index 6f7f7c57eab3d..48f317ea683e8 100644
--- a/apps/react-18-tests-v8/package.json
+++ b/apps/react-18-tests-v8/package.json
@@ -25,9 +25,9 @@
     "@fluentui/react": "*",
     "@fluentui/react-hooks": "*",
     "@types/react": "18.3.20",
-    "@types/react-dom": "18.3.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "@types/react-dom": "18.3.5",
     "tslib": "^2.1.0"
   }
 }
diff --git a/apps/react-18-tests-v9/package.json b/apps/react-18-tests-v9/package.json
index 383be2a774550..307a264039f9e 100644
--- a/apps/react-18-tests-v9/package.json
+++ b/apps/react-18-tests-v9/package.json
@@ -21,9 +21,9 @@
   "dependencies": {
     "@cypress/react": "9.0.1",
     "@fluentui/react-components": "*",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.5",
     "@types/react-test-renderer": "18.3.1",
diff --git a/apps/vr-tests/src/stories/ThemeProvider/ThemeProviderLoadTheme.stories.tsx b/apps/vr-tests/src/stories/ThemeProvider/ThemeProviderLoadTheme.stories.tsx
index 44141ef37aebc..4a83905d1a58d 100644
--- a/apps/vr-tests/src/stories/ThemeProvider/ThemeProviderLoadTheme.stories.tsx
+++ b/apps/vr-tests/src/stories/ThemeProvider/ThemeProviderLoadTheme.stories.tsx
@@ -21,10 +21,12 @@ export default {
   ],
 };
 
-const LoadThemeTestButton: React.FunctionComponent<{
-  buttonAs?: React.ElementType;
-  buttonProps?: any;
-}> = props => {
+const LoadThemeTestButton: React.FunctionComponent<
+  React.PropsWithChildren<{
+    buttonAs?: React.ElementType;
+    buttonProps?: any;
+  }>
+> = props => {
   const [isThemeCustomized, setIsThemeCustomized] = React.useState(false);
 
   // toggle between default theme and customized theme
diff --git a/change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json b/change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json
new file mode 100644
index 0000000000000..1403653d7f3a8
--- /dev/null
+++ b/change/@fluentui-react-aria-8f78fc18-0062-4b31-943b-49d1f8fb792c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-aria",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-datepicker-compat-40e91e26-ec95-4c11-8598-3e6bf2be277d.json b/change/@fluentui-react-datepicker-compat-40e91e26-ec95-4c11-8598-3e6bf2be277d.json
new file mode 100644
index 0000000000000..edf33f876a428
--- /dev/null
+++ b/change/@fluentui-react-datepicker-compat-40e91e26-ec95-4c11-8598-3e6bf2be277d.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-datepicker-compat",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-237cafe3-9fa1-45dc-b20f-602b7de1fd4c.json b/change/@fluentui-react-dialog-237cafe3-9fa1-45dc-b20f-602b7de1fd4c.json
new file mode 100644
index 0000000000000..196d18f7875ff
--- /dev/null
+++ b/change/@fluentui-react-dialog-237cafe3-9fa1-45dc-b20f-602b7de1fd4c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "\u0002chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json b/change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json
new file mode 100644
index 0000000000000..103e38996d6ac
--- /dev/null
+++ b/change/@fluentui-react-drawer-70c3f806-65d7-4b1f-aaba-3a92ade08fee.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-drawer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-jsx-runtime-12473640-484d-4699-a36c-5d9e9c7a1622.json b/change/@fluentui-react-jsx-runtime-12473640-484d-4699-a36c-5d9e9c7a1622.json
new file mode 100644
index 0000000000000..10deaee299fa5
--- /dev/null
+++ b/change/@fluentui-react-jsx-runtime-12473640-484d-4699-a36c-5d9e9c7a1622.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-jsx-runtime",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-625c3222-142a-430e-b5de-4b0d6ecd800c.json b/change/@fluentui-react-menu-625c3222-142a-430e-b5de-4b0d6ecd800c.json
new file mode 100644
index 0000000000000..033f99fc8f6f7
--- /dev/null
+++ b/change/@fluentui-react-menu-625c3222-142a-430e-b5de-4b0d6ecd800c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-e5bd1559-048d-4423-8339-c1ef4cd8aa29.json b/change/@fluentui-react-migration-v0-v9-e5bd1559-048d-4423-8339-c1ef4cd8aa29.json
new file mode 100644
index 0000000000000..532068cc9d04b
--- /dev/null
+++ b/change/@fluentui-react-migration-v0-v9-e5bd1559-048d-4423-8339-c1ef4cd8aa29.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v8-v9-0dbfdec5-c535-461c-979a-dedf2e792f13.json b/change/@fluentui-react-migration-v8-v9-0dbfdec5-c535-461c-979a-dedf2e792f13.json
new file mode 100644
index 0000000000000..b64f6fd7cc2de
--- /dev/null
+++ b/change/@fluentui-react-migration-v8-v9-0dbfdec5-c535-461c-979a-dedf2e792f13.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-motion-bbf27d86-dd78-4b8e-907f-f1ba2d458f88.json b/change/@fluentui-react-motion-bbf27d86-dd78-4b8e-907f-f1ba2d458f88.json
new file mode 100644
index 0000000000000..375dcecd461af
--- /dev/null
+++ b/change/@fluentui-react-motion-bbf27d86-dd78-4b8e-907f-f1ba2d458f88.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-motion",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json b/change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json
new file mode 100644
index 0000000000000..9bd15e00b2e81
--- /dev/null
+++ b/change/@fluentui-react-search-f1e14f72-5b28-44d0-bb5e-7cc3260e00a4.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-search",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-b21a0221-810f-4b38-b928-13e54251c56b.json b/change/@fluentui-react-table-b21a0221-810f-4b38-b928-13e54251c56b.json
new file mode 100644
index 0000000000000..26a546220a475
--- /dev/null
+++ b/change/@fluentui-react-table-b21a0221-810f-4b38-b928-13e54251c56b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-table",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-536a8e63-1156-4ebc-8595-e72351ff0d29.json b/change/@fluentui-react-tabs-536a8e63-1156-4ebc-8595-e72351ff0d29.json
new file mode 100644
index 0000000000000..b6d7ee4594564
--- /dev/null
+++ b/change/@fluentui-react-tabs-536a8e63-1156-4ebc-8595-e72351ff0d29.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-tabs",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json b/change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json
new file mode 100644
index 0000000000000..34c5c83f97f82
--- /dev/null
+++ b/change/@fluentui-react-tag-picker-e9aa92f6-cda0-4905-8d4d-13d63785c30b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-tag-picker",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-ba1e922d-1d50-4b25-97af-f776b995023a.json b/change/@fluentui-react-toast-ba1e922d-1d50-4b25-97af-f776b995023a.json
new file mode 100644
index 0000000000000..d935266f701ec
--- /dev/null
+++ b/change/@fluentui-react-toast-ba1e922d-1d50-4b25-97af-f776b995023a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toast",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toolbar-199bf58f-2421-486a-bcf1-535db8cb98cf.json b/change/@fluentui-react-toolbar-199bf58f-2421-486a-bcf1-535db8cb98cf.json
new file mode 100644
index 0000000000000..1768e5829fcfe
--- /dev/null
+++ b/change/@fluentui-react-toolbar-199bf58f-2421-486a-bcf1-535db8cb98cf.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-utilities-852e0ed2-030e-44aa-b7f5-c16ea6283aa2.json b/change/@fluentui-react-utilities-852e0ed2-030e-44aa-b7f5-c16ea6283aa2.json
new file mode 100644
index 0000000000000..5130827b8da53
--- /dev/null
+++ b/change/@fluentui-react-utilities-852e0ed2-030e-44aa-b7f5-c16ea6283aa2.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "chore: slot API react v17/18 support",
+  "packageName": "@fluentui/react-utilities",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json b/change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json
new file mode 100644
index 0000000000000..1e2f10400c4ba
--- /dev/null
+++ b/change/@fluentui-react-virtualizer-672c17bd-9097-418a-af72-9283de7b72dd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: deprecates ComponentState.components property",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/package.json b/package.json
index f06d3bdcae186..d78c03bfa65c6 100644
--- a/package.json
+++ b/package.json
@@ -108,11 +108,11 @@
     "@swc/core": "1.5.7",
     "@swc/helpers": "0.5.1",
     "@swc/jest": "0.2.36",
-    "@testing-library/dom": "8.11.3",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.2",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "16.2.0",
     "@testing-library/react-hooks": "8.0.1",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/user-event": "14.6.1",
     "@tsconfig/node18": "1.0.3",
     "@types/babel__core": "7.20.5",
     "@types/babel__helper-plugin-utils": "7.10.3",
@@ -156,10 +156,10 @@
     "@types/node": "20.12.12",
     "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",
-    "@types/react": "17.0.44",
-    "@types/react-dom": "17.0.15",
-    "@types/react-is": "17.0.3",
-    "@types/react-test-renderer": "17.0.2",
+    "@types/react": "18.3.20",
+    "@types/react-dom": "18.3.5",
+    "@types/react-is": "18.3.1",
+    "@types/react-test-renderer": "18.3.1",
     "@types/react-transition-group": "4.4.6",
     "@types/react-window": "^1.8.2",
     "@types/request-promise-native": "1.0.18",
@@ -295,13 +295,13 @@
     "progress": "2.0.3",
     "puppeteer": "19.6.0",
     "raw-loader": "4.0.2",
-    "react": "17.0.2",
+    "react": "18.3.1",
     "react-app-polyfill": "2.0.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.3.1",
     "react-hot-loader": "4.13.0",
-    "react-is": "17.0.2",
+    "react-is": "18.3.1",
     "react-shadow": "20.3.0",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.3.1",
     "react-vis": "1.12.1",
     "react-window": "^1.8.6",
     "read-pkg-up": "7.0.1",
@@ -383,8 +383,7 @@
     "swc-loader": "^0.2.6",
     "prettier": "2.8.8",
     "puppeteer": "19.6.0",
-    "ws": "8.17.1",
-    "**/@mdx-js/react/@types/react": "^17"
+    "ws": "8.17.1"
   },
   "nx": {
     "includedScripts": []
diff --git a/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx b/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx
index fc2bc364e1117..764bb6db88033 100644
--- a/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx
+++ b/packages/charts/react-charting/src/components/ResponsiveContainer/ResponsiveContainer.tsx
@@ -78,7 +78,9 @@ export const ResponsiveContainer: React.FC<IResponsiveContainerProps> = props =>
           // Keep components styles
           ...child.props.styles,
           root: {
-            ...child.props.styles?.root,
+            ...(typeof child.props.styles !== 'function' && typeof child.props.styles?.root === 'object'
+              ? child.props?.styles?.root
+              : {}),
             // Ensure the child element fills the parent container
             // https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
             width: calculatedWidth,
diff --git a/packages/charts/react-charting/src/utilities/locale-util.ts b/packages/charts/react-charting/src/utilities/locale-util.ts
index 862aa45c8d38a..f2eb6d02ec3eb 100644
--- a/packages/charts/react-charting/src/utilities/locale-util.ts
+++ b/packages/charts/react-charting/src/utilities/locale-util.ts
@@ -1,5 +1,5 @@
 type LocaleStringDataProps = number | string | Date | undefined;
-export const convertToLocaleString = (data: LocaleStringDataProps, culture?: string): LocaleStringDataProps => {
+export const convertToLocaleString = (data: LocaleStringDataProps, culture?: string): string | number | undefined => {
   if (!data) {
     return data;
   }
diff --git a/packages/charts/react-charting/tsconfig.json b/packages/charts/react-charting/tsconfig.json
index c75bba0249fd9..c14e8fe3816f9 100644
--- a/packages/charts/react-charting/tsconfig.json
+++ b/packages/charts/react-charting/tsconfig.json
@@ -17,8 +17,8 @@
     "preserveConstEnums": true,
     "skipLibCheck": true,
     "lib": ["es5", "dom"],
-    "typeRoots": ["../../../node_modules/@types", "../../../typings"],
-    "types": ["jest", "custom-global", "@testing-library/jest-dom"],
+    "typeRoots": ["../../../node_modules/@types", "../../../typings", "../../../node_modules/@testing-library"],
+    "types": ["jest", "custom-global", "jest-dom"],
     "isolatedModules": true
   },
   "include": ["src"]
diff --git a/packages/fluentui/code-sandbox/src/SandboxApp.tsx b/packages/fluentui/code-sandbox/src/SandboxApp.tsx
index 9f6334d30d47f..53c64996ad1ed 100644
--- a/packages/fluentui/code-sandbox/src/SandboxApp.tsx
+++ b/packages/fluentui/code-sandbox/src/SandboxApp.tsx
@@ -55,7 +55,7 @@ const themes = {
   teamsHighContrastTheme,
 };
 
-export const SandboxApp: React.FunctionComponent = props => {
+export const SandboxApp: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
   const { children } = props;
   const [theme, setTheme] = React.useState(items[0].value);
 
diff --git a/packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx b/packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx
index 8e24352038a5e..2ddbe1f97890e 100644
--- a/packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx
+++ b/packages/fluentui/docs-components/src/CodeSnippet/CodeSnippetLabel.tsx
@@ -22,7 +22,7 @@ const copyIcon = (
   </svg>
 );
 
-export const CodeSnippetLabel: React.FunctionComponent<CopySnippetLabelProps> = props => {
+export const CodeSnippetLabel: React.FunctionComponent<React.PropsWithChildren<CopySnippetLabelProps>> = props => {
   const { copyable, label, mode, value } = props;
   const hasLabel = label !== false;
 
diff --git a/packages/fluentui/docs-components/src/knobs/KnobProvider.tsx b/packages/fluentui/docs-components/src/knobs/KnobProvider.tsx
index 26952ee7cb540..600a844de78bc 100644
--- a/packages/fluentui/docs-components/src/knobs/KnobProvider.tsx
+++ b/packages/fluentui/docs-components/src/knobs/KnobProvider.tsx
@@ -14,7 +14,7 @@ type KnobProviderProps = {
   components?: Partial<KnobComponents>;
 };
 
-export const KnobProvider: React.FunctionComponent<KnobProviderProps> = props => {
+export const KnobProvider: React.FunctionComponent<React.PropsWithChildren<KnobProviderProps>> = props => {
   const { children, components } = props;
 
   const [knobs, setKnobs] = React.useState<KnobSet>({});
diff --git a/packages/fluentui/docs-components/src/knobs/LogInspector.tsx b/packages/fluentui/docs-components/src/knobs/LogInspector.tsx
index 301a620e8ca16..db99cb6e63458 100644
--- a/packages/fluentui/docs-components/src/knobs/LogInspector.tsx
+++ b/packages/fluentui/docs-components/src/knobs/LogInspector.tsx
@@ -6,7 +6,7 @@ type LogInspectorProps = {
   silent?: boolean;
 };
 
-export const LogInspector: React.FunctionComponent<LogInspectorProps> = props => {
+export const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => {
   const { components } = React.useContext(KnobContext);
 
   const { clearLog } = React.useContext(LogContextFunctions);
diff --git a/packages/fluentui/docs-components/src/knobs/defaultComponents.tsx b/packages/fluentui/docs-components/src/knobs/defaultComponents.tsx
index 293e127a8edee..8e52d002cfe50 100644
--- a/packages/fluentui/docs-components/src/knobs/defaultComponents.tsx
+++ b/packages/fluentui/docs-components/src/knobs/defaultComponents.tsx
@@ -8,7 +8,7 @@ import {
 } from './types';
 import { parseValue } from './utils/parseRangeValue';
 
-const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobField: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <div
     style={{
       borderBottom: '1px solid rgb(234, 234, 234)',
@@ -22,7 +22,7 @@ const KnobField: React.FunctionComponent<KnobComponentProps> = props => (
   </div>
 );
 
-const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobControl: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <span
     style={{
       verticalAlign: 'middle',
@@ -34,13 +34,13 @@ const KnobControl: React.FunctionComponent<KnobComponentProps> = props => (
   </span>
 );
 
-const KnobLabel: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobLabel: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <label htmlFor={`knob_${props.name}`} style={{ marginRight: 5 }}>
     {props.content || <code>{props.name}</code>}
   </label>
 );
 
-const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobBoolean: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     checked={props.value}
@@ -52,7 +52,7 @@ const KnobBoolean: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props => (
+const KnobNumber: React.FunctionComponent<React.PropsWithChildren<KnobNumberKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -76,7 +76,7 @@ const KnobNumber: React.FunctionComponent<KnobNumberKnobComponentProps> = props
   />
 );
 
-const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobSelect: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <select
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -94,7 +94,7 @@ const KnobSelect: React.FunctionComponent<KnobComponentProps> = props => (
   </select>
 );
 
-const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props => (
+const KnobRange: React.FunctionComponent<React.PropsWithChildren<KnobRangeKnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     type="range"
@@ -109,7 +109,7 @@ const KnobRange: React.FunctionComponent<KnobRangeKnobComponentProps> = props =>
   />
 );
 
-const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
+const KnobString: React.FunctionComponent<React.PropsWithChildren<KnobComponentProps>> = props => (
   <input
     id={`knob_${props.name}`}
     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
@@ -120,7 +120,7 @@ const KnobString: React.FunctionComponent<KnobComponentProps> = props => (
   />
 );
 
-const LogInspector: React.FunctionComponent<LogInspectorProps> = props => (
+const LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>> = props => (
   <>
     <div style={{ display: 'flex', padding: 5 }}>
       <div style={{ flexGrow: 1 }}>
diff --git a/packages/fluentui/docs-components/src/knobs/types.ts b/packages/fluentui/docs-components/src/knobs/types.ts
index b662aafc76cdc..35ae1687d2cff 100644
--- a/packages/fluentui/docs-components/src/knobs/types.ts
+++ b/packages/fluentui/docs-components/src/knobs/types.ts
@@ -13,7 +13,7 @@ export type KnobName = string;
 
 export type KnobSet = Record<KnobName, KnobDefinition>;
 
-export type KnobComponent<P = KnobComponentProps> = React.FunctionComponent<P>;
+export type KnobComponent<P = KnobComponentProps> = React.FunctionComponent<React.PropsWithChildren<P>>;
 
 export type KnobComponents = {
   KnobField: KnobComponent;
@@ -26,7 +26,7 @@ export type KnobComponents = {
   KnobSelect: KnobComponent;
   KnobString: KnobComponent;
 
-  LogInspector: React.FunctionComponent<LogInspectorProps>;
+  LogInspector: React.FunctionComponent<React.PropsWithChildren<LogInspectorProps>>;
 };
 
 export type KnobComponentProps = KnobDefinition & {
diff --git a/packages/fluentui/docs/src/app.tsx b/packages/fluentui/docs/src/app.tsx
index 47669c3c5ddd3..79ee22ee05c14 100644
--- a/packages/fluentui/docs/src/app.tsx
+++ b/packages/fluentui/docs/src/app.tsx
@@ -53,7 +53,7 @@ function useRendererFactory(): CreateRenderer {
   return rendererFactory;
 }
 
-const App: React.FC = () => {
+const App: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [themeName, setThemeName] = React.useState<ThemeName>(themeContextDefaults.themeName);
   // State also contains the updater function so it will
   // be passed down into the context provider
diff --git a/packages/fluentui/docs/src/components/ComponentBestPractices.tsx b/packages/fluentui/docs/src/components/ComponentBestPractices.tsx
index 77d7d2d593656..0dca55324c8bb 100644
--- a/packages/fluentui/docs/src/components/ComponentBestPractices.tsx
+++ b/packages/fluentui/docs/src/components/ComponentBestPractices.tsx
@@ -17,7 +17,7 @@ export type ComponentBestPracticesProps = Extendable<{
   dontList?: React.ReactNode[];
 }>;
 
-const ComponentBestPractices: React.FC<ComponentBestPracticesProps> = ({ doList, dontList }) => {
+const ComponentBestPractices: React.FC<React.PropsWithChildren<ComponentBestPracticesProps>> = ({ doList, dontList }) => {
   const updatedDoList: ShorthandCollection<ListItemProps> = [];
   const updatedDontList: ShorthandCollection<ListItemProps> = [];
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/BehaviorDescription.tsx b/packages/fluentui/docs/src/components/ComponentDoc/BehaviorDescription.tsx
index 0097da5ac791d..5ad1de244ee1e 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/BehaviorDescription.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/BehaviorDescription.tsx
@@ -5,7 +5,7 @@ const AccessibilityDescription = React.lazy(() => import('./InlineMarkdown'));
 
 const item = '- ';
 
-const BehaviorDescription: React.FunctionComponent<{ value: string }> = ({ value }) => {
+const BehaviorDescription: React.FunctionComponent<React.PropsWithChildren<{ value: string }>> = ({ value }) => {
   // doctrine has a bug where it ignores list item indicator (-) if it is in the beginning of the comment
   // because of that, add the list item indicators after parsing
   const markdown =
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentBundleSizeExample/ComponentBundleSizeExample.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentBundleSizeExample/ComponentBundleSizeExample.tsx
index a3625b97fff84..31b47d45c9059 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentBundleSizeExample/ComponentBundleSizeExample.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentBundleSizeExample/ComponentBundleSizeExample.tsx
@@ -12,7 +12,7 @@ export interface ComponentBundleSizeExampleProps {
   examplePath: string;
 }
 
-const ComponentBundleSizeExample: React.FunctionComponent<ComponentBundleSizeExampleProps> = props => {
+const ComponentBundleSizeExample: React.FunctionComponent<React.PropsWithChildren<ComponentBundleSizeExampleProps>> = props => {
   const { title, description, examplePath } = props;
   // "components/Divider/Performance/Divider.bsize" -> dividerBSizeTsxJs
   const perfTestName = `${_.camelCase(_.last(examplePath.split('/')))}TsxJs`;
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
index 28bcc697c2a79..5d98ac2101501 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentControls/ComponentControls.tsx
@@ -35,7 +35,7 @@ type ComponentControlsProps = {
   titleForAriaLabel?: string;
 };
 
-const ComponentControls: React.FC<ComponentControlsProps> = props => {
+const ComponentControls: React.FC<React.PropsWithChildren<ComponentControlsProps>> = props => {
   const {
     anchorName,
     exampleCode,
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
index 7a7c37e82317a..c4510bddf1148 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentDocAccessibility.tsx
@@ -81,7 +81,7 @@ function getAllAvailableBehaviors(
   return _.union(behaviorVariantsWithoutDefault, otherAvailableVariants);
 }
 
-export const ComponentDocAccessibility: React.FC<ComponentDocAccessibility> = ({ info }) => {
+export const ComponentDocAccessibility: React.FC<React.PropsWithChildren<ComponentDocAccessibility>> = ({ info }) => {
   const defaultBehaviorName = getDefaultBehaviorName(info);
   const defaultBehaviorFileName = `${_.camelCase(defaultBehaviorName)}.ts`;
   const description = getDescription(info);
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker.tsx
index ec102d03b194f..45988374fec06 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleColorPicker.tsx
@@ -8,7 +8,7 @@ type ComponentExampleColorPickerProps = {
   variableValue: string;
 };
 
-const ComponentExampleColorPicker: React.FunctionComponent<ComponentExampleColorPickerProps> = props => {
+const ComponentExampleColorPicker: React.FunctionComponent<React.PropsWithChildren<ComponentExampleColorPickerProps>> = props => {
   const { onChange, variableValue } = props;
   const { theme } = useFluentContext();
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariable.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariable.tsx
index f5a49987c938e..9a42a19c8ed7f 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariable.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariable.tsx
@@ -10,7 +10,7 @@ export type ComponentExampleVariableProps = {
   variableValue: string;
 };
 
-const ComponentExampleVariable: React.FunctionComponent<ComponentExampleVariableProps> = props => {
+const ComponentExampleVariable: React.FunctionComponent<React.PropsWithChildren<ComponentExampleVariableProps>> = props => {
   const { componentName, onChange, variableName, variableType, variableValue } = props;
 
   const handleInputChange = React.useCallback(
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx
index d7654e938dac2..f1527a15ed6ff 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentExample/ComponentExampleVariables.tsx
@@ -28,7 +28,7 @@ const getGroupName = (variableName: string): string => {
   return 'Other';
 };
 
-const ComponentExampleVariables: React.FunctionComponent<ComponentExampleVariablesProps> = props => {
+const ComponentExampleVariables: React.FunctionComponent<React.PropsWithChildren<ComponentExampleVariablesProps>> = props => {
   const { onChange, overriddenVariables, usedVariables } = props;
 
   const { theme } = useFluentContext();
@@ -70,7 +70,6 @@ const ComponentExampleVariables: React.FunctionComponent<ComponentExampleVariabl
       {/*  onChange={(e, data) => setHideUnused(!data.checked)} */}
       {/*  styles={{ float: 'right', top: '1.25rem', right: '1.25rem' }} */}
       {/* /> */}
-
       {_.map(filteredVariables, (componentVariables, componentName) => {
         const groupedVariables: Record<string, string[]> = _.groupBy(
           Object.keys(componentVariables).sort(),
@@ -82,7 +81,6 @@ const ComponentExampleVariables: React.FunctionComponent<ComponentExampleVariabl
             <Header as="h2" styles={{ marginTop: 0 }}>
               {componentName}
             </Header>
-
             {_.map(groupedVariables, (variableNames, groupName) => (
               <>
                 <Header as="h3" styles={{ marginTop: '4px', marginBottom: '4px' }}>
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx
index 3ab168e8c21e3..cc30962094207 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPerfExample/ComponentPerfExample.tsx
@@ -19,7 +19,7 @@ export interface ComponentPerfExampleProps {
   examplePath: string;
 }
 
-const ComponentPerfExample: React.FC<ComponentPerfExampleProps> = props => {
+const ComponentPerfExample: React.FC<React.PropsWithChildren<ComponentPerfExampleProps>> = props => {
   const { title, description, examplePath } = props;
   const [activeIndex, setActiveIndex] = React.useState<AccordionProps['activeIndex']>();
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx
index 8c602daba3e09..fc8a7c375d974 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentProp/ComponentPropFunctionSignature.tsx
@@ -30,7 +30,7 @@ const rowStyle: any = {
 
 const getTagType = tag => (tag.type ? (tag.type.type === 'AllLiteral' ? 'any' : tag.type.name) : '');
 
-const ComponentPropFunctionSignature: React.SFC<ComponentPropFunctionProps> = ({ name, tags }) => {
+const ComponentPropFunctionSignature: React.FC<React.PropsWithChildren<ComponentPropFunctionProps>> = ({ name, tags }) => {
   const params = _.filter(tags, { title: 'param' });
   const returns = _.find(tags, { title: 'returns' });
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx
index 4727d0f0de59f..f43ac33049046 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentProps/ComponentPropCard.tsx
@@ -11,7 +11,7 @@ type ComponentPropCardProps = {
   description: string;
 };
 
-const ComponentPropCard: React.FC<ComponentPropCardProps> = ({ name, description }) => (
+const ComponentPropCard: React.FC<React.PropsWithChildren<ComponentPropCardProps>> = ({ name, description }) => (
   <Segment styles={cardStyle}>
     <div>{description}</div>
     <Divider />
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx
index 1fa4736374dcb..722ca3184a1da 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsRow.tsx
@@ -11,7 +11,7 @@ const InlineMarkdown = React.lazy(() => import('../InlineMarkdown'));
 
 type ComponentPropsRowProps = ComponentProp;
 
-const ComponentPropValue: React.FunctionComponent<ComponentPropType> = props => {
+const ComponentPropValue: React.FunctionComponent<React.PropsWithChildren<ComponentPropType>> = props => {
   const { name, parameters } = props;
 
   if (name === 'literal') return <span>enum</span>;
@@ -43,7 +43,7 @@ const ComponentPropValue: React.FunctionComponent<ComponentPropType> = props =>
   return <span>{name}</span>;
 };
 
-const ComponentPropsRow: React.FunctionComponent<ComponentPropsRowProps> = props => {
+const ComponentPropsRow: React.FunctionComponent<React.PropsWithChildren<ComponentPropsRowProps>> = props => {
   const { defaultValue, description, name, required, types } = props;
 
   const shorthand = types.some(type => type.name === 'ShorthandValue' || type.name === 'ShorthandCollection');
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx
index 6239d40ac2f30..1cae5f9741fb1 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ComponentPropsTable/ComponentPropsTable.tsx
@@ -18,7 +18,7 @@ type ComponentPropsTable = {
  * Displays a table of a Component's PropTypes.
  * TODO: use Flex or a Table component, when it will be available
  */
-const ComponentPropsTable: React.FunctionComponent<ComponentPropsTable> = props => {
+const ComponentPropsTable: React.FunctionComponent<React.PropsWithChildren<ComponentPropsTable>> = props => {
   const componentProps = useComponentProps(props.componentName);
 
   return (
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/ExampleSection.tsx b/packages/fluentui/docs/src/components/ComponentDoc/ExampleSection.tsx
index 0d237886ee037..7487d2c069cc5 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/ExampleSection.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/ExampleSection.tsx
@@ -13,7 +13,7 @@ export type ExampleSectionProps = Extendable<{
 }>;
 
 // minmax = prevent example overflow - https://stackoverflow.com/a/43312314
-const ExampleSection: React.FC<ExampleSectionProps> = ({ title, children }) => (
+const ExampleSection: React.FC<React.PropsWithChildren<ExampleSectionProps>> = ({ title, children }) => (
   <>
     <Header as="h2" align="center" styles={headerStyle} className="no-anchor">
       {title}
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/InlineMarkdown.tsx b/packages/fluentui/docs/src/components/ComponentDoc/InlineMarkdown.tsx
index d33950446a740..3648620a2e6e7 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/InlineMarkdown.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/InlineMarkdown.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 
-const InlineMarkdown: React.FunctionComponent<{ value: string }> = ({ value }) => (
+const InlineMarkdown: React.FunctionComponent<React.PropsWithChildren<{ value: string }>> = ({ value }) => (
   <ReactMarkdown>{value}</ReactMarkdown>
 );
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/LazyWithBabel.tsx b/packages/fluentui/docs/src/components/ComponentDoc/LazyWithBabel.tsx
index f30711d5c99dc..c56e8081aa431 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/LazyWithBabel.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/LazyWithBabel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import useScript from '@charlietango/use-script';
 import { Loader } from '@fluentui/react-northstar';
 
-export const LazyWithBabel: React.FunctionComponent = ({ children }) => {
+export const LazyWithBabel: React.FunctionComponent<React.PropsWithChildren<unknown>> = ({ children }) => {
   const url = `https://cdn.jsdelivr.net/npm/@babel/standalone@${window['versions'].babelStandalone}/babel.min.js`;
   const [ready] = useScript(url);
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/NonPublicSection.tsx b/packages/fluentui/docs/src/components/ComponentDoc/NonPublicSection.tsx
index 1fcf881a809c7..61b5f55a91653 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/NonPublicSection.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/NonPublicSection.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import ExampleSection, { ExampleSectionProps } from './ExampleSection';
 
-const NonPublicSection: React.FC<ExampleSectionProps> = props => {
+const NonPublicSection: React.FC<React.PropsWithChildren<ExampleSectionProps>> = props => {
   return process.env.NODE_ENV === 'development' ? <ExampleSection {...props} /> : null;
 };
 
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/BundleSizeChart.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/BundleSizeChart.tsx
index 4c0187bb5e668..a4d67892ba56d 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/BundleSizeChart.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/BundleSizeChart.tsx
@@ -21,7 +21,7 @@ const formatXAxis = val => {
  * x-axis is a build number
  * y-axis is a bundle size
  */
-const BundleSizeChart: React.FC<BundleSizeChartProps> = ({ perfData }) => {
+const BundleSizeChart: React.FC<React.PropsWithChildren<BundleSizeChartProps>> = ({ perfData }) => {
   const availableCharts: string[] = perfData
     .reduce((acc, next) => {
       return Array.from(new Set([...acc, ...Object.keys(next.bundleSize)]));
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/Chart.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/Chart.tsx
index 3a226546ab174..b814bed0015ce 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/Chart.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/Chart.tsx
@@ -36,7 +36,7 @@ const formatXAxis = val => {
   return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 };
 
-const Chart: React.FC<ChartProps> = ({ perfData, yAxisLabel, group, Tooltip, dataSeries }) => {
+const Chart: React.FC<React.PropsWithChildren<ChartProps>> = ({ perfData, yAxisLabel, group, Tooltip, dataSeries }) => {
   const availableCharts: string[] = perfData
     .reduce((acc, next) => {
       return Array.from(new Set([...acc, ...Object.keys(next[group])]));
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ComponentChart.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ComponentChart.tsx
index 122e8b58f9d5f..4f106582702d1 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ComponentChart.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ComponentChart.tsx
@@ -12,7 +12,7 @@ enum FILTER_BY {
 
 export type ComponentChartProps = { chartData; Filter?; Chart };
 
-const ComponentChart: React.FunctionComponent<ComponentChartProps> = ({ chartData, Filter, Chart }) => {
+const ComponentChart: React.FunctionComponent<React.PropsWithChildren<ComponentChartProps>> = ({ chartData, Filter, Chart }) => {
   const { loading, error, data } = chartData;
 
   const [filterBy, setFilterBy] = React.useState(FILTER_BY.CI_BUILD);
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfChart.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfChart.tsx
index fa2f39ed7a340..08b5bcb7f08f1 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfChart.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfChart.tsx
@@ -20,7 +20,7 @@ const medColor = '#555555';
 const tpiColor = '#387fc2';
 const minColor = '#59b359';
 
-const PerfChart: React.FC<PerfChartProps> = ({ perfData, filter }) => {
+const PerfChart: React.FC<React.PropsWithChildren<PerfChartProps>> = ({ perfData, filter }) => {
   const dataSeries: ChartDataSeries[] = [
     filter?.extremes && {
       name: 'max',
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfDataProvider.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfDataProvider.tsx
index 7469fc583e35b..b6a5f5ad63304 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfDataProvider.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/PerfDataProvider.tsx
@@ -11,7 +11,7 @@ import config from '../../../config';
  * [ ] refresh support
  * [ ] serve static data in public builds
  */
-const PerfDataProvider: React.FC = ({ children }) => {
+const PerfDataProvider: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => {
   const [loading, setLoading] = React.useState(true);
   const [error, setError] = React.useState();
   const [data, setData] = React.useState();
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ResourcesChart.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ResourcesChart.tsx
index da086906f0d91..f4efe579b437d 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ResourcesChart.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PerfChart/ResourcesChart.tsx
@@ -23,7 +23,7 @@ function intToRGB(i) {
   return '00000'.substring(0, 6 - c.length) + c;
 }
 
-const ResourcesChart: React.FC<ResourcesChartProps> = ({ perfData, filter = [] }) => {
+const ResourcesChart: React.FC<React.PropsWithChildren<ResourcesChartProps>> = ({ perfData, filter = [] }) => {
   const dataSeries: ChartDataSeries[] = filter.map(d => ({
     name: d,
     data: `flamegrill.profile.metrics.${d}`,
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfControls.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfControls.tsx
index 51fc95359bab9..5583e7ebf798d 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfControls.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfControls.tsx
@@ -9,7 +9,7 @@ export interface PrototypeExampleControlsProps {
   examplePath: string;
 }
 
-const PrototypeExampleControls: React.FC<PrototypeExampleControlsProps> = props => {
+const PrototypeExampleControls: React.FC<React.PropsWithChildren<PrototypeExampleControlsProps>> = props => {
   const items = [
     {
       icon: <OpenOutsideIcon style={{ width: '20px', height: '20px' }} />,
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfExample.tsx b/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfExample.tsx
index ef10c0c6b8885..d66433836d6f6 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfExample.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/PrototypePerfExample/PrototypePerfExample.tsx
@@ -22,7 +22,7 @@ export interface PrototypePerfExampleProps {
   examplePath: string;
 }
 
-const PrototypePerfExample: React.FC<PrototypePerfExampleProps> = props => {
+const PrototypePerfExample: React.FC<React.PropsWithChildren<PrototypePerfExampleProps>> = props => {
   const { title, description, examplePath } = props;
 
   const Prototype = React.lazy(async () => ({
diff --git a/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx b/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx
index 460eb641b1d9a..b9311cadf4c0c 100644
--- a/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx
+++ b/packages/fluentui/docs/src/components/ComponentDoc/SourceRender.tsx
@@ -12,7 +12,7 @@ type SourceRenderProps = {
   onRender?: (error: Error | null) => void;
 };
 
-export const SourceRender: React.FC<SourceRenderProps> = props => (
+export const SourceRender: React.FC<React.PropsWithChildren<SourceRenderProps>> = props => (
   <LazyWithBabel>
     <_SourceRender {...props} />
   </LazyWithBabel>
diff --git a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlayground.tsx b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
index 62d082fac96de..0332e30c57678 100644
--- a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
+++ b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlayground.tsx
@@ -32,7 +32,7 @@ const unsupportedComponents = [
   'Ref',
 ];
 
-const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = props => {
+const ComponentPlayground: React.FunctionComponent<React.PropsWithChildren<ComponentPlaygroundProps>> = props => {
   if (unsupportedComponents.indexOf(props.componentName) !== -1) {
     return null;
   }
@@ -43,7 +43,7 @@ const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = p
   );
 
   if (playgroundPath) {
-    const component: React.FC = examplePlaygroundContext(playgroundPath).default;
+    const component: React.FC<React.PropsWithChildren<unknown>> = examplePlaygroundContext(playgroundPath).default;
 
     return <ComponentPlaygroundTemplate component={component} fluid={props.componentName === 'Chat'} />;
   }
@@ -74,7 +74,7 @@ const ComponentPlayground: React.FunctionComponent<ComponentPlaygroundProps> = p
 
 export default props => (
   /* KnobProvider should be defined outside otherwise hooks will not properly register */
-  <KnobProvider>
+  (<KnobProvider>
     <ComponentPlayground {...props} />
-  </KnobProvider>
+  </KnobProvider>)
 );
diff --git a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundSnippet.tsx b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundSnippet.tsx
index 756140f551439..7fc69d8dc2d55 100644
--- a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundSnippet.tsx
+++ b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundSnippet.tsx
@@ -3,13 +3,13 @@ import * as React from 'react';
 
 type ComponentPlaygroundSnippetProps = {
   element?: React.ReactElement;
-  component?: React.FunctionComponent;
+  component?: React.FunctionComponent<React.PropsWithChildren<unknown>>;
 } & Partial<CodeSnippetProps>;
 
 /**
  * This component uses `react-element-to-jsx-string` to get a generated markup with props.
  */
-const ComponentPlaygroundSnippet: React.FunctionComponent<ComponentPlaygroundSnippetProps> = props => {
+const ComponentPlaygroundSnippet: React.FunctionComponent<React.PropsWithChildren<ComponentPlaygroundSnippetProps>> = props => {
   const { element, component, ...rest } = props;
 
   if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundTemplate.tsx b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundTemplate.tsx
index dd4d9a95d5d7d..ea0110a33f6ab 100644
--- a/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundTemplate.tsx
+++ b/packages/fluentui/docs/src/components/ComponentPlayground/ComponentPlaygroundTemplate.tsx
@@ -7,18 +7,18 @@ import ComponentPlaygroundSnippet from './ComponentPlaygroundSnippet';
 
 type ComponentPlaygroundTemplateProps = {
   element?: React.ReactElement;
-  component?: React.FunctionComponent;
+  component?: React.FunctionComponent<React.PropsWithChildren<unknown>>;
   fluid?: boolean;
 };
 
-const NoopKnobProvider: React.FunctionComponent = props => {
+const NoopKnobProvider: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
   const knobContext = React.useContext(unstable_KnobContext);
   const noopContext = { ...knobContext, registerKnob: _.noop, unregisterKnob: _.noop };
 
   return <unstable_KnobContext.Provider value={noopContext}>{props.children}</unstable_KnobContext.Provider>;
 };
 
-const ComponentPlaygroundTemplate: React.FunctionComponent<ComponentPlaygroundTemplateProps> = props => (
+const ComponentPlaygroundTemplate: React.FunctionComponent<React.PropsWithChildren<ComponentPlaygroundTemplateProps>> = props => (
   <Flex fill gap="gap.medium">
     <Flex
       column
diff --git a/packages/fluentui/docs/src/components/ExampleSnippet/ExampleSnippet.tsx b/packages/fluentui/docs/src/components/ExampleSnippet/ExampleSnippet.tsx
index 0ad267eca0ef2..3786a6e2d2d1a 100644
--- a/packages/fluentui/docs/src/components/ExampleSnippet/ExampleSnippet.tsx
+++ b/packages/fluentui/docs/src/components/ExampleSnippet/ExampleSnippet.tsx
@@ -19,7 +19,7 @@ const renderedStyle = {
   padding: '1rem',
 };
 
-const ExampleSnippet: React.FunctionComponent<ExampleSnippetProps> = props => {
+const ExampleSnippet: React.FunctionComponent<React.PropsWithChildren<ExampleSnippetProps>> = props => {
   const { children, render = () => null, value } = props;
 
   const child: React.ReactElement | null = render() || children;
diff --git a/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx b/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx
index c885abc3b1876..c342b98d16388 100644
--- a/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx
+++ b/packages/fluentui/docs/src/components/ExternalExampleLayout.tsx
@@ -33,7 +33,7 @@ const themes = {
   teamsDarkV2: teamsDarkV2Theme,
 };
 
-const ExternalExampleLayout: React.FC<ExternalExampleLayoutProps> = props => {
+const ExternalExampleLayout: React.FC<React.PropsWithChildren<ExternalExampleLayoutProps>> = props => {
   const { exampleName, rtl } = props.match.params;
 
   const [renderId, setRenderId] = React.useState<number>(0);
diff --git a/packages/fluentui/docs/src/components/GuidesNavigationFooter.tsx b/packages/fluentui/docs/src/components/GuidesNavigationFooter.tsx
index 5b990ffe3f63b..cf5f99cce1e95 100644
--- a/packages/fluentui/docs/src/components/GuidesNavigationFooter.tsx
+++ b/packages/fluentui/docs/src/components/GuidesNavigationFooter.tsx
@@ -13,7 +13,7 @@ type GuidesNavigationFooterProps = {
   next?: PageDescriptor;
 };
 
-const GuidesNavigationFooter: React.FC<GuidesNavigationFooterProps> = ({ previous, next }) => (
+const GuidesNavigationFooter: React.FC<React.PropsWithChildren<GuidesNavigationFooterProps>> = ({ previous, next }) => (
   <>
     <br />
     <Divider size={1} />
diff --git a/packages/fluentui/docs/src/components/Logo/Logo.tsx b/packages/fluentui/docs/src/components/Logo/Logo.tsx
index 19dcd32e68ed8..1b81846d5783c 100644
--- a/packages/fluentui/docs/src/components/Logo/Logo.tsx
+++ b/packages/fluentui/docs/src/components/Logo/Logo.tsx
@@ -5,7 +5,7 @@ export type LogoProps = ImageProps & {
   flavor?: 'black' | 'white' | 'inverted';
 };
 
-const Logo: React.SFC<LogoProps> = ({ flavor, ...props }) => (
+const Logo: React.FC<React.PropsWithChildren<LogoProps>> = ({ flavor, ...props }) => (
   <Image
     {...props}
     src={`https://fabricweb.azureedge.net/fabric-website/assets/images/fluent-ui-logo${flavor ? `-${flavor}` : ''}.png`}
diff --git a/packages/fluentui/docs/src/components/MarkdownPage.tsx b/packages/fluentui/docs/src/components/MarkdownPage.tsx
index 5ebeebb1f6ec9..7c434d3801668 100644
--- a/packages/fluentui/docs/src/components/MarkdownPage.tsx
+++ b/packages/fluentui/docs/src/components/MarkdownPage.tsx
@@ -10,7 +10,7 @@ import GuidesNavigationFooter, { PageDescriptor } from './GuidesNavigationFooter
 
 type MarkdownPageProps = {
   page: {
-    default: React.ComponentType<any>;
+    default: React.ComponentType<React.PropsWithChildren<any>>;
     meta: {
       previous?: PageDescriptor;
       next?: PageDescriptor;
@@ -51,7 +51,7 @@ const components = {
   img: props => <img style={{ maxWidth: '100%' }} {...props} />,
 };
 
-const MarkdownPage: React.FunctionComponent<MarkdownPageProps> = props => {
+const MarkdownPage: React.FunctionComponent<React.PropsWithChildren<MarkdownPageProps>> = props => {
   const { page } = props;
   const { default: Component, meta } = page;
 
diff --git a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx
index f84e0d12505c5..d448d36b6de59 100644
--- a/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx
+++ b/packages/fluentui/docs/src/components/Sidebar/Sidebar.tsx
@@ -359,7 +359,7 @@ const getSectionsWithPrototypeSectionIfApplicable = (currentSections, allPrototy
   return currentSections.concat(prototypeTreeSection);
 };
 
-const Sidebar: React.FC<RouteComponentProps & SidebarProps> = props => {
+const Sidebar: React.FC<React.PropsWithChildren<RouteComponentProps & SidebarProps>> = props => {
   const [query, setQuery] = React.useState('');
   const [activeItemIds, setActiveItemIds] = React.useState<string[]>([]);
   const searchInputRef = React.useRef<HTMLInputElement>();
diff --git a/packages/fluentui/docs/src/components/SystemColors.tsx b/packages/fluentui/docs/src/components/SystemColors.tsx
index 105372a8bd1f6..bb8822be5c868 100644
--- a/packages/fluentui/docs/src/components/SystemColors.tsx
+++ b/packages/fluentui/docs/src/components/SystemColors.tsx
@@ -3,7 +3,7 @@ import { Grid } from '@fluentui/react-northstar';
 import ColorBox from './ColorBox';
 import { systemColors } from '../utils';
 
-const SystemColors: React.FC = () => {
+const SystemColors: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Grid columns={2} variables={{ gridGap: '.5rem', padding: '.75rem' }}>
       {systemColors.map(color => (
diff --git a/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx b/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
index 56d09788c4c10..b68430b619af5 100644
--- a/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
+++ b/packages/fluentui/docs/src/components/VariableResolver/VariableResolver.tsx
@@ -9,7 +9,7 @@ type VariableResolverProps = {
   onResolve: (variables: Record<string, string[]>) => void;
 };
 
-const VariableResolver: React.FunctionComponent<VariableResolverProps> = props => {
+const VariableResolver: React.FunctionComponent<React.PropsWithChildren<VariableResolverProps>> = props => {
   const { onResolve } = props;
 
   const elementRef = React.useRef<HTMLDivElement>();
diff --git a/packages/fluentui/docs/src/examples/components/Accordion/BestPractices/AccordionBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Accordion/BestPractices/AccordionBestPractices.tsx
index 9608f3f6ffec3..63b752882fb18 100644
--- a/packages/fluentui/docs/src/examples/components/Accordion/BestPractices/AccordionBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Accordion/BestPractices/AccordionBestPractices.tsx
@@ -7,7 +7,7 @@ const doList = [
   'Use Tree component to display a hierarchical structure that allows user to select one item.',
 ];
 
-const AccordionBestPractices: React.FunctionComponent<{}> = () => {
+const AccordionBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Breadcrumb/BestPractices/BreadcrumbBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Breadcrumb/BestPractices/BreadcrumbBestPractices.tsx
index 6ac41c34b6200..d869b55f93acb 100644
--- a/packages/fluentui/docs/src/examples/components/Breadcrumb/BestPractices/BreadcrumbBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Breadcrumb/BestPractices/BreadcrumbBestPractices.tsx
@@ -16,7 +16,7 @@ const doList = [
 
 const dontList = ["Don't use Breadcrumbs as a primary way to navigate an app or site."];
 
-const BreadcrumbBestPractices: React.FunctionComponent<{}> = () => {
+const BreadcrumbBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} dontList={dontList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Button/BestPractices/ButtonBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Button/BestPractices/ButtonBestPractices.tsx
index 414aa96bf4879..02a3db6f6de4d 100644
--- a/packages/fluentui/docs/src/examples/components/Button/BestPractices/ButtonBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Button/BestPractices/ButtonBestPractices.tsx
@@ -14,7 +14,7 @@ const doList = [
   </Text>,
 ];
 
-const ButtonBestPractices: React.FunctionComponent<{}> = () => {
+const ButtonBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx
index f9b1883de0dbe..c90ad55249371 100644
--- a/packages/fluentui/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Divider, Flex } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const ButtonExampleSizeShorthand: React.FC = () => (
+const ButtonExampleSizeShorthand: React.FC<React.PropsWithChildren<unknown>> = () => (
   <>
     <Flex gap="gap.smaller">
       <Button size="small" content="Small" />
diff --git a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableChildrenGrid.tsx b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableChildrenGrid.tsx
index 797e8742cdf56..6544fcb84151c 100644
--- a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableChildrenGrid.tsx
+++ b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableChildrenGrid.tsx
@@ -63,7 +63,7 @@ const positions = [
   'Computer Specialist',
 ];
 
-const SampleCard: React.FC<SampleCardProps> = ({ index, ...unhandledProps }) => {
+const SampleCard: React.FC<React.PropsWithChildren<SampleCardProps>> = ({ index, ...unhandledProps }) => {
   return (
     <Card
       id={`card_${index}`}
diff --git a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableGrid.tsx b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableGrid.tsx
index 3c77585e3eaca..2615585e76497 100644
--- a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableGrid.tsx
+++ b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleFocusableGrid.tsx
@@ -14,7 +14,7 @@ type ClickableCardProps = {
   index?: number;
 };
 
-const ClickableCard: React.FC<ClickableCardProps> = ({ index }) => {
+const ClickableCard: React.FC<React.PropsWithChildren<ClickableCardProps>> = ({ index }) => {
   const [clickCount, setClickCount] = React.useState(0);
   const updateClickCount = () => {
     setClickCount(count => count + 1);
diff --git a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleSelectableGrid.tsx b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleSelectableGrid.tsx
index 0acaddcdb2fa1..beea1b69510af 100644
--- a/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleSelectableGrid.tsx
+++ b/packages/fluentui/docs/src/examples/components/Card/Usage/CardExampleSelectableGrid.tsx
@@ -21,7 +21,7 @@ type SelectableCardProps = {
   onClick?: (e: React.SyntheticEvent) => void;
 };
 
-const SelectableCard: React.FC<SelectableCardProps> = ({ title, index, selected, onClick, ...rest }) => {
+const SelectableCard: React.FC<React.PropsWithChildren<SelectableCardProps>> = ({ title, index, selected, onClick, ...rest }) => {
   const selectedMessageId = `selectedMessageId${index}`;
   const selectedMessage = 'selected';
   const notSelectedMessage = 'not selected';
diff --git a/packages/fluentui/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
index 8a4d805b77463..170d1541a0544 100644
--- a/packages/fluentui/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Carousel/BestPractices/CarouselBestPractices.tsx
@@ -22,7 +22,7 @@ const doList = [
   </Box>,
 ];
 
-const CarouselBestPractices: React.FunctionComponent<{}> = () => {
+const CarouselBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Chat/Playground.tsx b/packages/fluentui/docs/src/examples/components/Chat/Playground.tsx
index 1ac90de5d886a..885f30bb90171 100644
--- a/packages/fluentui/docs/src/examples/components/Chat/Playground.tsx
+++ b/packages/fluentui/docs/src/examples/components/Chat/Playground.tsx
@@ -44,7 +44,7 @@ const reactionGroup: ShorthandCollection<ReactionProps> = [
   { key: 'smile', icon: <EmojiIcon />, content: 3 },
 ];
 
-const ChatPlayground: React.FunctionComponent = () => {
+const ChatPlayground: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // ChatProps
   const [density] = useSelectKnob({ name: 'density', initialValue: 'comfy', values: ['compact', 'comfy'] });
 
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.tsx
index 42d59a4c2a358..91d740a86a589 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleContent.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const DialogExampleContent: React.FC = () => (
+const DialogExampleContent: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Confirm"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.tsx
index e42f8a515b577..b575a8562d2f3 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFooter.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog, Flex, Text } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const DialogExampleFooter: React.FC = () => (
+const DialogExampleFooter: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Create"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.tsx
index 0e66d5ba6979a..4481c37f2ff57 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleFullWidth.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog, Input } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const DialogExampleFullWidth: React.FC = () => (
+const DialogExampleFullWidth: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Confirm"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.tsx
index 2bc369bf8d35e..f9c1808a4f8ef 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleHeaderAction.shorthand.tsx
@@ -3,7 +3,7 @@ import { Button, Dialog } from '@fluentui/react-northstar';
 import { useBooleanKnob } from '@fluentui/docs-components';
 import { CloseIcon } from '@fluentui/react-icons-northstar';
 
-const DialogExampleHeaderAction: React.FC = () => {
+const DialogExampleHeaderAction: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [open, setOpen] = useBooleanKnob({ name: 'open' });
   return (
     <Dialog
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomContent.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomContent.shorthand.tsx
index ae0d519c283a1..1bab05ce2371b 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomContent.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomContent.shorthand.tsx
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { Button, Dialog } from '@fluentui/react-northstar';
 import { CloseIcon } from '@fluentui/react-icons-northstar';
 
-const DialogExampleZoomContent: React.FC = () => (
+const DialogExampleZoomContent: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Confirm"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand.tsx
index 68561fc379269..4a018315bc503 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Content/DialogExampleZoomCustomFooter.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Button, Dialog, Flex, FlexItem } from '@fluentui/react-northstar';
 import { CloseIcon } from '@fluentui/react-icons-northstar';
 
-const DialogExampleZoomContent: React.FC = () => (
+const DialogExampleZoomContent: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Confirm"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Rtl/DialogExample.rtl.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Rtl/DialogExample.rtl.tsx
index dd8ed99b64905..8e4d32ae1f9f5 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Rtl/DialogExample.rtl.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Rtl/DialogExample.rtl.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button, Dialog } from '@fluentui/react-northstar';
 
-const DialogExampleRtl: React.FC = () => (
+const DialogExampleRtl: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="إلغاء"
     confirmButton="تؤكد"
diff --git a/packages/fluentui/docs/src/examples/components/Dialog/Types/DialogExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dialog/Types/DialogExample.shorthand.tsx
index d4522601e0293..3637eaba3b19f 100644
--- a/packages/fluentui/docs/src/examples/components/Dialog/Types/DialogExample.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dialog/Types/DialogExample.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const DialogExample: React.FC = () => (
+const DialogExample: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     confirmButton="Confirm"
diff --git a/packages/fluentui/docs/src/examples/components/Dropdown/Usage/DropdownExampleRender.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Dropdown/Usage/DropdownExampleRender.shorthand.tsx
index 3e8ab90ca6cea..14932452ed7a5 100644
--- a/packages/fluentui/docs/src/examples/components/Dropdown/Usage/DropdownExampleRender.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Dropdown/Usage/DropdownExampleRender.shorthand.tsx
@@ -13,7 +13,7 @@ const inputItems = [
   'Robin Counts',
 ];
 
-const DropdownExampleRender: React.FC = () => (
+const DropdownExampleRender: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dropdown
     multiple
     search
diff --git a/packages/fluentui/docs/src/examples/components/Grid/BestPractices/GridBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Grid/BestPractices/GridBestPractices.tsx
index 01d9f64512968..284b1dbdda56a 100644
--- a/packages/fluentui/docs/src/examples/components/Grid/BestPractices/GridBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Grid/BestPractices/GridBestPractices.tsx
@@ -10,7 +10,7 @@ const doList = [
 
 const dontList = ["Don't use grid component as a replacement for table."];
 
-const GridBestPractices: React.FunctionComponent<{}> = () => {
+const GridBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} dontList={dontList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
index 965bb3e226f1c..36934158bfcaa 100644
--- a/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Label } from '@fluentui/react-northstar';
 import { CloseIcon } from '@fluentui/react-icons-northstar';
 
-const LabelExampleContentCustomizationShorthand: React.FunctionComponent = () => {
+const LabelExampleContentCustomizationShorthand: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hidden, setHidden] = React.useState<boolean>(false);
 
   const hide = () => {
diff --git a/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx b/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx
index f24483e213b6b..0f6a3d71ee86d 100644
--- a/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/List/Types/ListExampleSelectableControlled.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Box, List, Image } from '@fluentui/react-northstar';
 
-const SelectableListControlledExample: React.FunctionComponent = () => {
+const SelectableListControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedIndex, setSelectedIndex] = React.useState<number>(-1);
 
   const items = [
diff --git a/packages/fluentui/docs/src/examples/components/List/Usage/ListExampleMemo.tsx b/packages/fluentui/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
index 1b718c5640111..595bd87268704 100644
--- a/packages/fluentui/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
+++ b/packages/fluentui/docs/src/examples/components/List/Usage/ListExampleMemo.tsx
@@ -8,7 +8,7 @@ type MemoItemProps = {
   onRender: (index: number) => void;
 };
 
-const RenderLogger: React.FC<MemoItemProps & { 'data-id': number }> = props => {
+const RenderLogger: React.FC<React.PropsWithChildren<MemoItemProps & { 'data-id': number }>> = props => {
   const { 'data-id': id, onRender, ...rest } = props;
   onRender(id);
 
diff --git a/packages/fluentui/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
index 97e38bab9f7e9..d17ed538cc9fb 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/BestPractices/LoaderBestPractices.tsx
@@ -7,7 +7,7 @@ const doList = [
   'If loader is only the element in the screen or region, consider making it focusable by setting `tabIndex` prop to the `Loader`. In most of these cases value of `tabIndex` should be 0.',
 ];
 
-const LoaderBestPractices: React.FunctionComponent<{}> = () => {
+const LoaderBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExample.shorthand.tsx
index 8d189c70bbc45..bd2f132f4d395 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExample.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExample.shorthand.tsx
@@ -1,6 +1,6 @@
 import { Loader } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExample: React.FC = () => <Loader />;
+const LoaderExample: React.FC<React.PropsWithChildren<unknown>> = () => <Loader />;
 
 export default LoaderExample;
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx
index cba6cad2c1a94..7b8e3f7b32dc0 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Types/LoaderExampleLabel.shorthand.tsx
@@ -1,6 +1,6 @@
 import { Loader } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleLabel: React.FC = () => <Loader label="Loading..." />;
+const LoaderExampleLabel: React.FC<React.PropsWithChildren<unknown>> = () => <Loader label="Loading..." />;
 
 export default LoaderExampleLabel;
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx
index 1f214725a81a3..daefefd753a35 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleInline.tsx
@@ -1,6 +1,6 @@
 import { Loader } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleInline: React.FC = () => <Loader inline />;
+const LoaderExampleInline: React.FC<React.PropsWithChildren<unknown>> = () => <Loader inline />;
 
 export default LoaderExampleInline;
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleLabelPosition.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleLabelPosition.shorthand.tsx
index 166f6d332ea93..01309b46f04f9 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleLabelPosition.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleLabelPosition.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Grid, Loader } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleLabel: React.FC = () => (
+const LoaderExampleLabel: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Grid columns={2} variables={{ gridGap: '20px' }}>
     <Loader label="At start" labelPosition="start" />
     <Loader label="At end" labelPosition="end" />
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx
index 7ba07a07bc875..c87b8ea9f7989 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSecondary.tsx
@@ -1,7 +1,7 @@
 import { Loader, Flex, Provider } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleSecondary: React.FC = () => {
+const LoaderExampleSecondary: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <Provider.Consumer
       render={theme => {
diff --git a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx
index 071cb3d94fc96..00446c10973c2 100644
--- a/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx
+++ b/packages/fluentui/docs/src/examples/components/Loader/Variations/LoaderExampleSize.tsx
@@ -1,7 +1,7 @@
 import { Grid, Loader } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const LoaderExampleSize: React.FC = () => (
+const LoaderExampleSize: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Grid columns="4" variables={{ gridGap: '20px' }}>
     <Loader size="smallest" label="smallest" labelPosition="below" />
     <Loader size="smaller" label="smaller" labelPosition="below" />
diff --git a/packages/fluentui/docs/src/examples/components/Menu/BestPractices/MenuBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Menu/BestPractices/MenuBestPractices.tsx
index 4ffe04f0ac933..a5f60290e8c6b 100644
--- a/packages/fluentui/docs/src/examples/components/Menu/BestPractices/MenuBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Menu/BestPractices/MenuBestPractices.tsx
@@ -18,7 +18,7 @@ const doList = [
 
 const dontList = ['Do not render focusable or clickable elements inside of the menu item.'];
 
-const MenuBestPractices: React.FunctionComponent<{}> = () => {
+const MenuBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} dontList={dontList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Menu/Playground.tsx b/packages/fluentui/docs/src/examples/components/Menu/Playground.tsx
index b8f8b084aa70b..441b4a96c134d 100644
--- a/packages/fluentui/docs/src/examples/components/Menu/Playground.tsx
+++ b/packages/fluentui/docs/src/examples/components/Menu/Playground.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import useAccessibilityKnob from '../../../components/ComponentDoc/useAccessibilityKnob';
 
-const MenuPlayground: React.FunctionComponent = () => {
+const MenuPlayground: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const accessibility = useAccessibilityKnob('Menu');
   const [pointing] = useBooleanKnob({ name: 'pointing' });
   const [primary] = useBooleanKnob({ name: 'primary' });
diff --git a/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx
index 9ce431d043064..2ed071f1bec13 100644
--- a/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleTabList.shorthand.tsx
@@ -7,7 +7,7 @@ const items = [
   { key: 'events', content: 'Upcoming Events' },
 ];
 
-const MenuExampleTabShorthand: React.FC = props => (
+const MenuExampleTabShorthand: React.FC<React.PropsWithChildren<unknown>> = props => (
   <Menu
     defaultActiveIndex={0}
     items={items}
diff --git a/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx
index 87429466ec3d0..80e30f5857b2f 100644
--- a/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Menu/Usage/MenuExampleWithSubmenuControlled.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Menu, Header } from '@fluentui/react-northstar';
 
-const MenuWithSubmenuControlledExample: React.FunctionComponent = () => {
+const MenuWithSubmenuControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [menuOpen, setMenuOpen] = React.useState<boolean>(false);
 
   const handleMenuOpenChange = (e, { menuOpen }) => {
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
index a27c88a216f99..15a54c48ccc95 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react-northstar';
 import { QnaIcon } from '@fluentui/react-icons-northstar';
 
-const PopupCustomTargetExample: React.FC = () => {
+const PopupCustomTargetExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null);
 
   return (
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
index 755e1f0ddcd48..3a157aed46e42 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Popup, Button, Divider, Text, Grid, Ref } from '@fluentui/react-northstar';
 import { QnaIcon } from '@fluentui/react-icons-northstar';
 
-const PopupCustomTargetExample: React.FC = () => {
+const PopupCustomTargetExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [textRef, setTextRef] = React.useState<HTMLSpanElement | null>(null);
 
   return (
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
index 7ad891dbcc0df..a217c68ff5642 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleContextOnElement.tsx
@@ -9,6 +9,7 @@ const contentWithButtons = (
 );
 
 class PopupContextOnElement extends React.Component {
+  context: any;
   state = { alert: false };
 
   showAlert = () => {
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
index 51a1929c41d7b..440de3169d36b 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
@@ -3,6 +3,7 @@ import { Alert, Button, Flex, Popup } from '@fluentui/react-northstar';
 import { MoreIcon } from '@fluentui/react-icons-northstar';
 
 class PopupExampleOn extends React.Component {
+  context: any;
   state = { alert: false };
 
   showAlert = () => {
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
index b716b7aa4af64..07f4715046dc2 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
@@ -3,6 +3,7 @@ import { Alert, Button, Flex, Popup } from '@fluentui/react-northstar';
 import { MoreIcon } from '@fluentui/react-icons-northstar';
 
 class PopupExampleOnMultiple extends React.Component {
+  context: any;
   state = { alert: false };
 
   showAlert = () => {
diff --git a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
index 5830035516e81..c421069d84b5c 100644
--- a/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
@@ -10,6 +10,7 @@ const contentWithButtons = (
 );
 
 class PopupExampleOnWithFocusTrap extends React.Component {
+  context: any;
   state = { alert: false };
 
   showAlert = () => {
diff --git a/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx b/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx
index 0ca859233bc2e..5ca1a5fae3f0a 100644
--- a/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx
+++ b/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTarget.tsx
@@ -7,7 +7,7 @@ type PortalWindowProps = {
   onClose?: () => void;
 };
 
-const PortalWindow: React.FunctionComponent<PortalWindowProps> = ({ children, onClose }) => {
+const PortalWindow: React.FunctionComponent<React.PropsWithChildren<PortalWindowProps>> = ({ children, onClose }) => {
   const externalContainer = React.useRef<HTMLDivElement>(null);
   const externalWindow = React.useRef<Window>(null);
   const [mounted, setMounted] = React.useState<boolean>(false);
diff --git a/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTargetFrame.tsx b/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTargetFrame.tsx
index 46a00410c8437..7b6907738c802 100644
--- a/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTargetFrame.tsx
+++ b/packages/fluentui/docs/src/examples/components/Provider/Usage/ProviderExampleTargetFrame.tsx
@@ -6,7 +6,7 @@ type PortalFrameProps = {
   children: (externalDocument: Document) => React.ReactElement;
 };
 
-const PortalFrame: React.FunctionComponent<PortalFrameProps> = ({ children }) => {
+const PortalFrame: React.FunctionComponent<React.PropsWithChildren<PortalFrameProps>> = ({ children }) => {
   const frameRef = React.useRef<HTMLIFrameElement>(null);
   const [mounted, setMounted] = React.useState<boolean>(false);
 
diff --git a/packages/fluentui/docs/src/examples/components/Reaction/BestPractices/ReactionBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Reaction/BestPractices/ReactionBestPractices.tsx
index 06c8b11467ce4..4046ba4dc3cfa 100644
--- a/packages/fluentui/docs/src/examples/components/Reaction/BestPractices/ReactionBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Reaction/BestPractices/ReactionBestPractices.tsx
@@ -7,7 +7,7 @@ const doList = [
   'Add textual representation to the `icon` slot if it only contains an icon (using `title` or `aria-label` props on the slot).',
 ];
 
-const ReactionBestPractices: React.FunctionComponent<{}> = () => {
+const ReactionBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Slider/Usage/SliderExampleForm.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Slider/Usage/SliderExampleForm.shorthand.tsx
index da241ad91f9b3..eac0fd53812c7 100644
--- a/packages/fluentui/docs/src/examples/components/Slider/Usage/SliderExampleForm.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Slider/Usage/SliderExampleForm.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Slider, SliderProps, Flex, Form, Label, Input } from '@fluentui/react-northstar';
 
-const CustomSlider: React.FunctionComponent<SliderProps> = props => {
+const CustomSlider: React.FunctionComponent<React.PropsWithChildren<SliderProps>> = props => {
   const [value, setValue] = React.useState<string>('35');
   return (
     <Flex inline hAlign="center" vAlign="center" gap="gap.smaller">
diff --git a/packages/fluentui/docs/src/examples/components/SplitButton/BestPractices/SplitButtonBestPractices.tsx b/packages/fluentui/docs/src/examples/components/SplitButton/BestPractices/SplitButtonBestPractices.tsx
index 1014d34f043e6..303bc2352f4e1 100644
--- a/packages/fluentui/docs/src/examples/components/SplitButton/BestPractices/SplitButtonBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/SplitButton/BestPractices/SplitButtonBestPractices.tsx
@@ -9,7 +9,7 @@ const doList = [
 
 const dontList = [];
 
-const SplitButtonBestPractices: React.FunctionComponent<{}> = () => {
+const SplitButtonBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} dontList={dontList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Status/BestPractices/StatusBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Status/BestPractices/StatusBestPractices.tsx
index 17ef22156a12a..1f5cdf2e8efbc 100644
--- a/packages/fluentui/docs/src/examples/components/Status/BestPractices/StatusBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Status/BestPractices/StatusBestPractices.tsx
@@ -7,7 +7,7 @@ const doList = [
   'The `title` attribute has to be provided on status component. Then reader narrate content of `title` attribute.',
 ];
 
-const StatusBestPractices: React.FunctionComponent<{}> = () => {
+const StatusBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/SvgIcon/BestPractices/IconBestPractices.tsx b/packages/fluentui/docs/src/examples/components/SvgIcon/BestPractices/IconBestPractices.tsx
index a67ac022d8bd9..1587c76ea6354 100644
--- a/packages/fluentui/docs/src/examples/components/SvgIcon/BestPractices/IconBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/SvgIcon/BestPractices/IconBestPractices.tsx
@@ -6,7 +6,7 @@ const dontList = [
   "Don't use as a replacement for actionable component - use `Button` text variant with an icon instead.",
 ];
 
-const FormBestPractices: React.FunctionComponent<{}> = () => {
+const FormBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices dontList={dontList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/SvgIcon/Playground.tsx b/packages/fluentui/docs/src/examples/components/SvgIcon/Playground.tsx
index 452d67329c2e2..5a3c712c9562a 100644
--- a/packages/fluentui/docs/src/examples/components/SvgIcon/Playground.tsx
+++ b/packages/fluentui/docs/src/examples/components/SvgIcon/Playground.tsx
@@ -2,7 +2,7 @@ import { useBooleanKnob, useNumberKnob, useSelectKnob } from '@fluentui/docs-com
 import { CalendarIcon, SvgIconSizeValue } from '@fluentui/react-icons-northstar';
 import * as React from 'react';
 
-const SvgPlayground: React.FunctionComponent = () => {
+const SvgPlayground: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [bordered] = useBooleanKnob({ name: 'bordered' });
   const [circular] = useBooleanKnob({ name: 'circular' });
   const [outline] = useBooleanKnob({ name: 'outline' });
diff --git a/packages/fluentui/docs/src/examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand.tsx
index b617be5a6bac7..a70ddea5f9dba 100644
--- a/packages/fluentui/docs/src/examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/SvgIcon/Usage/SvgIconSetExample.shorthand.tsx
@@ -2,7 +2,7 @@ import { Grid, Divider, Header, SvgIconProps } from '@fluentui/react-northstar';
 import * as exports from '@fluentui/react-icons-northstar';
 import * as React from 'react';
 
-const icons = Object.keys(exports).reduce((acc: React.FC<SvgIconProps>[], exportName) => {
+const icons = Object.keys(exports).reduce((acc: React.FC<React.PropsWithChildren<SvgIconProps>>[], exportName) => {
   if (!!exports[exportName].displayName) {
     acc.push(exports[exportName]);
   }
diff --git a/packages/fluentui/docs/src/examples/components/Text/BestPractices/TextBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Text/BestPractices/TextBestPractices.tsx
index 6616d9f8baec6..6401f04671d7b 100644
--- a/packages/fluentui/docs/src/examples/components/Text/BestPractices/TextBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Text/BestPractices/TextBestPractices.tsx
@@ -8,7 +8,7 @@ const doList = [
   'For other `content` value types (i.e. that use elements inside), in order to properly jandle RTL mode, ensure that `dir="auto"` attribute is applied for all places in content where necessary.',
 ];
 
-const TextBestPractices: React.FunctionComponent<{}> = () => {
+const TextBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/TextArea/States/TextAreaValueExample.shorthand.tsx b/packages/fluentui/docs/src/examples/components/TextArea/States/TextAreaValueExample.shorthand.tsx
index cf38258e4033d..4271d9c552833 100644
--- a/packages/fluentui/docs/src/examples/components/TextArea/States/TextAreaValueExample.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/TextArea/States/TextAreaValueExample.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextArea } from '@fluentui/react-northstar';
 import { useStringKnob } from '@fluentui/docs-components';
 
-const TextAreaValueExample: React.FC = () => {
+const TextAreaValueExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [value] = useStringKnob({ name: 'value', initialValue: 'Hello World!' });
   return <TextArea value={value} />;
 };
diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx
index 55a96298ac232..60ee88c0406aa 100644
--- a/packages/fluentui/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Toolbar/BestPractices/ToolbarBestPractices.tsx
@@ -17,7 +17,7 @@ const doList = [
   'If `Toolbar` contains multiple radio groups in the menu, consider using role="group" and `aria-label` for radio group shorthands',
 ];
 
-const ToolbarBestPractices: React.FunctionComponent<{}> = () => {
+const ToolbarBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
index 63b1b7e61c28f..c421c0fabb603 100644
--- a/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
+++ b/packages/fluentui/docs/src/examples/components/Toolbar/Performance/CustomToolbar.perf.tsx
@@ -474,7 +474,7 @@ const layouts: Record<CustomToolbarProps['layout'], CustomToolbarLayout> = {
   ],
 };
 
-const CustomToolbar: React.FunctionComponent<CustomToolbarProps> = props => {
+const CustomToolbar: React.FunctionComponent<React.PropsWithChildren<CustomToolbarProps>> = props => {
   const { layout = 'standard' } = props;
 
   const items = layouts[layout](props).map((item: ToolbarItemProps) => ({
diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand.tsx
index 5827c4247dfb9..fb7d80ada0c74 100644
--- a/packages/fluentui/docs/src/examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Toolbar/Visual/ToolbarExampleOverflowPositioning.shorthand.tsx
@@ -31,11 +31,9 @@ import {
 type ToolbarItem = ShorthandValue<ToolbarItemProps & { kind?: keyof ToolbarItemShorthandKinds }>;
 type OverflowItem = ShorthandValue<ToolbarMenuItemProps & { kind?: keyof ToolbarMenuItemShorthandKinds }>;
 
-const FrameRenderer: React.FC<
-  React.IframeHTMLAttributes<HTMLIFrameElement> & {
-    children: (externalDocument: Document) => React.ReactElement;
-  }
-> = props => {
+const FrameRenderer: React.FC<React.PropsWithChildren<React.IframeHTMLAttributes<HTMLIFrameElement> & {
+  children: (externalDocument: Document) => React.ReactElement;
+}>> = props => {
   const { children, ...rest } = props;
   const [node, setNode] = React.useState<HTMLIFrameElement>();
 
@@ -57,7 +55,7 @@ const FrameRenderer: React.FC<
   );
 };
 
-const EditorToolbar: React.FC<Pick<ToolbarProps, 'overflowSentinel'>> = ({ overflowSentinel }) => {
+const EditorToolbar: React.FC<React.PropsWithChildren<Pick<ToolbarProps, 'overflowSentinel'>>> = ({ overflowSentinel }) => {
   const [overflowOpen, setOverflowOpen] = React.useState<boolean>(false);
   const overflowIndex = React.useRef<number>();
 
@@ -141,7 +139,7 @@ const EditorToolbar: React.FC<Pick<ToolbarProps, 'overflowSentinel'>> = ({ overf
   );
 };
 
-const ToolbarExampleOverflowPositioningShorthand: React.FC<{ dir: 'ltr' | 'rtl' }> = ({ dir }) => (
+const ToolbarExampleOverflowPositioningShorthand: React.FC<React.PropsWithChildren<{ dir: 'ltr' | 'rtl' }>> = ({ dir }) => (
   <FrameRenderer
     frameBorder="0"
     width="300px"
diff --git a/packages/fluentui/docs/src/examples/components/Tooltip/BestPractices/TooltipBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Tooltip/BestPractices/TooltipBestPractices.tsx
index 1c30a15460dad..6c4879d603484 100644
--- a/packages/fluentui/docs/src/examples/components/Tooltip/BestPractices/TooltipBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Tooltip/BestPractices/TooltipBestPractices.tsx
@@ -7,7 +7,7 @@ const doList = [
   'Use `tooltipAsDescriptionBehavior` if adding tooltip to a button or to another visual-only element with text, title or label.',
 ];
 
-const DropdownBestPractices: React.FunctionComponent<{}> = () => {
+const DropdownBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand.tsx
index dca2460f2260b..8ad11b75e0df5 100644
--- a/packages/fluentui/docs/src/examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Tooltip/Usage/TooltipExampleDialogContent.shorthand.tsx
@@ -1,7 +1,7 @@
 import { Button, Dialog, Tooltip } from '@fluentui/react-northstar';
 import * as React from 'react';
 
-const TooltipExampleDialogContentShorthand: React.FC = () => (
+const TooltipExampleDialogContentShorthand: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Cancel"
     content={<Tooltip trigger={<Button content="Click me!" />} content="Hello from tooltip!" />}
diff --git a/packages/fluentui/docs/src/examples/components/Tree/BestPractices/TreeBestPractices.tsx b/packages/fluentui/docs/src/examples/components/Tree/BestPractices/TreeBestPractices.tsx
index 831d72bf9d47c..728248b4c669a 100644
--- a/packages/fluentui/docs/src/examples/components/Tree/BestPractices/TreeBestPractices.tsx
+++ b/packages/fluentui/docs/src/examples/components/Tree/BestPractices/TreeBestPractices.tsx
@@ -4,7 +4,7 @@ import ComponentBestPractices from '../../../../components/ComponentBestPractice
 
 const doList = ['Provide label to the `Tree` component using `aria-label` or `aria-labelledby` prop.'];
 
-const TreeBestPractices: React.FunctionComponent<{}> = () => {
+const TreeBestPractices: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return <ComponentBestPractices doList={doList} />;
 };
 
diff --git a/packages/fluentui/docs/src/global.d.ts b/packages/fluentui/docs/src/global.d.ts
index acac4addef5b1..cc9f43608d113 100644
--- a/packages/fluentui/docs/src/global.d.ts
+++ b/packages/fluentui/docs/src/global.d.ts
@@ -16,7 +16,7 @@ declare module '*.mdx' {
   export const meta: {
     title: string;
   };
-  const value: React.ComponentType;
+  const value: React.ComponentType<React.PropsWithChildren<unknown>>;
 
   export default value;
 }
diff --git a/packages/fluentui/docs/src/routes.tsx b/packages/fluentui/docs/src/routes.tsx
index 7035c724834e3..fb47021c2f541 100644
--- a/packages/fluentui/docs/src/routes.tsx
+++ b/packages/fluentui/docs/src/routes.tsx
@@ -72,7 +72,7 @@ const _Builder = React.lazy(async () => ({
   default: (await import(/* webpackChunkName: "builder" */ '@fluentui/react-builder')).Builder,
 }));
 
-const Builder: React.FunctionComponent = () => (
+const Builder: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <LazyWithBabel>
     <_Builder />
   </LazyWithBabel>
diff --git a/packages/fluentui/docs/src/utils/componentInfoContext.ts b/packages/fluentui/docs/src/utils/componentInfoContext.ts
index 003ddc61e3d5d..d6f808776b2da 100644
--- a/packages/fluentui/docs/src/utils/componentInfoContext.ts
+++ b/packages/fluentui/docs/src/utils/componentInfoContext.ts
@@ -22,7 +22,7 @@ const infoObjects = importAll([
 
 const componentInfoContext: {
   byDisplayName: { [componentName: string]: ComponentInfo };
-  fromComponent: (Component: React.ComponentType) => ComponentInfo;
+  fromComponent: (Component: React.ComponentType<React.PropsWithChildren<unknown>>) => ComponentInfo;
   parents: ComponentInfo[];
 } = {} as any;
 
diff --git a/packages/fluentui/docs/src/views/IconViewer.tsx b/packages/fluentui/docs/src/views/IconViewer.tsx
index c5fb37766f6e0..90088a562e653 100644
--- a/packages/fluentui/docs/src/views/IconViewer.tsx
+++ b/packages/fluentui/docs/src/views/IconViewer.tsx
@@ -32,7 +32,7 @@ const cardsStyles = {
   overflow: 'unset',
 };
 
-const icons = Object.keys(exports).reduce((acc: React.FC<SvgIconProps>[], exportName) => {
+const icons = Object.keys(exports).reduce((acc: React.FC<React.PropsWithChildren<SvgIconProps>>[], exportName) => {
   if (!!exports[exportName].displayName) {
     acc.push(exports[exportName]);
   }
diff --git a/packages/fluentui/e2e/server/E2EExample.tsx b/packages/fluentui/e2e/server/E2EExample.tsx
index 5aa4cc139d5ba..fef8fd76455ce 100644
--- a/packages/fluentui/e2e/server/E2EExample.tsx
+++ b/packages/fluentui/e2e/server/E2EExample.tsx
@@ -4,6 +4,6 @@ import { RouteComponentProps } from 'react-router-dom';
 
 type E2EProps = RouteComponentProps<{ exampleName: string }>;
 
-const E2EExample: React.FC<E2EProps> = ({ match }) => React.createElement(browserTestRoutes[match.params.exampleName]);
+const E2EExample: React.FC<React.PropsWithChildren<E2EProps>> = ({ match }) => React.createElement(browserTestRoutes[match.params.exampleName]);
 
 export default E2EExample;
diff --git a/packages/fluentui/perf/src/index.tsx b/packages/fluentui/perf/src/index.tsx
index 6cba7b0ba3170..2950fb008692d 100644
--- a/packages/fluentui/perf/src/index.tsx
+++ b/packages/fluentui/perf/src/index.tsx
@@ -25,7 +25,7 @@ const asyncRender = (element: React.ReactElement, container: Element) =>
 
 const renderCycle = async (
   exampleName: string,
-  Component: React.ComponentType,
+  Component: React.ComponentType<React.PropsWithChildren<unknown>>,
   exampleIndex: number,
 ): Promise<ProfilerMeasure> => {
   let profilerMeasure: ProfilerMeasure;
@@ -95,7 +95,7 @@ window.runMeasures = async (filter: string = '') => {
 //
 // Control tools
 //
-const Control: React.FunctionComponent = () => {
+const Control: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [filter, setFilter] = React.useState('');
 
   return (
@@ -107,11 +107,9 @@ const Control: React.FunctionComponent = () => {
         Filter (use <code>minimatch</code>):
       </label>
       <input onChange={e => setFilter(e.target.value)} type="text" value={filter} />
-
       <pre>
         {_.filter(performanceExamplesContext.keys(), exampleName => satisfiesFilter(exampleName, filter)).join('\n')}
       </pre>
-
       <button
         onClick={async () => {
           console.table(await window.runMeasures(filter));
diff --git a/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.tsx b/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.tsx
index 9d36024a9e736..15cd907972b05 100644
--- a/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.tsx
+++ b/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.tsx
@@ -25,7 +25,7 @@ export class AutoFocusZone extends React.Component<AutoFocusZoneProps> {
     this.findElementAndFocusAsync();
   }
 
-  render(): JSX.Element {
+  render(): React.JSX.Element {
     const unhandledProps = getUnhandledProps(AutoFocusZone.handledProps, this.props);
     const ElementType = getElementType(this.props);
 
diff --git a/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.types.tsx b/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.types.tsx
index 2d8ef24bf035d..37f1a15b3bfc8 100644
--- a/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.types.tsx
+++ b/packages/fluentui/react-bindings/src/FocusZone/AutoFocusZone.types.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export interface AutoFocusZoneProps extends React.HTMLAttributes<HTMLDivElement> {
   /** @docSiteIgnore */
-  as?: React.ReactType;
+  as?: React.ElementType;
 
   /**
    * Indicates the selector for first focusable item. By default, the first tabbable element will get focus.
diff --git a/packages/fluentui/react-bindings/src/FocusZone/FocusTrapZone.types.tsx b/packages/fluentui/react-bindings/src/FocusZone/FocusTrapZone.types.tsx
index bbde64781f5e0..61544a10beac5 100644
--- a/packages/fluentui/react-bindings/src/FocusZone/FocusTrapZone.types.tsx
+++ b/packages/fluentui/react-bindings/src/FocusZone/FocusTrapZone.types.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export interface FocusTrapZoneProps extends React.HTMLAttributes<HTMLDivElement> {
   /** @docSiteIgnore */
-  as?: React.ReactType;
+  as?: React.ElementType;
 
   /**
    * Additional CSS class name(s) to apply.
diff --git a/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts b/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts
index 813d72128154b..7ec5ac5aef59d 100644
--- a/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts
+++ b/packages/fluentui/react-bindings/src/FocusZone/FocusZone.types.ts
@@ -35,7 +35,7 @@ export interface IFocusZone {
  */
 export interface FocusZoneProps extends FocusZoneProperties, React.HTMLAttributes<HTMLElement> {
   /** @docSiteIgnore */
-  as?: React.ReactType;
+  as?: React.ElementType;
   /**
    * Additional class name to provide on the root element, in addition to the ms-FocusZone class.
    */
diff --git a/packages/fluentui/react-bindings/src/compose/mergeComposeOptions.ts b/packages/fluentui/react-bindings/src/compose/mergeComposeOptions.ts
index 0beb765b44a3c..5434d843d894c 100644
--- a/packages/fluentui/react-bindings/src/compose/mergeComposeOptions.ts
+++ b/packages/fluentui/react-bindings/src/compose/mergeComposeOptions.ts
@@ -1,4 +1,4 @@
-import { defaultComposeOptions, ComposeOptions, ComposePreparedOptions, Input } from './consts';
+import { defaultComposeOptions, ComposeOptions, ComposePreparedOptions, ComposeRenderFunction, Input } from './consts';
 import { computeDisplayNames } from './computeDisplayNames';
 
 export function mergeComposeOptions(
@@ -49,7 +49,7 @@ export function mergeComposeOptions(
       ? [...parentOptions.mapPropsToStylesPropsChain, inputOptions.mapPropsToStylesProps]
       : parentOptions.mapPropsToStylesPropsChain,
 
-    render: typeof input === 'function' ? input : parentOptions.render,
+    render: typeof input === 'function' ? (input as ComposeRenderFunction<'div', {}, {}>) : parentOptions.render,
 
     handledProps: [...parentOptions.handledProps, ...((inputOptions.handledProps as never[]) || ([] as never[]))],
 
diff --git a/packages/fluentui/react-bindings/src/context-selector/createContext.ts b/packages/fluentui/react-bindings/src/context-selector/createContext.ts
index 5c5c66d53efcc..611560f0d816f 100644
--- a/packages/fluentui/react-bindings/src/context-selector/createContext.ts
+++ b/packages/fluentui/react-bindings/src/context-selector/createContext.ts
@@ -4,7 +4,7 @@ import { Context, ContextValue } from './types';
 import { runWithNormalPriority, useIsomorphicLayoutEffect } from './utils';
 
 const createProvider = <Value>(Original: React.Provider<ContextValue<Value>>) => {
-  const Provider: React.FC<React.ProviderProps<Value>> = props => {
+  const Provider: React.FC<React.PropsWithChildren<React.ProviderProps<Value>>> = props => {
     // Holds an actual "props.value"
     const valueRef = React.useRef(props.value);
     // Used to sync context updates and avoid stale values, can be considered as render/effect counter of Provider.
diff --git a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
index 44ff51b51978f..d5414a023eb84 100644
--- a/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
+++ b/packages/fluentui/react-bindings/test/compose/useCompose-test.tsx
@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { mount, shallow } from 'enzyme';
 import * as React from 'react';
 
-const TestProvider: React.FC<{ theme: ThemeInput }> = props => {
+const TestProvider = (props: React.PropsWithChildren<ThemeInput>) => {
   const value: ProviderContextPrepared = {
     disableAnimations: false,
     renderer: {
@@ -46,7 +46,7 @@ const TestProvider: React.FC<{ theme: ThemeInput }> = props => {
 type BaseComponentProps = { color?: string } & React.HTMLAttributes<HTMLButtonElement>;
 type BaseComponentStylesProps = { color: string | undefined; open: boolean };
 
-const BaseComponent: React.FC<BaseComponentProps> = compose<
+const BaseComponent: React.FC<React.PropsWithChildren<BaseComponentProps>> = compose<
   'button',
   BaseComponentProps,
   BaseComponentStylesProps,
@@ -116,7 +116,7 @@ type BaseComponentWithSlotsProps = {
 } & React.HTMLAttributes<HTMLButtonElement>;
 type BaseComponentWithSlotsStylesProps = {};
 
-const BaseComponentWithSlots: React.FC<BaseComponentProps> = compose<
+const BaseComponentWithSlots: React.FC<React.PropsWithChildren<BaseComponentProps>> = compose<
   'button',
   BaseComponentWithSlotsProps,
   BaseComponentWithSlotsStylesProps,
diff --git a/packages/fluentui/react-bindings/test/context-selector/useContextSelector-test.tsx b/packages/fluentui/react-bindings/test/context-selector/useContextSelector-test.tsx
index 706c979e43900..385f2e50220af 100644
--- a/packages/fluentui/react-bindings/test/context-selector/useContextSelector-test.tsx
+++ b/packages/fluentui/react-bindings/test/context-selector/useContextSelector-test.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 
 const TestContext = createContext<{ index: number }>({ index: -1 });
 
-const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
+const TestComponent: React.FC<React.PropsWithChildren<{ index: number; onUpdate?: () => void }>> = props => {
   const active = useContextSelector(TestContext, v => v.index === props.index);
 
   React.useEffect(() => {
@@ -15,7 +15,7 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
   return <div className="test-component" data-active={active} />;
 };
 
-const TestProvider: React.FC = props => {
+const TestProvider: React.FC<React.PropsWithChildren<unknown>> = props => {
   const [index, setIndex] = React.useState<number>(0);
 
   return (
diff --git a/packages/fluentui/react-bindings/test/context-selector/useContextSelectors-test.tsx b/packages/fluentui/react-bindings/test/context-selector/useContextSelectors-test.tsx
index 2f1f93dd969b7..95d047d154361 100644
--- a/packages/fluentui/react-bindings/test/context-selector/useContextSelectors-test.tsx
+++ b/packages/fluentui/react-bindings/test/context-selector/useContextSelectors-test.tsx
@@ -8,7 +8,7 @@ const TestContext = createContext<{ index: number; value: string }>({
   value: '',
 });
 
-const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props => {
+const TestComponent: React.FC<React.PropsWithChildren<{ index: number; onUpdate?: () => void }>> = props => {
   const context = useContextSelectors(TestContext, {
     active: v => v.index === props.index,
     value: v => v.value,
@@ -21,7 +21,7 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
   return <div className="test-component" data-active={context.active} data-value={context.value} />;
 };
 
-const TestProvider: React.FC<{ value: any; children: any }> = props => {
+const TestProvider: React.FC<React.PropsWithChildren<{ value: any; children: any }>> = props => {
   const [index, setIndex] = React.useState<number>(+props.value.index);
   const [value, setValue] = React.useState<string>(props.value.value);
 
diff --git a/packages/fluentui/react-bindings/test/hooks/useAccessibility-test.tsx b/packages/fluentui/react-bindings/test/hooks/useAccessibility-test.tsx
index fdcfc7e8d651e..c986d723d98e8 100644
--- a/packages/fluentui/react-bindings/test/hooks/useAccessibility-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useAccessibility-test.tsx
@@ -115,7 +115,7 @@ type ChildComponentProps = {
   onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 
-const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+const TestComponent: React.FunctionComponent<React.PropsWithChildren<TestComponentProps>> = props => {
   const { accessibility = testBehavior, disabled, onClick, onKeyDown, ...rest } = props;
   const getA11Props = useAccessibility(accessibility, {
     mapPropsToBehavior: () => ({
@@ -140,7 +140,7 @@ const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
   );
 };
 
-const ChildComponent: React.FunctionComponent<ChildComponentProps> = props => {
+const ChildComponent: React.FunctionComponent<React.PropsWithChildren<ChildComponentProps>> = props => {
   const { accessibility = childBehavior, pressed, onKeyDown, ...rest } = props;
   const getA11Props = useAccessibility(accessibility, {
     mapPropsToBehavior: () => ({
@@ -156,14 +156,14 @@ type FocusZoneComponentProps = {
   rtl?: boolean;
 };
 
-const FocusZoneComponent: React.FunctionComponent<FocusZoneComponentProps> = props => {
+const FocusZoneComponent: React.FunctionComponent<React.PropsWithChildren<FocusZoneComponentProps>> = props => {
   const { as: ElementType = 'div', children, rtl = false } = props;
   const getA11Props = useAccessibility(focusZoneBehavior, { rtl });
 
   return getA11Props.unstable_wrapWithFocusZone(<ElementType {...getA11Props('root', {})}>{children}</ElementType>);
 };
 
-const UnstableBehaviorDefinitionComponent: React.FunctionComponent<TestComponentProps> = props => {
+const UnstableBehaviorDefinitionComponent: React.FunctionComponent<React.PropsWithChildren<TestComponentProps>> = props => {
   const { accessibility = testBehavior } = props;
   const getA11Props = useAccessibility(accessibility, {
     mapPropsToBehavior: () => ({
diff --git a/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx b/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx
index 923f1a3a6fd8d..479fa532ebce3 100644
--- a/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useAutoControlled-test.tsx
@@ -12,7 +12,7 @@ type TestComponentProps = {
   onChange?: (value: string) => void;
 };
 
-const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+const TestComponent: React.FunctionComponent<React.PropsWithChildren<TestComponentProps>> = props => {
   const [value, setValue] = useAutoControlled({
     defaultValue: props.defaultValue,
     value: props.value,
diff --git a/packages/fluentui/react-bindings/test/hooks/useDispatchEffect-test.tsx b/packages/fluentui/react-bindings/test/hooks/useDispatchEffect-test.tsx
index 8f191d820f058..35a827648d3c3 100644
--- a/packages/fluentui/react-bindings/test/hooks/useDispatchEffect-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useDispatchEffect-test.tsx
@@ -26,7 +26,7 @@ type TestComponentProps = Partial<TestState> & {
   value?: string;
 };
 
-const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+const TestComponent: React.FunctionComponent<React.PropsWithChildren<TestComponentProps>> = props => {
   const [dispatch, dispatchEffect] = unstable_useDispatchEffect<TestState>((e, prevState, nextState) => {
     if (prevState.value !== nextState.value) {
       props.onChange(e as React.ChangeEvent | React.MouseEvent, {
diff --git a/packages/fluentui/react-bindings/test/hooks/useStateManager-test.tsx b/packages/fluentui/react-bindings/test/hooks/useStateManager-test.tsx
index fb14001da2576..67b6399c3e4e9 100644
--- a/packages/fluentui/react-bindings/test/hooks/useStateManager-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useStateManager-test.tsx
@@ -32,7 +32,7 @@ type TestComponentProps = Partial<TestState> & {
   value?: string;
 };
 
-const TestComponent: React.FunctionComponent<TestComponentProps> = props => {
+const TestComponent: React.FunctionComponent<React.PropsWithChildren<TestComponentProps>> = props => {
   const { state, actions } = useStateManager(createTestManager, {
     mapPropsToInitialState: () => ({
       open: props.defaultOpen,
@@ -68,7 +68,7 @@ type ActionsComponentProps = {
   onUpdate: () => void;
 };
 
-const ActionsComponent: React.FunctionComponent<ActionsComponentProps> = props => {
+const ActionsComponent: React.FunctionComponent<React.PropsWithChildren<ActionsComponentProps>> = props => {
   const { onRender, onUpdate } = props;
 
   const { actions, state } = useStateManager(createTestManager);
diff --git a/packages/fluentui/react-bindings/test/hooks/useStyles-test.tsx b/packages/fluentui/react-bindings/test/hooks/useStyles-test.tsx
index f5f8950728d21..340817656566f 100644
--- a/packages/fluentui/react-bindings/test/hooks/useStyles-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useStyles-test.tsx
@@ -63,6 +63,7 @@ describe('useStyles', () => {
     it('does not resolve styles', () => {
       const styles = jest.fn();
       mount(<TestComponent unstyled={true} color="green" />, {
+        // @ts-expect-error React 18
         wrappingComponent: Unstable_FluentContextProvider,
         wrappingComponentProps: { value: { performance: {}, theme: createTheme(styles) } },
       });
@@ -75,6 +76,7 @@ describe('useStyles', () => {
     it('passes props mapped via "mapPropsToStyles" to styles functions', () => {
       const styles = jest.fn();
       mount(<TestComponent color="green" />, {
+        // @ts-expect-error React 18
         wrappingComponent: Unstable_FluentContextProvider,
         wrappingComponentProps: { value: { performance: {}, theme: createTheme(styles) } },
       });
diff --git a/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx b/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx
index cd20517beb552..e2b250f526c0c 100644
--- a/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx
+++ b/packages/fluentui/react-bindings/test/hooks/useTriggerElement-test.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import * as consoleUtil from '../consoleUtil';
 
-const TestComponent: React.FC<{ trigger?: React.ReactElement }> = props => {
+const TestComponent: React.FC<React.PropsWithChildren<{ trigger?: React.ReactElement }>> = props => {
   return useTriggerElement(props);
 };
 
diff --git a/packages/fluentui/react-builder/package.json b/packages/fluentui/react-builder/package.json
index 05989ae4e4233..a61abf6b040ec 100644
--- a/packages/fluentui/react-builder/package.json
+++ b/packages/fluentui/react-builder/package.json
@@ -18,7 +18,7 @@
     "lz-string": "^1.4.4",
     "react-document-title": "^2.0.3",
     "react-frame-component": "^4.1.1",
-    "react-is": "^17.0.2",
+    "react-is": "^18.3.1",
     "use-immer": "^0.6.0"
   },
   "devDependencies": {
@@ -26,7 +26,7 @@
     "@fluentui/scripts-babel": "*",
     "@fluentui/scripts-gulp": "*",
     "@fluentui/scripts-jest": "*",
-    "@types/react-frame-component": "^4.1.1"
+    "@types/react-frame-component": "^4.1.6"
   },
   "peerDependencies": {
     "@babel/standalone": "^7.8.3",
diff --git a/packages/fluentui/react-builder/src/componentInfo/componentInfoContext.ts b/packages/fluentui/react-builder/src/componentInfo/componentInfoContext.ts
index 96c78ae48ff2f..92d3c7f70f137 100644
--- a/packages/fluentui/react-builder/src/componentInfo/componentInfoContext.ts
+++ b/packages/fluentui/react-builder/src/componentInfo/componentInfoContext.ts
@@ -25,7 +25,7 @@ const infoObjects = importAll([
 
 export const componentInfoContext: {
   byDisplayName: { [componentName: string]: ComponentInfo };
-  fromComponent: (Component: React.ComponentType) => ComponentInfo;
+  fromComponent: (Component: React.ComponentType<React.PropsWithChildren<unknown>>) => ComponentInfo;
   parents: ComponentInfo[];
 } = {} as any;
 
diff --git a/packages/fluentui/react-builder/src/components/Anatomy.tsx b/packages/fluentui/react-builder/src/components/Anatomy.tsx
index 48413869f4693..18da64fa81273 100644
--- a/packages/fluentui/react-builder/src/components/Anatomy.tsx
+++ b/packages/fluentui/react-builder/src/components/Anatomy.tsx
@@ -6,8 +6,8 @@ type ComponentAnatomySlotProps = {
   name: string;
 };
 
-export const ComponentAnatomy: React.FunctionComponent<{ componentInfo: ComponentInfo }> & {
-  Slot: React.FunctionComponent<ComponentAnatomySlotProps>;
+export const ComponentAnatomy: React.FunctionComponent<React.PropsWithChildren<{ componentInfo: ComponentInfo }>> & {
+  Slot: React.FunctionComponent<React.PropsWithChildren<ComponentAnatomySlotProps>>;
 } = ({ componentInfo }) => {
   const shorthandProps = componentInfo.props.filter(propDef =>
     propDef.types.some(type => {
@@ -31,7 +31,7 @@ export const ComponentAnatomy: React.FunctionComponent<{ componentInfo: Componen
   );
 };
 
-const ComponentAnatomySlot: React.FunctionComponent<ComponentAnatomySlotProps> = ({ name }) => (
+const ComponentAnatomySlot: React.FunctionComponent<React.PropsWithChildren<ComponentAnatomySlotProps>> = ({ name }) => (
   <div
     style={{
       display: 'flex',
diff --git a/packages/fluentui/react-builder/src/components/BrowserWindow.tsx b/packages/fluentui/react-builder/src/components/BrowserWindow.tsx
index 8dcf12b34fbde..91b7654ea217e 100644
--- a/packages/fluentui/react-builder/src/components/BrowserWindow.tsx
+++ b/packages/fluentui/react-builder/src/components/BrowserWindow.tsx
@@ -95,7 +95,7 @@ export type BrowserWindowProps = {
   headerItems?: React.ReactNode | React.ReactNode[];
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export const BrowserWindow: React.FunctionComponent<BrowserWindowProps> = ({
+export const BrowserWindow: React.FunctionComponent<React.PropsWithChildren<BrowserWindowProps>> = ({
   children,
   style,
   showNavBar,
diff --git a/packages/fluentui/react-builder/src/components/Builder.tsx b/packages/fluentui/react-builder/src/components/Builder.tsx
index 0e134256beaa2..7a5e71a252d79 100644
--- a/packages/fluentui/react-builder/src/components/Builder.tsx
+++ b/packages/fluentui/react-builder/src/components/Builder.tsx
@@ -47,7 +47,7 @@ export type BuilderProps = {
   state: DesignerState;
 };
 
-export const Builder: React.FunctionComponent<BuilderProps> = (props: BuilderProps) => {
+export const Builder: React.FunctionComponent<React.PropsWithChildren<BuilderProps>> = (props: BuilderProps) => {
   return (
     <div style={{ display: 'flex', flex: 1, minWidth: '10rem', overflow: 'hidden' }}>
       <NavigationPanel
diff --git a/packages/fluentui/react-builder/src/components/Canvas.tsx b/packages/fluentui/react-builder/src/components/Canvas.tsx
index dfab9205dbda9..b245894b708aa 100644
--- a/packages/fluentui/react-builder/src/components/Canvas.tsx
+++ b/packages/fluentui/react-builder/src/components/Canvas.tsx
@@ -38,7 +38,7 @@ export type CanvasProps = {
   selectedComponentAccessibilityErrors?: AccessibilityError[];
 };
 
-export const Canvas: React.FunctionComponent<CanvasProps> = ({
+export const Canvas: React.FunctionComponent<React.PropsWithChildren<CanvasProps>> = ({
   draggingElement,
   isExpanding,
   isSelecting,
diff --git a/packages/fluentui/react-builder/src/components/CanvasWindow.tsx b/packages/fluentui/react-builder/src/components/CanvasWindow.tsx
index a8ce34bb92e1d..c7b10a6f2929d 100644
--- a/packages/fluentui/react-builder/src/components/CanvasWindow.tsx
+++ b/packages/fluentui/react-builder/src/components/CanvasWindow.tsx
@@ -35,7 +35,7 @@ export type CanvasWindowProps = {
   onSwitchToStore: () => void;
 };
 
-export const CanvasWindow: React.FunctionComponent<CanvasWindowProps> = (props: CanvasWindowProps) => {
+export const CanvasWindow: React.FunctionComponent<React.PropsWithChildren<CanvasWindowProps>> = (props: CanvasWindowProps) => {
   const HEADER_HEIGHT = '3rem';
   const [headerMessage, setHeaderMessage] = React.useState('');
   const codeSandboxData = getCodeSandboxInfo(
diff --git a/packages/fluentui/react-builder/src/components/CodeEditor.tsx b/packages/fluentui/react-builder/src/components/CodeEditor.tsx
index cb6a3af8982a0..43dace0c06b28 100644
--- a/packages/fluentui/react-builder/src/components/CodeEditor.tsx
+++ b/packages/fluentui/react-builder/src/components/CodeEditor.tsx
@@ -10,7 +10,7 @@ export type CodeEditorProps = {
   onCodeError: (code: string, error: string) => void;
 };
 
-export const CodeEditor: React.FunctionComponent<CodeEditorProps> = ({ code, onCodeChange, onCodeError }) => {
+export const CodeEditor: React.FunctionComponent<React.PropsWithChildren<CodeEditorProps>> = ({ code, onCodeChange, onCodeError }) => {
   const handleCodeChange = React.useCallback(
     code => {
       try {
diff --git a/packages/fluentui/react-builder/src/components/ComponentList.tsx b/packages/fluentui/react-builder/src/components/ComponentList.tsx
index 0d0715105013c..b704ab1d10811 100644
--- a/packages/fluentui/react-builder/src/components/ComponentList.tsx
+++ b/packages/fluentui/react-builder/src/components/ComponentList.tsx
@@ -11,7 +11,7 @@ export type ListProps = {
   style?: React.CSSProperties;
 };
 
-export const ComponentList: React.FunctionComponent<ListProps> = ({ onDragStart, style }) => {
+export const ComponentList: React.FunctionComponent<React.PropsWithChildren<ListProps>> = ({ onDragStart, style }) => {
   const [filter, setFilter] = React.useState<string>('');
 
   const filterRegexp = React.useMemo(() => new RegExp(filter, 'i'), [filter]);
diff --git a/packages/fluentui/react-builder/src/components/ComponentPropertiesPanel.tsx b/packages/fluentui/react-builder/src/components/ComponentPropertiesPanel.tsx
index 3a7a77f0e7dce..ee87b072406e5 100644
--- a/packages/fluentui/react-builder/src/components/ComponentPropertiesPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/ComponentPropertiesPanel.tsx
@@ -20,7 +20,7 @@ export type ComponentPropertiesPanelProps = {
   selectedJSONTreeElement: JSONTreeElement;
 };
 
-export const ComponentPropertiesPanel: React.FunctionComponent<ComponentPropertiesPanelProps> = (
+export const ComponentPropertiesPanel: React.FunctionComponent<React.PropsWithChildren<ComponentPropertiesPanelProps>> = (
   props: ComponentPropertiesPanelProps,
 ) => {
   return (
diff --git a/packages/fluentui/react-builder/src/components/ComponentTree.tsx b/packages/fluentui/react-builder/src/components/ComponentTree.tsx
index 6ea2d9991cbf2..f7baafb7aa8b3 100644
--- a/packages/fluentui/react-builder/src/components/ComponentTree.tsx
+++ b/packages/fluentui/react-builder/src/components/ComponentTree.tsx
@@ -39,6 +39,7 @@ const menu = (uuid, handleAddComponent, handleDeleteComponent) => [
   { key: 'remove', content: 'Remove', onClick: () => handleDeleteComponent(uuid) },
 ];
 
+// @ts-expect-error React 18
 const jsonTreeToTreeItems: (
   tree: JSONTreeElement | string,
   selectedComponentId: string,
@@ -120,7 +121,7 @@ const jsonTreeToTreeItems: (
   };
 };
 
-export const ComponentTree: React.FunctionComponent<ComponentTreeProps> = ({
+export const ComponentTree: React.FunctionComponent<React.PropsWithChildren<ComponentTreeProps>> = ({
   tree,
   selectedComponent,
   onSelectComponent,
diff --git a/packages/fluentui/react-builder/src/components/DebugButtons.tsx b/packages/fluentui/react-builder/src/components/DebugButtons.tsx
index 3cf739f7207a7..a6c34dd5933f9 100644
--- a/packages/fluentui/react-builder/src/components/DebugButtons.tsx
+++ b/packages/fluentui/react-builder/src/components/DebugButtons.tsx
@@ -95,7 +95,7 @@ export const AccessibilityErrorIcon = props => (
   </svg>
 );
 
-export const DebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => {
+export const DebugButton: React.FunctionComponent<React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>> = props => {
   return (
     <button
       tabIndex={-1}
@@ -114,25 +114,25 @@ export const DebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButto
   );
 };
 
-export const TrashDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
+export const TrashDebugButton: React.FunctionComponent<React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>> = props => (
   <DebugButton title="Delete" {...props}>
     <TrashAltRegularIcon style={{ widht: '1em', height: '1em' }} />
   </DebugButton>
 );
 
-export const LevelUpDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
+export const LevelUpDebugButton: React.FunctionComponent<React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>> = props => (
   <DebugButton title="Go to parent" {...props}>
     <LevelUpAltIcon style={{ widht: '1em', height: '1em' }} />
   </DebugButton>
 );
 
-export const CloneDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
+export const CloneDebugButton: React.FunctionComponent<React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>> = props => (
   <DebugButton title="Clone" {...props}>
     <CloneIcon style={{ widht: '1em', height: '1em' }} />
   </DebugButton>
 );
 
-export const MoveDebugButton: React.FunctionComponent<React.HTMLAttributes<HTMLButtonElement>> = props => (
+export const MoveDebugButton: React.FunctionComponent<React.PropsWithChildren<React.HTMLAttributes<HTMLButtonElement>>> = props => (
   <DebugButton title="Move" {...props}>
     <ArrowsAltSolidIcon style={{ widht: '1em', height: '1em' }} />
   </DebugButton>
diff --git a/packages/fluentui/react-builder/src/components/DebugFrame.tsx b/packages/fluentui/react-builder/src/components/DebugFrame.tsx
index 00dc744c9a149..d7e5011cd5c27 100644
--- a/packages/fluentui/react-builder/src/components/DebugFrame.tsx
+++ b/packages/fluentui/react-builder/src/components/DebugFrame.tsx
@@ -13,7 +13,7 @@ export type DebugFrameProps = {
 };
 
 // FIXME: temporary hacky implementation! reuse DebugRect
-export const DebugFrame: React.FunctionComponent<DebugFrameProps> = ({
+export const DebugFrame: React.FunctionComponent<React.PropsWithChildren<DebugFrameProps>> = ({
   target,
   selector,
   componentName,
diff --git a/packages/fluentui/react-builder/src/components/Description.tsx b/packages/fluentui/react-builder/src/components/Description.tsx
index eb57b6752d207..9c437f29c1410 100644
--- a/packages/fluentui/react-builder/src/components/Description.tsx
+++ b/packages/fluentui/react-builder/src/components/Description.tsx
@@ -8,7 +8,7 @@ export type DescriptionProps = {
   componentInfo: ComponentInfo;
 };
 
-export const Description: React.FunctionComponent<DescriptionProps> = ({ selectedJSONTreeElement, componentInfo }) => {
+export const Description: React.FunctionComponent<React.PropsWithChildren<DescriptionProps>> = ({ selectedJSONTreeElement, componentInfo }) => {
   if (!componentInfo) {
     return null;
   }
diff --git a/packages/fluentui/react-builder/src/components/Designer.tsx b/packages/fluentui/react-builder/src/components/Designer.tsx
index dcdd71023b8ec..6e1ee7de78f3a 100644
--- a/packages/fluentui/react-builder/src/components/Designer.tsx
+++ b/packages/fluentui/react-builder/src/components/Designer.tsx
@@ -15,7 +15,7 @@ import { runAxe } from '../hooks/runAxe';
 
 const HEADER_HEIGHT = '3rem';
 
-export const Designer: React.FunctionComponent = () => {
+export const Designer: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   debug('render');
 
   const dragAndDropData = React.useRef<{
diff --git a/packages/fluentui/react-builder/src/components/DropSelector.tsx b/packages/fluentui/react-builder/src/components/DropSelector.tsx
index b41110c328b72..a252387249748 100644
--- a/packages/fluentui/react-builder/src/components/DropSelector.tsx
+++ b/packages/fluentui/react-builder/src/components/DropSelector.tsx
@@ -62,7 +62,7 @@ const findBestIndex: (parent: HTMLElement, children: JSONTreeElement[], mouse: {
   return index >= 0 ? index : children.length;
 };
 
-export const DropSelector: React.FunctionComponent<DropSelectorProps> = ({
+export const DropSelector: React.FunctionComponent<React.PropsWithChildren<DropSelectorProps>> = ({
   jsonTree,
   onDropPositionChange,
   mountDocument = isBrowser() ? window.document : null,
diff --git a/packages/fluentui/react-builder/src/components/ErrorPanel.tsx b/packages/fluentui/react-builder/src/components/ErrorPanel.tsx
index cb82929ac44b4..78f9209763387 100644
--- a/packages/fluentui/react-builder/src/components/ErrorPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/ErrorPanel.tsx
@@ -7,7 +7,7 @@ export type ErrorPanelProps = {
   elementAccessibilityErrors: AccessibilityError[];
 };
 
-export const ErrorPanel: React.FunctionComponent<ErrorPanelProps> = ({ elementAccessibilityErrors }) => {
+export const ErrorPanel: React.FunctionComponent<React.PropsWithChildren<ErrorPanelProps>> = ({ elementAccessibilityErrors }) => {
   const numberAccessibilityErrors = elementAccessibilityErrors.length;
   const uuid = elementAccessibilityErrors[0].elementUuid;
 
diff --git a/packages/fluentui/react-builder/src/components/FullScreenPreview.tsx b/packages/fluentui/react-builder/src/components/FullScreenPreview.tsx
index d8173de5054cf..06cd3d5e35092 100644
--- a/packages/fluentui/react-builder/src/components/FullScreenPreview.tsx
+++ b/packages/fluentui/react-builder/src/components/FullScreenPreview.tsx
@@ -3,7 +3,7 @@ import { Provider, teamsTheme } from '@fluentui/react-northstar';
 import { readTreeFromStore, readTreeFromURL } from '../utils/treeStore';
 import { renderJSONTreeToJSXElement } from '../config';
 
-export const FullScreenPreview: React.FunctionComponent = () => {
+export const FullScreenPreview: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const jsonTree = readTreeFromURL(window.location.href) || readTreeFromStore();
   return (
     <Provider theme={teamsTheme} target={document}>
diff --git a/packages/fluentui/react-builder/src/components/GetShareableLink.tsx b/packages/fluentui/react-builder/src/components/GetShareableLink.tsx
index dae136b052fa3..fa2a4b7507439 100644
--- a/packages/fluentui/react-builder/src/components/GetShareableLink.tsx
+++ b/packages/fluentui/react-builder/src/components/GetShareableLink.tsx
@@ -2,10 +2,10 @@ import * as React from 'react';
 import { Button } from '@fluentui/react-northstar';
 import { useCopyToClipboard } from '@fluentui/docs-components';
 
-export const GetShareableLink: React.FunctionComponent<{
+export const GetShareableLink: React.FunctionComponent<React.PropsWithChildren<{
   getShareableLink: () => string;
   style?: React.CSSProperties;
-}> = ({ getShareableLink, style }) => {
+}>> = ({ getShareableLink, style }) => {
   const [active, onCopy] = useCopyToClipboard(getShareableLink);
   return (
     <Button style={style} onClick={onCopy} disabled={active}>
diff --git a/packages/fluentui/react-builder/src/components/Knobs.tsx b/packages/fluentui/react-builder/src/components/Knobs.tsx
index 24dd6e90308c5..196c5c1e03e7f 100644
--- a/packages/fluentui/react-builder/src/components/Knobs.tsx
+++ b/packages/fluentui/react-builder/src/components/Knobs.tsx
@@ -152,7 +152,7 @@ const isHandledType = (type: string): boolean => {
   return ['boolean', 'string', 'literal', 'React.ElementType', 'number'].includes(type);
 };
 
-export const Knobs: React.FunctionComponent<DesignKnobProps> = ({
+export const Knobs: React.FunctionComponent<React.PropsWithChildren<DesignKnobProps>> = ({
   elementAccessibilityErrors,
   info,
   jsonTreeElement,
@@ -234,7 +234,6 @@ export const Knobs: React.FunctionComponent<DesignKnobProps> = ({
               />
             );
           })}
-
       {menuActivePane === 'accessibility' &&
         A11YPROPS.filter(prop => !/default[A-Z]/.test(prop.name)).map(prop => {
           const { types, options, value } = getValues(prop);
diff --git a/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx b/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx
index d6565501481a8..79c29ec6f1d1e 100644
--- a/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx
+++ b/packages/fluentui/react-builder/src/components/MultiTypeKnob.tsx
@@ -7,7 +7,7 @@ import * as React from 'react';
 /**
  * Displays a knob with the ability to switch between data `types`.
  */
-export const MultiTypeKnob: React.FunctionComponent<{
+export const MultiTypeKnob: React.FunctionComponent<React.PropsWithChildren<{
   label: string;
   types: ('boolean' | 'number' | 'string' | 'literal')[];
   value: any;
@@ -16,7 +16,7 @@ export const MultiTypeKnob: React.FunctionComponent<{
   onRemoveProp: () => void;
   options: string[];
   required: boolean;
-}> = ({ label, types, value, onChange, onPropUpdate, onRemoveProp, options, required }) => {
+}>> = ({ label, types, value, onChange, onPropUpdate, onRemoveProp, options, required }) => {
   const defaultType = types[0];
   const [type, setType] = React.useState(defaultType);
 
diff --git a/packages/fluentui/react-builder/src/components/NavBarItem.tsx b/packages/fluentui/react-builder/src/components/NavBarItem.tsx
index a8fefb26fa110..7eb2343a124f2 100644
--- a/packages/fluentui/react-builder/src/components/NavBarItem.tsx
+++ b/packages/fluentui/react-builder/src/components/NavBarItem.tsx
@@ -8,7 +8,7 @@ export type NavBarItemProps = {
   onClickHandler: () => void;
 };
 
-export const NavBarItem: React.FunctionComponent<NavBarItemProps> = ({ title, icon, isSelected, onClickHandler }) => {
+export const NavBarItem: React.FunctionComponent<React.PropsWithChildren<NavBarItemProps>> = ({ title, icon, isSelected, onClickHandler }) => {
   return (
     <Box
       styles={({ theme }) => ({
diff --git a/packages/fluentui/react-builder/src/components/NavigationPanel.tsx b/packages/fluentui/react-builder/src/components/NavigationPanel.tsx
index c4da2bacdf96a..3aa8d45ea1b9f 100644
--- a/packages/fluentui/react-builder/src/components/NavigationPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/NavigationPanel.tsx
@@ -26,7 +26,7 @@ export type NavigationPanelProps = {
   selectedComponent?: JSONTreeElement;
 };
 
-export const NavigationPanel: React.FunctionComponent<NavigationPanelProps> = (props: NavigationPanelProps) => {
+export const NavigationPanel: React.FunctionComponent<React.PropsWithChildren<NavigationPanelProps>> = (props: NavigationPanelProps) => {
   const [{ mode }] = useMode();
 
   const accessErrorLabelStyle = {
diff --git a/packages/fluentui/react-builder/src/components/ReaderNarration.tsx b/packages/fluentui/react-builder/src/components/ReaderNarration.tsx
index 1ae37ec842e7e..ab6be2a1fe292 100644
--- a/packages/fluentui/react-builder/src/components/ReaderNarration.tsx
+++ b/packages/fluentui/react-builder/src/components/ReaderNarration.tsx
@@ -19,7 +19,7 @@ export type ReaderNarrationProps = {
   inUseMode: boolean;
 };
 
-export const ReaderNarration: React.FunctionComponent<ReaderNarrationProps> = ({ vcElement, selector, inUseMode }) => {
+export const ReaderNarration: React.FunctionComponent<React.PropsWithChildren<ReaderNarrationProps>> = ({ vcElement, selector, inUseMode }) => {
   const ref = React.useRef<HTMLElement>();
   const [narrationElement, setNarrationElement] = React.useState<IAriaElement>(null);
   const [narrationText, setNarrationText] = React.useState('');
diff --git a/packages/fluentui/react-builder/src/components/Toolbar.tsx b/packages/fluentui/react-builder/src/components/Toolbar.tsx
index 5679cae920179..8521a844f7e32 100644
--- a/packages/fluentui/react-builder/src/components/Toolbar.tsx
+++ b/packages/fluentui/react-builder/src/components/Toolbar.tsx
@@ -153,7 +153,8 @@ export const Toolbar: React.FunctionComponent<ToolbarProps> = ({
               },
             },
             mode === 'use'
-              ? ({
+              ? // @ts-expect-error React 18 types
+                ({
                   key: 'screen-reader',
                   icon: <TranslationIcon outline={true} />,
                   kind: 'toggle',
diff --git a/packages/fluentui/react-builder/src/components/tabPanels/AccessibilityTabPanel.tsx b/packages/fluentui/react-builder/src/components/tabPanels/AccessibilityTabPanel.tsx
index b88a064d29db5..63d80652df705 100644
--- a/packages/fluentui/react-builder/src/components/tabPanels/AccessibilityTabPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/tabPanels/AccessibilityTabPanel.tsx
@@ -17,7 +17,7 @@ export type AccessibilityTabPanelProps = {
   selectedComponent?: JSONTreeElement;
 };
 
-export const AccessibilityTabPanel: React.FunctionComponent<AccessibilityTabPanelProps> = (
+export const AccessibilityTabPanel: React.FunctionComponent<React.PropsWithChildren<AccessibilityTabPanelProps>> = (
   props: AccessibilityTabPanelProps,
 ) => {
   const currentChildren = props.jsonTree?.props?.children;
diff --git a/packages/fluentui/react-builder/src/components/tabPanels/AddTabPanel.tsx b/packages/fluentui/react-builder/src/components/tabPanels/AddTabPanel.tsx
index 082dd086ded52..7736dddd5a852 100644
--- a/packages/fluentui/react-builder/src/components/tabPanels/AddTabPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/tabPanels/AddTabPanel.tsx
@@ -5,7 +5,7 @@ export type AddTabPanelProps = {
   onDragStart?: (info: any, e: any) => void;
 };
 
-export const AddTabPanel: React.FunctionComponent<AddTabPanelProps> = ({ onDragStart }) => {
+export const AddTabPanel: React.FunctionComponent<React.PropsWithChildren<AddTabPanelProps>> = ({ onDragStart }) => {
   return (
     <div>
       <ComponentList style={{ overflowY: 'auto' }} onDragStart={onDragStart} />
diff --git a/packages/fluentui/react-builder/src/components/tabPanels/NavigationTabPanel.tsx b/packages/fluentui/react-builder/src/components/tabPanels/NavigationTabPanel.tsx
index 72ca5ba313572..37d8837de270c 100644
--- a/packages/fluentui/react-builder/src/components/tabPanels/NavigationTabPanel.tsx
+++ b/packages/fluentui/react-builder/src/components/tabPanels/NavigationTabPanel.tsx
@@ -16,7 +16,7 @@ export type NavigatorTabPanelProps = {
   selectedComponent?: JSONTreeElement;
 };
 
-export const NavigatorTabPanel: React.FunctionComponent<NavigatorTabPanelProps> = (props: NavigatorTabPanelProps) => {
+export const NavigatorTabPanel: React.FunctionComponent<React.PropsWithChildren<NavigatorTabPanelProps>> = (props: NavigatorTabPanelProps) => {
   return (
     <div>
       {(!props.jsonTree?.props?.children || props.jsonTree?.props?.children?.length === 0) && (
diff --git a/packages/fluentui/react-builder/test/config-test.tsx b/packages/fluentui/react-builder/test/config-test.tsx
index 473b6958f73af..59882797853d6 100644
--- a/packages/fluentui/react-builder/test/config-test.tsx
+++ b/packages/fluentui/react-builder/test/config-test.tsx
@@ -189,7 +189,7 @@ describe('config', () => {
   });
 
   describe('resolveDraggingElement', () => {
-    const FunctionalComponent: React.FunctionComponent<any> = () => <div>fcomponent</div>;
+    const FunctionalComponent: React.FunctionComponent<React.PropsWithChildren<any>> = () => <div>fcomponent</div>;
     FunctionalComponent.displayName = 'FunctionalComponent';
 
     class ClassComponent extends React.Component<any> {
diff --git a/packages/fluentui/react-component-event-listener/test/EventListener-test.tsx b/packages/fluentui/react-component-event-listener/test/EventListener-test.tsx
index b43dd15252030..2a17ba93860d6 100644
--- a/packages/fluentui/react-component-event-listener/test/EventListener-test.tsx
+++ b/packages/fluentui/react-component-event-listener/test/EventListener-test.tsx
@@ -5,7 +5,10 @@ import * as ReactTestUtils from 'react-dom/test-utils';
 // @ts-ignore
 import * as simulant from 'simulant';
 
-class TestBoundary extends React.Component<{ onError: (e: Error) => void }, { hasError: boolean }> {
+class TestBoundary extends React.Component<
+  React.PropsWithChildren<{ onError: (e: Error) => void }>,
+  { hasError: boolean }
+> {
   state = { hasError: false };
 
   componentDidCatch(error: Error) {
diff --git a/packages/fluentui/react-component-nesting-registry/src/NestingChild.tsx b/packages/fluentui/react-component-nesting-registry/src/NestingChild.tsx
index 9bdc6b2286f97..24c939f743c34 100644
--- a/packages/fluentui/react-component-nesting-registry/src/NestingChild.tsx
+++ b/packages/fluentui/react-component-nesting-registry/src/NestingChild.tsx
@@ -23,7 +23,7 @@ class NestingChildInner<T extends Node> extends React.Component<NestingChildInne
   }
 }
 
-export const NestingChild: React.FunctionComponent<NestingProps> = ({ children }) => (
+export const NestingChild: React.FunctionComponent<React.PropsWithChildren<NestingProps>> = ({ children }) => (
   <NestingContext.Consumer>
     {(contextValue: NestingContextValue) => <NestingChildInner {...contextValue}>{children}</NestingChildInner>}
   </NestingContext.Consumer>
diff --git a/packages/fluentui/react-component-nesting-registry/src/hooks/types.ts b/packages/fluentui/react-component-nesting-registry/src/hooks/types.ts
index e044f940b28ad..ff950c3bb86c4 100644
--- a/packages/fluentui/react-component-nesting-registry/src/hooks/types.ts
+++ b/packages/fluentui/react-component-nesting-registry/src/hooks/types.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { GetRefs, NestedContextProps, NestingContextValue } from '../types';
 
 export type UseNestingHookResult<T> = {
-  NestedComponent: React.Provider<NestingContextValue> | React.ReactFragment;
+  NestedComponent: React.Provider<NestingContextValue | null> | React.ReactFragment;
   nestedProps: NestedContextProps | null;
 
   getRefs: GetRefs;
diff --git a/packages/fluentui/react-component-ref/package.json b/packages/fluentui/react-component-ref/package.json
index dc467b4c59f6c..f4eefae0f9bc0 100644
--- a/packages/fluentui/react-component-ref/package.json
+++ b/packages/fluentui/react-component-ref/package.json
@@ -6,7 +6,7 @@
   "bugs": "https://github.com/microsoft/fluentui/issues",
   "dependencies": {
     "@babel/runtime": "^7.10.4",
-    "react-is": "^17.0.2"
+    "react-is": "^18.3.1"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
diff --git a/packages/fluentui/react-component-ref/test/fixtures.tsx b/packages/fluentui/react-component-ref/test/fixtures.tsx
index f049f1600dbfb..e6a2a107e0fbf 100644
--- a/packages/fluentui/react-component-ref/test/fixtures.tsx
+++ b/packages/fluentui/react-component-ref/test/fixtures.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-export const DOMFunction: React.FunctionComponent = props => <div {...props} id="node" />;
+export const DOMFunction: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => <div {...props} id="node" />;
 
-export const CompositeFunction: React.FunctionComponent = props => <DOMFunction {...props} />;
+export const CompositeFunction: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => <DOMFunction {...props} />;
 
 export class DOMClass extends React.Component {
   render() {
diff --git a/packages/fluentui/react-icons-northstar/src/utils/createSvgIcon.ts b/packages/fluentui/react-icons-northstar/src/utils/createSvgIcon.ts
index 13f9d523a0cd0..f5fa87c41ddea 100644
--- a/packages/fluentui/react-icons-northstar/src/utils/createSvgIcon.ts
+++ b/packages/fluentui/react-icons-northstar/src/utils/createSvgIcon.ts
@@ -21,7 +21,7 @@ export const svgIconHandledProps: (keyof SvgIconProps)[] = [
 ];
 
 export const createSvgIcon = <TProps = {}>({ svg, displayName, handledProps = [] }: SvgIconCreateFnParams<TProps>) => {
-  const Component: React.FC<React.HTMLAttributes<HTMLSpanElement> & TProps & SvgIconProps> & {
+  const Component: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement> & TProps & SvgIconProps>> & {
     handledProps: (keyof (TProps & SvgIconProps))[];
   } = props => {
     const context = useFluentContext();
diff --git a/packages/fluentui/react-icons-northstar/test/utils/createSvgIcon-test.tsx b/packages/fluentui/react-icons-northstar/test/utils/createSvgIcon-test.tsx
index 61e5d76eacd67..94e90b13341fc 100644
--- a/packages/fluentui/react-icons-northstar/test/utils/createSvgIcon-test.tsx
+++ b/packages/fluentui/react-icons-northstar/test/utils/createSvgIcon-test.tsx
@@ -28,6 +28,7 @@ describe('createSvgIcon', () => {
     const TestIcon = createSvgIcon({ svg: testSvg, displayName: 'TestIcon' });
 
     const wrapper = mount(<TestIcon id="test-id" />, {
+      // @ts-expect-error React 18
       wrappingComponent: Unstable_FluentContextProvider,
       wrappingComponentProps: { value: { performance: {}, theme: createTheme() } },
     });
@@ -46,6 +47,7 @@ describe('createSvgIcon', () => {
     });
 
     const wrapper = mount(<BookIcon foo outline />, {
+      // @ts-expect-error React 18
       wrappingComponent: Unstable_FluentContextProvider,
       wrappingComponentProps: { value: { performance: {}, theme: createTheme() } },
     });
diff --git a/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx b/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx
index e4c25f98d1fb6..298de234431a7 100644
--- a/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx
+++ b/packages/fluentui/react-northstar-emotion-renderer/src/createEmotionRenderer.tsx
@@ -58,7 +58,7 @@ export function createEmotionRenderer(options: CreateEmotionRendererOptions = {}
       container: cacheLtr.sheet.container,
     });
 
-    const Provider: React.FC = props => {
+    const Provider: React.FC<React.PropsWithChildren<unknown>> = props => {
       // TODO: Find a way to cleanup global styles
       // React.useEffect(() => {
       // return () => sheet.flush();
diff --git a/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx b/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx
index c8b38ce26d1b7..cfc6e7742a65a 100644
--- a/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx
+++ b/packages/fluentui/react-northstar-fela-renderer/src/RendererProvider.tsx
@@ -33,7 +33,10 @@ declare module 'fela-dom' {
   function rehydrate(renderer: FelaRenderer, targetDocument?: Document): void;
 }
 
-export class RendererProvider extends React.Component<RendererProviderProps, Record<string, unknown>> {
+export class RendererProvider extends React.Component<
+  React.PropsWithChildren<RendererProviderProps>,
+  Record<string, unknown>
+> {
   constructor(props: RendererProviderProps) {
     super(props);
     this._renderStyle();
diff --git a/packages/fluentui/react-northstar-fela-renderer/test/felaRenderer-test.tsx b/packages/fluentui/react-northstar-fela-renderer/test/felaRenderer-test.tsx
index 0e104f3fab528..730dd7fab17fd 100644
--- a/packages/fluentui/react-northstar-fela-renderer/test/felaRenderer-test.tsx
+++ b/packages/fluentui/react-northstar-fela-renderer/test/felaRenderer-test.tsx
@@ -15,7 +15,9 @@ function createSnapshot(component: JSX.Element, theme = {}) {
   felaRenderer.clear();
 
   ReactDOM.render(
+    // @ts-expect-error fela and react 18
     <RendererProvider renderer={felaRenderer}>
+      {/* @ts-expect-error fela and react 18 */}
       <ThemeProvider theme={{ direction: 'ltr', ...theme }}>{component}</ThemeProvider>
     </RendererProvider>,
     div,
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/AsyncShorthand/AsyncShorthand.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
index 35d72dacc703a..e9c7591c1d621 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/AsyncShorthand/AsyncShorthand.tsx
@@ -89,16 +89,19 @@ class CustomChatMessage extends React.Component {
               iconOnly
               className="actions"
               items={[
+                // @ts-expect-error React 18 TODO
                 {
                   icon: <LikeIcon />,
                   key: 'a',
                   children: this.renderMenuItem,
                 },
+                // @ts-expect-error React 18 TODO
                 {
                   icon: <AcceptIcon />,
                   key: 'b',
                   children: this.renderMenuItem,
                 },
+                // @ts-expect-error React 18 TODO
                 {
                   icon: <MoreIcon />,
                   key: 'c',
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/CopyToClipboard.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/CopyToClipboard.tsx
index 4e5c196b1cad5..ffc8bd8e5da70 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/CopyToClipboard.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/CopyToClipboard.tsx
@@ -15,7 +15,7 @@ export type CopyToClipboardProps = {
   trigger: JSX.Element;
 };
 
-const CopyToClipboard: React.FC<CopyToClipboardProps> = props => {
+const CopyToClipboard: React.FC<React.PropsWithChildren<CopyToClipboardProps>> = props => {
   const { value, trigger, tooltip, attached, notification, timeout, target } = props;
 
   const setNotification = React.useContext(NotificationContext);
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/NotificationProvider.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/NotificationProvider.tsx
index 424ec1629138d..a9917590ad8ba 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/NotificationProvider.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/NotificationProvider.tsx
@@ -13,7 +13,7 @@ export const NotificationContext = React.createContext<NotificationContextValue>
   throw new Error('No matching NotificationContext.Provider');
 });
 
-export const NotificationProvider: React.FC = props => {
+export const NotificationProvider: React.FC<React.PropsWithChildren<unknown>> = props => {
   const { children } = props;
   const [notification, setNotification] = React.useState<React.ReactNode>();
   const [target, setTarget] = React.useState<HTMLElement | null>();
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/index.tsx
index 0c67f17e9937d..b06f727a14074 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/CopyToClipboard/index.tsx
@@ -12,7 +12,7 @@ type CopyToClipboardPrototypeProps = {
   attached?: boolean;
 };
 
-const CopyToClipboardPrototype: React.FC<CopyToClipboardPrototypeProps> = props => {
+const CopyToClipboardPrototype: React.FC<React.PropsWithChildren<CopyToClipboardPrototypeProps>> = props => {
   return (
     <Flex gap="gap.medium" vAlign="center" padding="padding.medium">
       <Text content="Commit: " />
@@ -28,7 +28,7 @@ const CopyToClipboardPrototype: React.FC<CopyToClipboardPrototypeProps> = props
   );
 };
 
-const CopyToClipboardInMenu: React.FC = props => {
+const CopyToClipboardInMenu: React.FC<React.PropsWithChildren<unknown>> = props => {
   const item = {
     key: 'edit',
     content: 'Edit',
@@ -47,7 +47,7 @@ const CopyToClipboardInMenu: React.FC = props => {
   return <Menu items={[item]} />;
 };
 
-const CopyToClipboardAttached: React.FC = props => {
+const CopyToClipboardAttached: React.FC<React.PropsWithChildren<unknown>> = props => {
   const [target, setTarget] = React.useState<HTMLElement>(null);
 
   const items = [
@@ -72,10 +72,11 @@ const CopyToClipboardAttached: React.FC = props => {
     },
   ];
 
+  // @ts-expect-error React 18
   return <Menu items={items} />;
 };
 
-const CopyToClipboardPrototypes: React.FC = () => {
+const CopyToClipboardPrototypes: React.FC<React.PropsWithChildren<unknown>> = () => {
   const commitID = '3422f7d';
   return (
     <PrototypeSection title="Copy to Clipboard">
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbar.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbar.tsx
index 63453aeb1d0f4..38368722b6c56 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbar.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbar.tsx
@@ -47,7 +47,7 @@ type EditorToolbarProps = EditorToolbarState & {
 type ToolbarItem = ShorthandValue<ToolbarItemProps & { kind?: keyof ToolbarItemShorthandKinds }>;
 type OverflowItem = ShorthandValue<ToolbarMenuItemProps & { kind?: keyof ToolbarMenuItemShorthandKinds }>;
 
-const EditorToolbar: React.FC<EditorToolbarProps> = props => {
+const EditorToolbar: React.FC<React.PropsWithChildren<EditorToolbarProps>> = props => {
   const overflowIndex = React.useRef<number>();
 
   const linkItemRef = React.useRef<HTMLElement>(null);
@@ -127,6 +127,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
           </Flex>
         ),
       },
+      // @ts-expect-error TODO React 18
       overflowItem: {
         popup: {
           align: 'center',
@@ -180,6 +181,7 @@ const EditorToolbar: React.FC<EditorToolbarProps> = props => {
     { toolbarItem: { key: 'divider-3', kind: 'divider' } },
 
     {
+      // @ts-expect-error TODO React 18
       toolbarItem: {
         key: 'link',
         icon: <LinkIcon />,
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbarTable.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbarTable.tsx
index b21a753cd8f46..cf8e0115b33d6 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbarTable.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/EditorToolbarTable.tsx
@@ -6,7 +6,7 @@ type EditorToolbarTableProps = {
   onClick: () => void;
 };
 
-const EditorToolbarTable: React.FC<EditorToolbarTableProps> = props => (
+const EditorToolbarTable: React.FC<React.PropsWithChildren<EditorToolbarTableProps>> = props => (
   <Grid columns={3}>
     {_.times(9, i => (
       <button
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/PortalWindow.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/PortalWindow.tsx
index ab841c52cf96a..a6666d8c21fc6 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/PortalWindow.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/PortalWindow.tsx
@@ -6,7 +6,7 @@ type PortalWindowProps = {
   onClose?: () => void;
 };
 
-const PortalWindow: React.FunctionComponent<PortalWindowProps> = ({ children, onClose }) => {
+const PortalWindow: React.FunctionComponent<React.PropsWithChildren<PortalWindowProps>> = ({ children, onClose }) => {
   const externalContainer = React.useRef<HTMLDivElement>(null);
   const externalWindow = React.useRef<Window>(null);
   const [mounted, setMounted] = React.useState<boolean>(false);
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/index.tsx
index 7570208765a33..dc89538d2a449 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/EditorToolbar/index.tsx
@@ -35,6 +35,7 @@ const EditorToolbarInWindowPrototype = () => {
 
       {open && (
         <PortalWindow onClose={handleClose}>
+          {/* @ts-expect-error React 18 */}
           {externalDocument => (
             <Provider
               rtl={rtl}
@@ -51,7 +52,7 @@ const EditorToolbarInWindowPrototype = () => {
   );
 };
 
-const EditorToolbarPrototypes: React.FC = () => (
+const EditorToolbarPrototypes: React.FC<React.PropsWithChildren<unknown>> = () => (
   <PrototypeSection title="Editor Toolbar">
     <ComponentPrototype
       description={
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/FormValidation/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/FormValidation/index.tsx
index 8cf0a546ec746..065821e011c95 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/FormValidation/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/FormValidation/index.tsx
@@ -3,7 +3,7 @@ import { PrototypeSection, ComponentPrototype } from '../Prototypes';
 import FormValidateFormik from './Formik';
 import FormValidateHooks from './FormHooks';
 
-const FormValidationPrototype: React.FC = () => {
+const FormValidationPrototype: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <PrototypeSection title="Formik">
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/MenuList/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/MenuList/index.tsx
index b054c60ba7a22..c3dce9c6bfe3c 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/MenuList/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/MenuList/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { PrototypeSection, ComponentPrototype } from '../Prototypes';
 import { MenuButton } from './MenuButton';
 
-const MenuList: React.FC = () => (
+const MenuList: React.FC<React.PropsWithChildren<unknown>> = () => (
   <PrototypeSection title="Menu Button">
     <ComponentPrototype title="Reusable submenu" description="">
       <MenuButton />
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/NestedPopupsAndDialogs/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/NestedPopupsAndDialogs/index.tsx
index 4015a043d4901..9e0c5e2a2683a 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/NestedPopupsAndDialogs/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/NestedPopupsAndDialogs/index.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { ComponentPrototype, PrototypeSection } from '../Prototypes';
 
-const PopupAndDialog: React.FC = () => (
+const PopupAndDialog: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Popup
     content={
       <>
@@ -17,7 +17,7 @@ const PopupAndDialog: React.FC = () => (
   />
 );
 
-const ControlledPopupAndDialog: React.FC = () => {
+const ControlledPopupAndDialog: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [dialogOpen, setDialogOpen] = React.useState(false);
   const [popupOpen, setPopupOpen] = React.useState(false);
 
@@ -47,7 +47,7 @@ const ControlledPopupAndDialog: React.FC = () => {
   );
 };
 
-const NestedDialogs: React.FC = () => (
+const NestedDialogs: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Dialog
     cancelButton="Close"
     header="An outer dialog"
@@ -85,7 +85,7 @@ const NestedDialogs: React.FC = () => (
   />
 );
 
-const NestedPopupsAndDialogs: React.FC = () => {
+const NestedPopupsAndDialogs: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <PrototypeSection title="Nested Popups & Dialogs">
       <ComponentPrototype title="A popup with dialog" description="Popup will be kept open after Dialog">
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/ParticipantsList/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/ParticipantsList/index.tsx
index 3e3f1593cc674..1fab9d5f4eedb 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/ParticipantsList/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/ParticipantsList/index.tsx
@@ -41,7 +41,7 @@ const ParticipantsList = () => (
   </>
 );
 
-const ParticipantsListPrototype: React.FC = () => {
+const ParticipantsListPrototype: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <PrototypeSection title="Participants list">
       <ComponentPrototype
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/Prototypes.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/Prototypes.tsx
index 4ea2cd916455d..274a9ae934ef0 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/Prototypes.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/Prototypes.tsx
@@ -12,7 +12,7 @@ interface ComponentPrototypeProps extends PrototypeSectionProps {
   description?: React.ReactNode;
 }
 
-export const PrototypeSection: React.FunctionComponent<PrototypeSectionProps> = ({ children, styles, title }) => (
+export const PrototypeSection: React.FunctionComponent<React.PropsWithChildren<PrototypeSectionProps>> = ({ children, styles, title }) => (
   <Box styles={{ margin: '20px', ...styles }}>
     <DocumentTitle title={`Fluent UI - ${title || 'Prototype'}`} />
     <Header as="h1">{title}</Header>
@@ -20,7 +20,7 @@ export const PrototypeSection: React.FunctionComponent<PrototypeSectionProps> =
   </Box>
 );
 
-export const ComponentPrototype: React.FunctionComponent<ComponentPrototypeProps> = ({
+export const ComponentPrototype: React.FunctionComponent<React.PropsWithChildren<ComponentPrototypeProps>> = ({
   children,
   description,
   styles,
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/index.tsx
index 9c9d44d83bfbd..762568e84ec48 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/index.tsx
@@ -26,7 +26,7 @@ const treeItems = [
   },
 ];
 
-const RosterPrototype: React.FC = () => {
+const RosterPrototype: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <PrototypeSection title="Roster">
       <ComponentPrototype>
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/participant.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/participant.tsx
index f715e4f932d4a..24ac9cc6b4039 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/participant.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/Roster/participant.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import { Avatar, Flex, Text, Animation, MenuButton, FlexItem } from '@fluentui/react-northstar';
 import { MoreIcon, MicOffIcon, ParticipantRemoveIcon, MicIcon } from '@fluentui/react-icons-northstar';
 
-const Participant: React.FC<{
+const Participant: React.FC<React.PropsWithChildren<{
   image?: string;
   name: string;
   status: object;
   position: string;
   isTalking?: boolean;
   isMuted?: boolean;
-}> = ({ image, name, status, position, isTalking, isMuted }) => {
+}>> = ({ image, name, status, position, isTalking, isMuted }) => {
   const [muted, setMuted] = React.useState(isMuted);
   const [talking, setTalking] = React.useState(isTalking);
   const [openMenu, setOpenMenu] = React.useState(false);
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/VirtualizedTable/VirtualizedTables.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/VirtualizedTable/VirtualizedTables.tsx
index 44126d8a06798..f1bfa2e1c2063 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/VirtualizedTable/VirtualizedTables.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/VirtualizedTable/VirtualizedTables.tsx
@@ -84,6 +84,7 @@ function VirtualizedTable(props: VirtualizedTableProps) {
           {({ width }) => {
             return height ? (
               <Table accessibility={gridNestedBehavior} aria-rowcount={itemsCount} aria-label={props.label}>
+                {/* @ts-expect-error React 18 */}
                 <div ref={el => registerChild(el)} {...accessibilityWrapperProperties}>
                   <ReactVirtualizedList
                     autoHeight
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/alerts/AnimatedBannerAlert.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/alerts/AnimatedBannerAlert.tsx
index 42d954a04d1d8..0cac25785e9eb 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/alerts/AnimatedBannerAlert.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/alerts/AnimatedBannerAlert.tsx
@@ -8,7 +8,7 @@ interface AnimatedBannerAlertProps extends AlertProps {
 /**
  * Needs to have 'slideDown' animation defined in parent Provider
  */
-const AnimatedBannerAlert: React.FunctionComponent<AnimatedBannerAlertProps> = props => {
+const AnimatedBannerAlert: React.FunctionComponent<React.PropsWithChildren<AnimatedBannerAlertProps>> = props => {
   const { open, ...rest } = props;
 
   if (open === undefined) return <Alert {...rest} />;
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
index b898ea6377c8c..d611f654b4cc4 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -13,6 +13,7 @@ import { Ref } from '@fluentui/react-component-ref';
 import { AcceptIcon, EmojiIcon, LikeIcon } from '@fluentui/react-icons-northstar';
 
 const reactions: ShorthandCollection<ReactionProps> = [
+  // @ts-expect-error React 18 TODO
   {
     icon: <LikeIcon />,
     content: '1K',
@@ -20,6 +21,7 @@ const reactions: ShorthandCollection<ReactionProps> = [
     variables: { meReacting: true },
     children: (Component, props) => <ReactionPopup {...props} />,
   },
+  // @ts-expect-error React 18 TODO
   {
     icon: <EmojiIcon />,
     content: 2,
@@ -125,7 +127,7 @@ const ChatWithPopover = () => {
   );
 };
 
-const TeamsChatMessage: React.FC<ChatMessageProps> = (props: ChatMessageProps) => {
+const TeamsChatMessage: React.FC<React.PropsWithChildren<ChatMessageProps>> = (props: ChatMessageProps) => {
   const [showActionMenu, setShowActionMenu] = React.useState(false);
   const [forceShowActionMenu, setForceShowActionMenu] = React.useState(false);
   const [chatMessageElement, setChatMessageElement] = React.useState<HTMLElement>(null);
@@ -136,6 +138,7 @@ const TeamsChatMessage: React.FC<ChatMessageProps> = (props: ChatMessageProps) =
     <Ref innerRef={setChatMessageElement}>
       <Chat.Message
         {...props}
+        // @ts-expect-error React 18 TODO
         actionMenu={{
           children: (Component, props) => (
             <Popover
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
index 875e90cc8bd09..84ba71064e56c 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ChatMessageWithPopover/ReactionPopup.tsx
@@ -29,6 +29,7 @@ class ReactionPopup extends React.Component<ReactionProps, { open: boolean }> {
       <Popup
         autoFocus
         trigger={<Reaction as="button" aria-haspopup="true" {...this.props} aria-label={getAriaLabel(this.props)} />}
+        // @ts-expect-error React 18 TODO
         content={{
           children: () => (
             <Menu
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ScreenReaderHeaderText.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ScreenReaderHeaderText.tsx
index 935a4be2b84c7..e13fdd587e3a2 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ScreenReaderHeaderText.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ScreenReaderHeaderText.tsx
@@ -7,7 +7,7 @@ type ScreenReaderTextProps = {
   author?: string;
 };
 
-const ScreenReaderHeaderText: React.FC<ScreenReaderTextProps> = props => {
+const ScreenReaderHeaderText: React.FC<React.PropsWithChildren<ScreenReaderTextProps>> = props => {
   return (
     <div style={chatProtoStyle.screenReaderContainerStyles} role="heading" aria-level={4}>
       {getMessagePreviewForScreenReader(props.text, props.author)}
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplies.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplies.tsx
index 42eb52b6d2cd2..643da9391daf2 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplies.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplies.tsx
@@ -21,7 +21,7 @@ type ThreadRepliesProps = {
   replies?: ThreadReplyProps[];
 };
 
-const ThreadReplies: React.FC<ThreadRepliesProps> = props => {
+const ThreadReplies: React.FC<React.PropsWithChildren<ThreadRepliesProps>> = props => {
   const [expanded, setExpanded] = React.useState(false);
   const { replies = [] } = props;
   const repliesCount = replies.length;
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplyEditor.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplyEditor.tsx
index 1fdff5b1bf321..f33b7ab208bb6 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplyEditor.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadReplyEditor.tsx
@@ -7,7 +7,7 @@ import { toolbarItems } from './mockData';
 import classNames from './classNames';
 import { SendIcon } from '@fluentui/react-icons-northstar';
 
-const ThreadReplyEditor: React.FC = () => {
+const ThreadReplyEditor: React.FC<React.PropsWithChildren<unknown>> = () => {
   const buttonRef = React.useRef(null);
   const inputRef = React.useRef(null);
   const [editMode, setEditMode] = React.useState(false);
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx
index b2164459ad216..cb43cb3060866 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatMessages/ThreadedMessages/ThreadedMessage.tsx
@@ -20,9 +20,12 @@ class ThreadedMessage extends React.Component<ThreadedMessageProps> {
       <div>
         <Flex className={classNames.threadedMessage.innerContent} column>
           <Flex>
+            {/* @ts-expect-error legacy */}
             <Text size="small" className={classNames.threadedMessage.author} content={author} />
+            {/* @ts-expect-error legacy */}
             <Text size="small" className={classNames.threadedMessage.timestamp} content={timestamp} />
           </Flex>
+          {/* @ts-expect-error legacy */}
           {subject && <Text weight="semibold" size="large" content={subject} />}
           {content}
         </Flex>
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/chatPaneLayout.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/chatPaneLayout.tsx
index 77563986c019a..b81ff3b9bcfbe 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/chatPaneLayout.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/chatPaneLayout.tsx
@@ -6,7 +6,7 @@ import ChatPaneHeader from './chatPaneHeader';
 import ChatPaneContainer from './chatPaneContent';
 import ComposeMessage from './composeMessage';
 
-const ChatPaneLayout: React.FunctionComponent<Props<{ chat: ChatData }>> = ({ chat }) => (
+const ChatPaneLayout: React.FunctionComponent<React.PropsWithChildren<Props<{ chat: ChatData }>>> = ({ chat }) => (
   <Flex
     fill
     column
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/composeMessage.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/composeMessage.tsx
index cfc77ea9b31fb..588994dfec577 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/composeMessage.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/composeMessage.tsx
@@ -19,7 +19,7 @@ type ComposeMessageProps = Props<{
   style?: React.CSSProperties;
 }>;
 
-const ComposeMessage: React.FunctionComponent<ComposeMessageProps> = props => (
+const ComposeMessage: React.FunctionComponent<React.PropsWithChildren<ComposeMessageProps>> = props => (
   <Provider.Consumer
     render={({ siteVariables: siteVars }) => (
       <Flex column role="region" aria-labelledby="chat-compose-reader-text" style={props.style}>
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/services/messageFactoryMock.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/services/messageFactoryMock.tsx
index 306c8c9fd109f..9f97a66aa047f 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/services/messageFactoryMock.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatPane/services/messageFactoryMock.tsx
@@ -154,6 +154,7 @@ function createMessageContentWithAttachments(content: string, messageId: string)
             icon={<WordIcon />}
             aria-label={`File attachment ${fileName}. Press tab for more options Press Enter to open the file`}
             header={fileName}
+            // @ts-expect-error TODO
             action={action}
             data-is-focusable={true}
             styles={{
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatRefresh/ChatRefreshTimestampTooltip.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatRefresh/ChatRefreshTimestampTooltip.tsx
index 372e1000e4f7b..fb03ea92baf1e 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/chatRefresh/ChatRefreshTimestampTooltip.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/chatRefresh/ChatRefreshTimestampTooltip.tsx
@@ -17,6 +17,7 @@ const items: ShorthandCollection<ChatItemProps> = [
         unstable_layout="refresh"
         content="Hello"
         author="Robin Counts"
+        // @ts-expect-error React 18
         timestamp={{
           content: '10:15 PM',
           children: (Component, props) => (
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/customScrollbar/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/customScrollbar/index.tsx
index 52f77970bbf3e..cca70f33dac4e 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/customScrollbar/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/customScrollbar/index.tsx
@@ -93,7 +93,7 @@ const ScrollbarDropdownPrototype = () => {
   );
 };
 
-const CustomScrollbarPrototypes: React.FC = () => {
+const CustomScrollbarPrototypes: React.FC<React.PropsWithChildren<unknown>> = () => {
   return (
     <PrototypeSection title="Custom Scrollbar">
       <Text>
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/CustomToolbar.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/CustomToolbar.tsx
index e8ad61c1a955c..a61545692ebb6 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/CustomToolbar.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/CustomToolbar.tsx
@@ -205,7 +205,7 @@ const layouts: Record<CustomToolbarProps['layout'], CustomToolbarLayout> = {
   ],
 };
 
-const CustomToolbar: React.FunctionComponent<CustomToolbarProps> = props => {
+const CustomToolbar: React.FunctionComponent<React.PropsWithChildren<CustomToolbarProps>> = props => {
   const { layout = 'standard' } = props;
 
   return <Toolbar variables={{ isCt: true }} items={layouts[layout](props)} />;
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/index.tsx
index 97203dc3f6700..972fdc9f17eb3 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/customToolbar/index.tsx
@@ -10,7 +10,7 @@ import { highContrastThemeOverrides } from './highContrastThemeOverrides';
 
 import CustomToolbar, { CustomToolbarProps } from './CustomToolbar';
 
-const CustomToolbarPrototype: React.FunctionComponent = () => {
+const CustomToolbarPrototype: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [rtl] = useBooleanKnob({
     name: 'RTL',
     initialValue: false,
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsDropdown.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsDropdown.tsx
index 429d958fd197a..f52f37a57bf8a 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsDropdown.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsDropdown.tsx
@@ -5,12 +5,12 @@ import { Dropdown, DropdownItemProps, Provider } from '@fluentui/react-northstar
 import { MentionsContainerProps } from './MentionsEditor';
 
 type RenderItem = {
-  Item: React.ReactType;
+  Item: React.ElementType;
   props: DropdownItemProps;
   fontWeight: Property.FontWeight;
 };
 
-const MentionsDropdown: React.FunctionComponent<MentionsContainerProps> = props => {
+const MentionsDropdown: React.FunctionComponent<React.PropsWithChildren<MentionsContainerProps>> = props => {
   const { searchQuery, items, onOpenChange, onSearchQueryChange, onInputKeyDown } = props;
 
   const renderItem = React.useCallback((args: RenderItem) => getCustomItem({ ...args, searchQuery }), [searchQuery]);
@@ -43,7 +43,7 @@ const MentionsDropdown: React.FunctionComponent<MentionsContainerProps> = props
 };
 
 const getCustomItem = (args: {
-  Item: React.ReactType;
+  Item: React.ElementType;
   props: DropdownItemProps;
   searchQuery: string;
   fontWeight: Property.FontWeight;
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsEditor.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsEditor.tsx
index eea357ebedae6..6061235ecbc27 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsEditor.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/MentionsEditor.tsx
@@ -58,11 +58,9 @@ const stateReducer = (state: MentionsEditorState, action: MentionsEditorAction)
   }
 };
 
-const MentionsEditor: React.FunctionComponent<
-  MentionsContainerProps & {
-    children: (props: MentionsContainerProps) => React.ReactNode;
-  }
-> = props => {
+const MentionsEditor: React.FunctionComponent<React.PropsWithChildren<MentionsContainerProps & {
+  children: (props: MentionsContainerProps) => React.ReactNode;
+}>> = props => {
   const { children, ...rest } = props;
   const contendEditableRef = React.useRef(null);
   const [state, dispatch] = React.useReducer(stateReducer, {
@@ -130,6 +128,7 @@ const MentionsEditor: React.FunctionComponent<
   return (
     <>
       <div contentEditable ref={contendEditableRef} onInput={handleEditorKeyChange} style={editorStyle} />
+
       <PortalAtCursorPosition open={state.open}>
         {children({
           items: atMentionItems,
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/PortalAtCursorPosition.ts b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/PortalAtCursorPosition.ts
index 5c6056d8be512..39f81001d2200 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/PortalAtCursorPosition.ts
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/PortalAtCursorPosition.ts
@@ -7,7 +7,7 @@ export interface PortalAtCursorPositionProps {
   open?: boolean;
 }
 
-export class PortalAtCursorPosition extends React.Component<PortalAtCursorPositionProps> {
+export class PortalAtCursorPosition extends React.Component<React.PropsWithChildren<PortalAtCursorPositionProps>> {
   mountNodeInstance: HTMLElement = null;
 
   static defaultProps = {
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx
index efb9a37db8a55..30774cb3ead0d 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/mentions/index.tsx
@@ -10,6 +10,7 @@ export default () => (
       title="Editable Area with Dropdown"
       description="Type text into editable area below. Use the '@' key to mention people."
     >
+      {/* @ts-expect-error TODO */}
       <MentionsEditor children={props => <MentionsDropdown {...props} />} />
     </ComponentPrototype>
   </PrototypeSection>
diff --git a/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx b/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx
index 3fc78d0bc045d..a33d50580cc51 100644
--- a/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx
+++ b/packages/fluentui/react-northstar-prototypes/src/prototypes/table/ResponsiveTableContainer.tsx
@@ -10,7 +10,7 @@ interface ResponsiveTableProps extends TableProps {
   id?: string;
 }
 
-const ResponsiveTableContainer: React.FC<ResponsiveTableProps> = props => {
+const ResponsiveTableContainer: React.FC<React.PropsWithChildren<ResponsiveTableProps>> = props => {
   const { columns: config, children } = props;
 
   const responsiveTableID = React.useMemo(
diff --git a/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts b/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts
index 18af200e96886..b6d66d8f75ab5 100644
--- a/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts
+++ b/packages/fluentui/react-northstar-styles-renderer/src/noopRenderer.ts
@@ -3,7 +3,7 @@ import { Renderer } from './types';
 
 // Provides a minimal functionality to render components without styles and without runtime errors.
 
-const NoopProvider: React.FC = props => React.createElement(React.Fragment, null, props.children);
+const NoopProvider: React.FC<React.PropsWithChildren<unknown>> = props => React.createElement(React.Fragment, null, props.children);
 
 export const noopRenderer: Renderer = {
   registerUsage: () => {},
diff --git a/packages/fluentui/react-northstar-styles-renderer/src/types.ts b/packages/fluentui/react-northstar-styles-renderer/src/types.ts
index 5f1fea7afcca5..7d6f869df9d44 100644
--- a/packages/fluentui/react-northstar-styles-renderer/src/types.ts
+++ b/packages/fluentui/react-northstar-styles-renderer/src/types.ts
@@ -20,7 +20,7 @@ export type Renderer = {
   renderFont: RendererRenderFont;
   renderRule: RendererRenderRule;
 
-  Provider: React.FC<{ target: Document | undefined }>;
+  Provider: React.FC<React.PropsWithChildren<{ target: Document | undefined }>>;
 };
 
 export type CreateRenderer = (target?: Document) => Renderer;
diff --git a/packages/fluentui/react-northstar/package.json b/packages/fluentui/react-northstar/package.json
index 299e933173536..ec60eff63898b 100644
--- a/packages/fluentui/react-northstar/package.json
+++ b/packages/fluentui/react-northstar/package.json
@@ -25,7 +25,7 @@
     "downshift": "5.0.5",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
-    "react-is": "^17.0.2",
+    "react-is": "^18.3.1",
     "react-transition-group": "^4.4.1"
   },
   "devDependencies": {
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
index 7566783775ff2..234f4e2d53ae2 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/Accordion.tsx
@@ -321,6 +321,7 @@ export const Accordion = React.forwardRef<HTMLDListElement, AccordionProps>((pro
 
 Accordion.displayName = 'Accordion';
 
+// @ts-expect-error React 18
 Accordion.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
index 98e9116a27adc..25deec672f240 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionContent.tsx
@@ -112,6 +112,7 @@ AccordionContent.shorthandConfig = {
   mappedProp: 'content',
 };
 
+// @ts-expect-error React 18
 AccordionContent.propTypes = {
   ...commonPropTypes.createCommon(),
   accordionTitleId: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
index 1c506150e52b3..4d4e0a2c8d373 100644
--- a/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Accordion/AccordionTitle.tsx
@@ -228,6 +228,7 @@ AccordionTitle.shorthandConfig = {
   mappedProp: 'content',
 };
 
+// @ts-expect-error React 18
 AccordionTitle.propTypes = {
   ...commonPropTypes.createCommon({ content: 'shorthand' }),
   accordionContentId: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
index 4dc6b2de62517..9500080eec34e 100644
--- a/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
+++ b/packages/fluentui/react-northstar/src/components/Alert/Alert.tsx
@@ -123,7 +123,7 @@ export const alertSlotClassNames: AlertSlotClassNames = {
  * @accessibility
  * Implements [ARIA Alert](https://www.w3.org/TR/wai-aria-practices-1.1/#alert) design pattern.
  */
-export const Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+export const Alert = React.forwardRef<HTMLDivElement, React.PropsWithChildren<AlertProps>>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Alert.displayName, context.telemetry);
   setStart();
diff --git a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
index 2342c07d97980..5d6e2c47a7b12 100644
--- a/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Alert/AlertDismissAction.tsx
@@ -187,6 +187,7 @@ AlertDismissAction.defaultProps = {
 
 AlertDismissAction.displayName = 'AlertDismissAction';
 
+// @ts-expect-error React 18
 AlertDismissAction.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx b/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx
index 402e376b1ca5d..0890ddaa63401 100644
--- a/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx
+++ b/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx
@@ -175,7 +175,10 @@ export const Animation = React.forwardRef<HTMLDivElement, AnimationProps>((props
   }
 
   const isChildrenFunction = typeof children === 'function';
-  const child = childrenExist(children) && !isChildrenFunction && (React.Children.only(children) as React.ReactElement);
+  const child =
+    childrenExist(children as React.ReactNode) &&
+    !isChildrenFunction &&
+    (React.Children.only(children) as React.ReactElement);
 
   const element = (
     <Transition
@@ -224,6 +227,8 @@ Animation.propTypes = {
     content: false,
     children: false,
   }),
+
+  // @ts-expect-error React 18
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   name: PropTypes.string,
   delay: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx b/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
index 99eaba548b8b0..0f1103036cc10 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/Attachment.tsx
@@ -231,6 +231,7 @@ export const Attachment = compose<'div', AttachmentProps, AttachmentStylesProps,
 
 Attachment.create = createShorthandFactory({ Component: Attachment, mappedProp: 'header' });
 
+// @ts-expect-error React 18
 Attachment.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentAction.tsx b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentAction.tsx
index 37f8424b83f56..f0d9819e8870c 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentAction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentAction.tsx
@@ -49,6 +49,7 @@ AttachmentAction.defaultProps = {
   accessibility: buttonBehavior,
   as: 'button',
 };
+// @ts-expect-error React 18
 AttachmentAction.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentBody.tsx b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentBody.tsx
index 1a9ae4b574e88..230daf4d188be 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentBody.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentBody.tsx
@@ -28,4 +28,5 @@ export const AttachmentBody = compose<
   },
 });
 
+// @ts-expect-error React 18
 AttachmentBody.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentDescription.tsx b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentDescription.tsx
index 04988a8bd44dc..9a8685260cbfb 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentDescription.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentDescription.tsx
@@ -30,4 +30,5 @@ export const AttachmentDescription = compose<
 AttachmentDescription.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 AttachmentDescription.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentHeader.tsx b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentHeader.tsx
index 23c1b2e9069ed..e35f0b61deebb 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentHeader.tsx
@@ -30,4 +30,5 @@ export const AttachmentHeader = compose<
 AttachmentHeader.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 AttachmentHeader.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentIcon.tsx b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentIcon.tsx
index 96f3332f4cba1..2dccbeed587ee 100644
--- a/packages/fluentui/react-northstar/src/components/Attachment/AttachmentIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Attachment/AttachmentIcon.tsx
@@ -30,4 +30,5 @@ export const AttachmentIcon = compose<
 AttachmentIcon.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 AttachmentIcon.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
index ca49b98ede488..e880e434af5b4 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarIcon.tsx
@@ -80,6 +80,7 @@ export const AvatarIcon = React.forwardRef<HTMLSpanElement, AvatarIconProps>((pr
   FluentComponentStaticProps<AvatarIconProps>;
 
 AvatarIcon.displayName = 'AvatarIcon';
+// @ts-expect-error React 18
 AvatarIcon.propTypes = {
   ...commonPropTypes.createCommon(),
   square: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
index 31dfd05b734c8..011a8f58cee49 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarLabel.tsx
@@ -94,6 +94,7 @@ export const AvatarLabel = React.forwardRef<HTMLSpanElement, AvatarLabelProps>((
 
 AvatarLabel.displayName = 'AvatarLabel';
 
+// @ts-expect-error React 18
 AvatarLabel.propTypes = {
   ...commonPropTypes.createCommon(),
   square: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
index bb163eb80e713..64625c842d5f1 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusIcon.tsx
@@ -32,43 +32,47 @@ export const avatarStatusIconClassName = 'ui-avatar__statusicon';
 /**
  * A AvatarStatusIcon provides a status icon for the Avatar.
  */
-export const AvatarStatusIcon = React.forwardRef<HTMLSpanElement, AvatarStatusIconProps>((props, ref) => {
-  const context = useFluentContext();
-  const { setStart, setEnd } = useTelemetry(AvatarStatusIcon.displayName, context.telemetry);
-  setStart();
+export const AvatarStatusIcon = React.forwardRef<HTMLSpanElement, React.PropsWithChildren<AvatarStatusIconProps>>(
+  (props, ref) => {
+    const context = useFluentContext();
+    const { setStart, setEnd } = useTelemetry(AvatarStatusIcon.displayName, context.telemetry);
+    setStart();
 
-  const { children, className, design, size, state, styles, variables } = props;
+    const { children, className, design, size, state, styles, variables } = props;
 
-  const { classes } = useStyles<AvatarStatusIconStylesProps>(AvatarStatusIcon.displayName, {
-    className: avatarStatusIconClassName,
-    mapPropsToStyles: () => ({
-      size,
-      state,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  });
+    const { classes } = useStyles<AvatarStatusIconStylesProps>(AvatarStatusIcon.displayName, {
+      className: avatarStatusIconClassName,
+      mapPropsToStyles: () => ({
+        size,
+        state,
+      }),
+      mapPropsToInlineStyles: () => ({
+        className,
+        design,
+        styles,
+        variables,
+      }),
+      rtl: context.rtl,
+    });
 
-  const getA11Props = useAccessibility(props.accessibility, {
-    debugName: AvatarStatusIcon.displayName,
-    rtl: context.rtl,
-  });
+    const getA11Props = useAccessibility(props.accessibility, {
+      debugName: AvatarStatusIcon.displayName,
+      rtl: context.rtl,
+    });
 
-  const ElementType = getElementType(props);
-  const unhandledProps = useUnhandledProps(AvatarStatusIcon.handledProps, props);
+    const ElementType = getElementType(props);
+    const unhandledProps = useUnhandledProps(AvatarStatusIcon.handledProps, props);
 
-  const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>{children}</ElementType>
-  );
-  setEnd();
+    const element = (
+      <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+        {children}
+      </ElementType>
+    );
+    setEnd();
 
-  return element;
-}) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarStatusIconProps> & FluentComponentStaticProps;
+    return element;
+  },
+) as unknown as ForwardRefWithAs<'span', HTMLSpanElement, AvatarStatusIconProps> & FluentComponentStaticProps;
 
 AvatarStatusIcon.displayName = 'AvatarStatusIcon';
 AvatarStatusIcon.propTypes = {
diff --git a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
index c23c418e1224b..495299096d398 100644
--- a/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Avatar/AvatarStatusImage.tsx
@@ -33,42 +33,46 @@ export const avatarStatusImageClassName = 'ui-avatar__statusimage';
 /**
  * A AvatarStatusImage provides a status image for the Avatar.
  */
-export const AvatarStatusImage = React.forwardRef<HTMLImageElement, AvatarStatusImageProps>((props, ref) => {
-  const context = useFluentContext();
-  const { setStart, setEnd } = useTelemetry(AvatarStatusImage.displayName, context.telemetry);
-  setStart();
-
-  const { children, className, design, size, styles, variables } = props;
-
-  const { classes } = useStyles<AvatarStatusImageStylesProps>(AvatarStatusImage.displayName, {
-    className: avatarStatusImageClassName,
-    mapPropsToStyles: () => ({
-      size,
-    }),
-    mapPropsToInlineStyles: () => ({
-      className,
-      design,
-      styles,
-      variables,
-    }),
-    rtl: context.rtl,
-  });
-
-  const getA11Props = useAccessibility(props.accessibility, {
-    debugName: AvatarStatusImage.displayName,
-    rtl: context.rtl,
-  });
-
-  const ElementType = getElementType(props);
-  const unhandledProps = useUnhandledProps(AvatarStatusImage.handledProps, props);
-
-  const element = (
-    <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>{children}</ElementType>
-  );
-  setEnd();
-
-  return element;
-}) as unknown as ForwardRefWithAs<'img', HTMLImageElement, AvatarStatusImageProps> &
+export const AvatarStatusImage = React.forwardRef<HTMLImageElement, React.PropsWithChildren<AvatarStatusImageProps>>(
+  (props, ref) => {
+    const context = useFluentContext();
+    const { setStart, setEnd } = useTelemetry(AvatarStatusImage.displayName, context.telemetry);
+    setStart();
+
+    const { children, className, design, size, styles, variables } = props;
+
+    const { classes } = useStyles<AvatarStatusImageStylesProps>(AvatarStatusImage.displayName, {
+      className: avatarStatusImageClassName,
+      mapPropsToStyles: () => ({
+        size,
+      }),
+      mapPropsToInlineStyles: () => ({
+        className,
+        design,
+        styles,
+        variables,
+      }),
+      rtl: context.rtl,
+    });
+
+    const getA11Props = useAccessibility(props.accessibility, {
+      debugName: AvatarStatusImage.displayName,
+      rtl: context.rtl,
+    });
+
+    const ElementType = getElementType(props);
+    const unhandledProps = useUnhandledProps(AvatarStatusImage.handledProps, props);
+
+    const element = (
+      <ElementType {...getA11Props('root', { className: classes.root, ref, ...unhandledProps })}>
+        {children}
+      </ElementType>
+    );
+    setEnd();
+
+    return element;
+  },
+) as unknown as ForwardRefWithAs<'img', HTMLImageElement, AvatarStatusImageProps> &
   FluentComponentStaticProps<AvatarStatusImageProps>;
 
 AvatarStatusImage.displayName = 'AvatarStatusImage';
@@ -87,6 +91,7 @@ AvatarStatusImage.shorthandConfig = {
   allowsJSX: false,
   mappedProp: 'src',
 };
+
 AvatarStatusImage.create = createShorthandFactory({
   allowsJSX: false,
   Component: AvatarStatusImage,
diff --git a/packages/fluentui/react-northstar/src/components/Box/Box.tsx b/packages/fluentui/react-northstar/src/components/Box/Box.tsx
index e1ca8d8816f6c..12b8cf324f2fc 100644
--- a/packages/fluentui/react-northstar/src/components/Box/Box.tsx
+++ b/packages/fluentui/react-northstar/src/components/Box/Box.tsx
@@ -86,5 +86,6 @@ export const Box = compose<'div', BoxProps, BoxStylesProps, {}, {}>(
   },
 ) as ComponentWithAs<'div', BoxProps> & { create: ShorthandFactory<BoxProps> };
 
+// @ts-expect-error React 18
 Box.propTypes = commonPropTypes.createCommon();
 Box.create = createShorthandFactory({ Component: Box });
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
index 7a138f3dddefc..655c9d4fe9167 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/Breadcrumb.tsx
@@ -129,6 +129,7 @@ Breadcrumb.defaultProps = {
   accessibility: breadcrumbBehavior,
 };
 
+// @ts-expect-error React 18
 Breadcrumb.propTypes = {
   ...commonPropTypes.createCommon(),
   size: PropTypes.oneOf(['smaller', 'small', 'medium', 'large']),
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
index a988f343642c3..5be826cdfbb3b 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbDivider.tsx
@@ -84,4 +84,5 @@ BreadcrumbDivider.defaultProps = {
   accessibility: breadcrumbDividerBehavior,
 };
 
+// @ts-expect-error React 18
 BreadcrumbDivider.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
index a2227b3024bde..0a86369e46e00 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -107,4 +107,5 @@ BreadcrumbItem.defaultProps = {
   accessibility: breadcrumbItemBehavior,
 };
 
+// @ts-expect-error React 18
 BreadcrumbItem.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
index a69bf614f2dbf..dabb4c61060d7 100644
--- a/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
+++ b/packages/fluentui/react-northstar/src/components/Breadcrumb/BreadcrumbLink.tsx
@@ -88,4 +88,5 @@ BreadcrumbLink.defaultProps = {
   as: 'a',
 };
 
+// @ts-expect-error React 18
 BreadcrumbLink.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Button/Button.tsx b/packages/fluentui/react-northstar/src/components/Button/Button.tsx
index 7adb12eb84d7a..f55452a06064b 100644
--- a/packages/fluentui/react-northstar/src/components/Button/Button.tsx
+++ b/packages/fluentui/react-northstar/src/components/Button/Button.tsx
@@ -345,6 +345,7 @@ Button.defaultProps = {
   size: 'medium',
 };
 
+// @ts-expect-error React 18
 Button.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Button/ButtonContent.tsx b/packages/fluentui/react-northstar/src/components/Button/ButtonContent.tsx
index 0756d0586f9c6..44d0d892dc42f 100644
--- a/packages/fluentui/react-northstar/src/components/Button/ButtonContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Button/ButtonContent.tsx
@@ -30,6 +30,7 @@ export const ButtonContent = compose<'span', ButtonContentProps, ButtonContentSt
 ButtonContent.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 ButtonContent.propTypes = {
   ...commonPropTypes.createCommon(),
   size: customPropTypes.size,
diff --git a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
index 81ce3426131fc..164aee3c8858b 100644
--- a/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Button/ButtonGroup.tsx
@@ -122,6 +122,7 @@ export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>((p
 
 ButtonGroup.displayName = 'ButtonGroup';
 
+// @ts-expect-error React 18
 ButtonGroup.propTypes = {
   ...commonPropTypes.createCommon(),
   buttons: customPropTypes.collectionShorthand,
diff --git a/packages/fluentui/react-northstar/src/components/Card/Card.tsx b/packages/fluentui/react-northstar/src/components/Card/Card.tsx
index 2c90f69da015a..7d39f6862ddd6 100644
--- a/packages/fluentui/react-northstar/src/components/Card/Card.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/Card.tsx
@@ -211,6 +211,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
 
 Card.displayName = 'Card';
 
+// @ts-expect-error React 18
 Card.propTypes = {
   ...commonPropTypes.createCommon(),
   onClick: PropTypes.func,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
index ee1d62b8bac44..e36cf02870342 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardBody.tsx
@@ -71,6 +71,7 @@ export const CardBody = React.forwardRef<HTMLDivElement, CardBodyProps>((props,
 
 CardBody.displayName = 'CardBody';
 
+// @ts-expect-error React 18
 CardBody.propTypes = {
   ...commonPropTypes.createCommon(),
   fitted: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
index 1a2bb928df671..d87c3425cfef5 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardColumn.tsx
@@ -66,6 +66,7 @@ export const CardColumn = React.forwardRef<HTMLDivElement, CardColumnProps>((pro
 
 CardColumn.displayName = 'CardColumn';
 
+// @ts-expect-error React 18
 CardColumn.propTypes = {
   ...commonPropTypes.createCommon(),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardExpandableBox.tsx b/packages/fluentui/react-northstar/src/components/Card/CardExpandableBox.tsx
index fe24ac8a367a0..244b9e9c47f8d 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardExpandableBox.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardExpandableBox.tsx
@@ -26,4 +26,5 @@ export const CardExpandableBox = compose<
   },
 });
 
+// @ts-expect-error React 18
 CardExpandableBox.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
index bd7bc6842632b..93a47bb6f2a67 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardFooter.tsx
@@ -71,6 +71,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
 
 CardFooter.displayName = 'CardFooter';
 
+// @ts-expect-error React 18
 CardFooter.propTypes = {
   ...commonPropTypes.createCommon(),
   fitted: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
index 883d8c18cb59d..a0a92002d4ad3 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardHeader.tsx
@@ -72,6 +72,7 @@ export const CardHeader = React.forwardRef<HTMLDivElement, CardHeaderProps>((pro
 
 CardHeader.displayName = 'CardHeader';
 
+// @ts-expect-error React 18
 CardHeader.propTypes = {
   ...commonPropTypes.createCommon(),
   fitted: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
index 8ef8d69842855..ada4023df20dd 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardPreview.tsx
@@ -76,6 +76,7 @@ export const CardPreview = React.forwardRef<HTMLDivElement, CardPreviewProps>((p
 
 CardPreview.displayName = 'CardPreview';
 
+// @ts-expect-error React 18
 CardPreview.propTypes = {
   ...commonPropTypes.createCommon(),
   horizontal: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
index 1d3d3ae887aca..44653f40ef87b 100644
--- a/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
+++ b/packages/fluentui/react-northstar/src/components/Card/CardTopControls.tsx
@@ -68,6 +68,7 @@ export const CardTopControls = React.forwardRef<HTMLDivElement, CardTopControlsP
 
 CardTopControls.displayName = 'CardTopControls';
 
+// @ts-expect-error React 18
 CardTopControls.propTypes = {
   ...commonPropTypes.createCommon(),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
index 9e12a8ef6df32..90b739dd27b45 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/Carousel.tsx
@@ -535,6 +535,7 @@ export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>((props,
 
 Carousel.displayName = 'Carousel';
 
+// @ts-expect-error React 18
 Carousel.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
index 981e0a7a3dab3..fa585538078d3 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselItem.tsx
@@ -127,6 +127,7 @@ export const CarouselItem = React.forwardRef<HTMLDivElement, CarouselItemProps>(
 
 CarouselItem.displayName = 'CarouselItem';
 
+// @ts-expect-error React 18
 CarouselItem.propTypes = {
   ...commonPropTypes.createCommon(),
   active: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
index d35d674694171..9e16fbda65d63 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigation.tsx
@@ -167,6 +167,7 @@ export const CarouselNavigation = React.forwardRef<HTMLUListElement, CarouselNav
 
 CarouselNavigation.displayName = 'CarouselNavigation';
 
+// @ts-expect-error React 18
 CarouselNavigation.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
index 372026ed22f22..af805a674b2c0 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselNavigationItem.tsx
@@ -200,6 +200,7 @@ export const CarouselNavigationItem = React.forwardRef<HTMLLIElement, CarouselNa
 
 CarouselNavigationItem.displayName = 'CarouselNavigationItem';
 
+// @ts-expect-error React 18
 CarouselNavigationItem.propTypes = {
   ...commonPropTypes.createCommon(),
   active: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
index 151153f7835cf..222ec10d5ca6a 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddle.tsx
@@ -182,6 +182,7 @@ CarouselPaddle.defaultProps = {
 
 CarouselPaddle.displayName = 'CarouselPaddle';
 
+// @ts-expect-error React 18
 CarouselPaddle.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
index 51cb62e1fda56..0ad0a2919c550 100644
--- a/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
+++ b/packages/fluentui/react-northstar/src/components/Carousel/CarouselPaddlesContainer.tsx
@@ -69,6 +69,7 @@ export const CarouselPaddlesContainer = React.forwardRef<HTMLDivElement, Carouse
   FluentComponentStaticProps<CarouselPaddlesContainerProps>;
 
 CarouselPaddlesContainer.displayName = 'CarouselPaddlesContainer';
+// @ts-expect-error React 18
 CarouselPaddlesContainer.propTypes = {
   ...commonPropTypes.createCommon(),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
index 2be2a3b043b4f..d20efad029fae 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/Chat.tsx
@@ -129,6 +129,7 @@ Chat.defaultProps = {
   as: 'ul',
   density: defaultChatDensity,
 };
+// @ts-expect-error React 18
 Chat.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
index 87bcc43c9f152..9cf66f240f0b6 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatItem.tsx
@@ -170,6 +170,7 @@ ChatItem.defaultProps = {
   contentPosition: 'start',
   attached: false,
 };
+// @ts-expect-error React 18
 ChatItem.propTypes = {
   ...commonPropTypes.createCommon({ content: false }),
   attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom'])]),
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
index dbae33af93677..0c35b82cfbefa 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessage.tsx
@@ -761,10 +761,12 @@ ChatMessage.propTypes = {
   unstable_overflow: PropTypes.bool,
   unstable_layout: PropTypes.oneOf(['default', 'refresh']),
   failed: PropTypes.bool,
+  // @ts-expect-error React 18
   headerContent: PropTypes.node,
   body: customPropTypes.itemShorthand,
   bubble: customPropTypes.itemShorthand,
   bubbleInset: customPropTypes.itemShorthand,
+  // @ts-expect-error React 18
   bubbleInsetContent: PropTypes.node,
 };
 
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageContent.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageContent.tsx
index 8ca7fc7fdc1e3..98c120ba82441 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageContent.tsx
@@ -45,6 +45,7 @@ export const ChatMessageContent = compose<
   shorthandConfig: { mappedProp: 'content' },
 });
 
+// @ts-expect-error React 18
 ChatMessageContent.propTypes = {
   ...commonPropTypes.createCommon(),
   badgePosition: PropTypes.oneOf(['start', 'end']),
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageDetails.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageDetails.tsx
index 8eaca0f75cfaa..0126c0e85544e 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageDetails.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageDetails.tsx
@@ -44,6 +44,7 @@ export const ChatMessageDetails = compose<
   shorthandConfig: { mappedProp: 'content' },
 });
 
+// @ts-expect-error React 18
 ChatMessageDetails.propTypes = {
   ...commonPropTypes.createCommon(),
   attached: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'top' | 'bottom'>(['top', 'bottom'])]),
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageHeader.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageHeader.tsx
index 2cfc485e4884c..b58f8d0fad96c 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageHeader.tsx
@@ -27,4 +27,5 @@ export const ChatMessageHeader = compose<
   overrideStyles: true,
 });
 
+// @ts-expect-error React 18
 ChatMessageHeader.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageReadStatus.tsx b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageReadStatus.tsx
index 96c511ee1c988..9338fc90a8783 100644
--- a/packages/fluentui/react-northstar/src/components/Chat/ChatMessageReadStatus.tsx
+++ b/packages/fluentui/react-northstar/src/components/Chat/ChatMessageReadStatus.tsx
@@ -33,6 +33,7 @@ export const ChatMessageReadStatus = compose<
   shorthandConfig: { mappedProp: 'content' },
 });
 
+// @ts-expect-error React 18
 ChatMessageReadStatus.propTypes = {
   ...commonPropTypes.createCommon(),
   density: PropTypes.oneOf<ChatDensity>(['comfy', 'compact']),
diff --git a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
index 21c38487519df..13810e1e4d7f2 100644
--- a/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
+++ b/packages/fluentui/react-northstar/src/components/Checkbox/Checkbox.tsx
@@ -200,6 +200,7 @@ Checkbox.defaultProps = {
   indicator: {},
   labelPosition: 'end',
 };
+// @ts-expect-error React 18
 Checkbox.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
index 29217891bb552..3d44c61a5e4cc 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendar.tsx
@@ -389,16 +389,19 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
           },
         }),
       })}
+      {/* @ts-expect-error TODO */}
       {createShorthand(DatepickerCalendarGrid, calendarGrid, {
         defaultProps: () =>
           getA11yProps('calendarGrid', {
             content: (
               <>
                 <thead>
+                  {/* @ts-expect-error TODO */}
                   {createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
                     defaultProps: () =>
                       getA11yProps('calendarGridRow', {
                         children: _.times(DAYS_IN_WEEK, dayNumber =>
+                          // @ts-expect-error TODO
                           createShorthand(DatepickerCalendarHeaderCell, calendarHeaderCell, {
                             defaultProps: () =>
                               getA11yProps('calendarHeaderCell', {
@@ -413,6 +416,7 @@ export const DatepickerCalendar = React.forwardRef<HTMLDivElement, DatepickerCal
                 </thead>
                 <tbody>
                   {_.map(visibleGrid, week =>
+                    // @ts-expect-error TODO
                     createShorthand(DatepickerCalendarGridRow, calendarGridRow, {
                       defaultProps: () =>
                         getA11yProps('calendarGridRow', {
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGrid.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGrid.tsx
index 1a9b5c0b9c073..3e94157cd4913 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGrid.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGrid.tsx
@@ -29,4 +29,5 @@ DatepickerCalendarGrid.defaultProps = {
   as: 'table',
 };
 
+// @ts-expect-error React 18
 DatepickerCalendarGrid.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGridRow.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGridRow.tsx
index e13c4db0e5767..cf71987f2a285 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGridRow.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarGridRow.tsx
@@ -37,4 +37,5 @@ DatepickerCalendarGridRow.defaultProps = {
   as: 'tr',
 };
 
+// @ts-expect-error React 18
 DatepickerCalendarGridRow.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeaderCell.tsx b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeaderCell.tsx
index 25212b665d1d0..c006594d4f123 100644
--- a/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeaderCell.tsx
+++ b/packages/fluentui/react-northstar/src/components/Datepicker/DatepickerCalendarHeaderCell.tsx
@@ -29,4 +29,5 @@ DatepickerCalendarHeaderCell.defaultProps = {
   as: 'th',
 };
 
+// @ts-expect-error React 18
 DatepickerCalendarHeaderCell.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugComponentViewer.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugComponentViewer.tsx
index 6e018a5c8acc6..6ad246dc23a89 100644
--- a/packages/fluentui/react-northstar/src/components/Debug/DebugComponentViewer.tsx
+++ b/packages/fluentui/react-northstar/src/components/Debug/DebugComponentViewer.tsx
@@ -20,7 +20,7 @@ const style: React.CSSProperties = {
   fontWeight: 'bold',
 };
 
-export const DebugComponentViewer: React.FC<DebugComponentViewerProps> = props => {
+export const DebugComponentViewer: React.FC<React.PropsWithChildren<DebugComponentViewerProps>> = props => {
   const { fiberNav, onFiberChanged, onFiberSelected } = props;
 
   const ownerNav = fiberNav.owner || ({ jsxString: 'unknown' } as FiberNavigator);
diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugLine.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugLine.tsx
index 2cc8136e1cf7f..a05d957096970 100644
--- a/packages/fluentui/react-northstar/src/components/Debug/DebugLine.tsx
+++ b/packages/fluentui/react-northstar/src/components/Debug/DebugLine.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const DebugLine: React.FC<{
+export const DebugLine: React.FC<React.PropsWithChildren<{
   [key: string]: any;
   children: React.ReactNode;
   active?: boolean;
@@ -8,7 +8,7 @@ export const DebugLine: React.FC<{
   style?: React.CSSProperties;
   badge?: string;
   actionable?: boolean;
-}> = ({ active, indent = 0, actionable, children, style, badge, ...rest }) => (
+}>> = ({ active, indent = 0, actionable, children, style, badge, ...rest }) => (
   <a
     style={{
       display: 'flex',
diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugPanel.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugPanel.tsx
index 3b756b8b405f4..2cfa6b42728bd 100644
--- a/packages/fluentui/react-northstar/src/components/Debug/DebugPanel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Debug/DebugPanel.tsx
@@ -25,7 +25,7 @@ export type DebugPanelProps = {
   onFiberSelected: (fiberNav: FiberNavigator) => void;
 };
 
-export const DebugPanel: React.FC<DebugPanelProps> = props => {
+export const DebugPanel: React.FC<React.PropsWithChildren<DebugPanelProps>> = props => {
   const {
     cssStyles,
     debugData: inputDebugData,
diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugPanelData.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugPanelData.tsx
index 18b55267d8aef..94866adf13b03 100644
--- a/packages/fluentui/react-northstar/src/components/Debug/DebugPanelData.tsx
+++ b/packages/fluentui/react-northstar/src/components/Debug/DebugPanelData.tsx
@@ -10,7 +10,7 @@ interface DebugPanelDataProps {
   commentKeyPredicate?: (val: any) => boolean;
 }
 
-export const DebugPanelData: React.FC<DebugPanelDataProps> = props => {
+export const DebugPanelData: React.FC<React.PropsWithChildren<DebugPanelDataProps>> = props => {
   const { data, indent = 2, highlightKey, overrides, comments, commentKeyPredicate } = props;
 
   const isValidComment = typeof comments === 'string' && commentKeyPredicate && commentKeyPredicate(comments);
diff --git a/packages/fluentui/react-northstar/src/components/Debug/DebugPanelItem.tsx b/packages/fluentui/react-northstar/src/components/Debug/DebugPanelItem.tsx
index fda222ab9a27f..13954affc1dea 100644
--- a/packages/fluentui/react-northstar/src/components/Debug/DebugPanelItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Debug/DebugPanelItem.tsx
@@ -11,7 +11,7 @@ interface DebugPanelItemProps {
   commentKeyPredicate?: (val: any) => boolean;
 }
 
-export const DebugPanelItem: React.FC<DebugPanelItemProps> = props => {
+export const DebugPanelItem: React.FC<React.PropsWithChildren<DebugPanelItemProps>> = props => {
   const [value, setValue] = React.useState('');
   const { data: propData, valueKey, commentKey, commentKeyPredicate, idKey } = props;
 
diff --git a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
index 0ec8e127b962d..3e179c8dd757a 100644
--- a/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
+++ b/packages/fluentui/react-northstar/src/components/Dialog/DialogFooter.tsx
@@ -67,6 +67,7 @@ export const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(
 
 DialogFooter.displayName = 'DialogFooter';
 
+// @ts-expect-error React 18
 DialogFooter.propTypes = {
   ...commonPropTypes.createCommon(),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
index 7f69b6ed828a2..904523a415284 100644
--- a/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Divider/Divider.tsx
@@ -91,7 +91,7 @@ export const Divider = React.forwardRef<HTMLDivElement, DividerProps>((props, re
     rtl: context.rtl,
   });
 
-  const content = createShorthand(DividerContent, props.content, {});
+  const content = createShorthand(DividerContent, props.content as React.ReactElement, {});
 
   const element = (
     <ElementType
@@ -114,6 +114,7 @@ export const Divider = React.forwardRef<HTMLDivElement, DividerProps>((props, re
 
 Divider.displayName = 'Divider';
 
+// @ts-expect-error React 18
 Divider.propTypes = {
   ...commonPropTypes.createCommon({ color: true }),
   fitted: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Divider/DividerContent.tsx b/packages/fluentui/react-northstar/src/components/Divider/DividerContent.tsx
index a7d175cc01af4..eea1e4165bc66 100644
--- a/packages/fluentui/react-northstar/src/components/Divider/DividerContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Divider/DividerContent.tsx
@@ -23,4 +23,5 @@ export const DividerContent = compose<
   overrideStyles: true,
 });
 
+// @ts-expect-error React 18
 DividerContent.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx
index 0204e3a7f4a6d..63b67d90602d1 100644
--- a/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx
+++ b/packages/fluentui/react-northstar/src/components/Flex/Flex.tsx
@@ -127,6 +127,7 @@ export const Flex = React.forwardRef<HTMLDivElement, FlexProps>((props, ref) =>
 
 Flex.displayName = 'Flex';
 
+// @ts-expect-error React 18
 Flex.propTypes = {
   ...commonPropTypes.createCommon({
     accessibility: false,
diff --git a/packages/fluentui/react-northstar/src/components/Flex/FlexItem.tsx b/packages/fluentui/react-northstar/src/components/Flex/FlexItem.tsx
index 559e961d022d0..2a03e087aab0e 100644
--- a/packages/fluentui/react-northstar/src/components/Flex/FlexItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Flex/FlexItem.tsx
@@ -123,6 +123,7 @@ FlexItem.propTypes = {
     accessibility: false,
     content: false,
   }),
+  // @ts-expect-error React 18
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 
   align: PropTypes.oneOf(['auto', 'start', 'end', 'center', 'baseline', 'stretch']),
diff --git a/packages/fluentui/react-northstar/src/components/Form/Form.tsx b/packages/fluentui/react-northstar/src/components/Form/Form.tsx
index 873267d04c86c..7c5f109e0ee05 100644
--- a/packages/fluentui/react-northstar/src/components/Form/Form.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/Form.tsx
@@ -112,6 +112,7 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>((props, ref) =>
 
 Form.displayName = 'Form';
 
+// @ts-expect-error React 18
 Form.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormButton.tsx b/packages/fluentui/react-northstar/src/components/Form/FormButton.tsx
index a3ea78a7fb7d3..e65fdd8723e64 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormButton.tsx
@@ -28,6 +28,7 @@ export const FormButton = compose<'button', FormButtonProps, FormButtonStylesPro
   },
 );
 
+// @ts-expect-error React 18
 FormButton.propTypes = commonPropTypes.createCommon({
   content: false, // Should be `true`, but will be passed via unhandled props to a Button
   children: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx b/packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx
index b9d4a1119d8cf..6e17bfc918fc2 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormCheckbox.tsx
@@ -41,6 +41,7 @@ export const FormCheckbox = compose<
   }),
 });
 
+// @ts-expect-error React 18
 FormCheckbox.propTypes = commonPropTypes.createCommon({
   content: false,
   children: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
index 3dc0052052c26..15e874522a2e4 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormField.tsx
@@ -188,6 +188,7 @@ export const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>((props
 
 FormField.displayName = 'FormField';
 
+// @ts-expect-error React 18
 FormField.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
index 5cd89c47a2e9e..f6150c779fa56 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormFieldCustom.tsx
@@ -85,10 +85,12 @@ export const FormFieldCustom = React.forwardRef<HTMLDivElement, FormFieldCustomP
   );
   setEnd();
   return element;
-}) as unknown as React.FC<FormFieldCustomProps> & FluentComponentStaticProps<FormFieldCustomProps>;
+}) as unknown as React.FC<React.PropsWithChildren<FormFieldCustomProps>> &
+  FluentComponentStaticProps<FormFieldCustomProps>;
 
 FormFieldCustom.displayName = 'FormFieldCustom';
 
+// @ts-expect-error React 18
 FormFieldCustom.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormInput.tsx b/packages/fluentui/react-northstar/src/components/Form/FormInput.tsx
index c62cd911cb206..af7c981e133b5 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormInput.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormInput.tsx
@@ -42,6 +42,7 @@ export const FormInput = compose<'input', FormInputProps, FormInputStylesProps,
   },
 );
 
+// @ts-expect-error React 18
 FormInput.propTypes = commonPropTypes.createCommon({
   children: false,
   content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormLabel.tsx b/packages/fluentui/react-northstar/src/components/Form/FormLabel.tsx
index 03bf813bafd7b..98ca2a3a34b58 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormLabel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormLabel.tsx
@@ -30,4 +30,5 @@ FormLabel.defaultProps = {
   as: 'label',
 };
 
+// @ts-expect-error React 18
 FormLabel.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormMessage.tsx b/packages/fluentui/react-northstar/src/components/Form/FormMessage.tsx
index 335a01d75185b..f23cc74a44b50 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormMessage.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormMessage.tsx
@@ -31,4 +31,5 @@ export const FormMessage = compose<'span', FormMessageProps, FormMessageStylesPr
 FormMessage.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 FormMessage.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormRadioGroup.tsx b/packages/fluentui/react-northstar/src/components/Form/FormRadioGroup.tsx
index bfac0840e0377..af6c4266e68fa 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormRadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormRadioGroup.tsx
@@ -36,6 +36,7 @@ export const FormRadioGroup = compose<
   }),
 });
 
+// @ts-expect-error React 18
 FormRadioGroup.propTypes = commonPropTypes.createCommon({
   children: false,
   content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormSlider.tsx b/packages/fluentui/react-northstar/src/components/Form/FormSlider.tsx
index 4ae4d89df9812..b1c0c29e0c5b9 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormSlider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormSlider.tsx
@@ -32,6 +32,7 @@ export const FormSlider = compose<'div', FormSliderProps, FormSliderStylesProps,
   },
 );
 
+// @ts-expect-error React 18
 FormSlider.propTypes = commonPropTypes.createCommon({
   children: false,
   content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Form/FormTextArea.tsx b/packages/fluentui/react-northstar/src/components/Form/FormTextArea.tsx
index e4ce13ac636b6..85dfeb5ba024a 100644
--- a/packages/fluentui/react-northstar/src/components/Form/FormTextArea.tsx
+++ b/packages/fluentui/react-northstar/src/components/Form/FormTextArea.tsx
@@ -42,6 +42,7 @@ export const FormTextArea = compose<
   }),
 });
 
+// @ts-expect-error React 18
 FormTextArea.propTypes = commonPropTypes.createCommon({
   children: false,
   content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
index 7f5453a63f91a..65c8af473b887 100644
--- a/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
+++ b/packages/fluentui/react-northstar/src/components/Grid/Grid.tsx
@@ -89,6 +89,7 @@ export const Grid = React.forwardRef<HTMLDivElement, GridProps>((props, ref) =>
 
 Grid.displayName = 'Grid';
 
+// @ts-expect-error React 18
 Grid.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Header/Header.tsx b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
index 1fcb28e544ef3..d8dc8d09ebf53 100644
--- a/packages/fluentui/react-northstar/src/components/Header/Header.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/Header.tsx
@@ -118,6 +118,7 @@ export const Header = React.forwardRef<HTMLHeadingElement, HeaderProps>((props,
 
 Header.displayName = 'Header';
 
+// @ts-expect-error React 18
 Header.propTypes = {
   ...commonPropTypes.createCommon({ color: true }),
   description: customPropTypes.itemShorthand,
diff --git a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
index 1ff0c88764095..a09a106403683 100644
--- a/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
+++ b/packages/fluentui/react-northstar/src/components/Header/HeaderDescription.tsx
@@ -86,6 +86,7 @@ export const HeaderDescription = React.forwardRef<HTMLParagraphElement, HeaderDe
 
 HeaderDescription.displayName = 'HeaderDescription';
 
+// @ts-expect-error React 18
 HeaderDescription.propTypes = {
   ...commonPropTypes.createCommon({ color: true }),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Input/Input.tsx b/packages/fluentui/react-northstar/src/components/Input/Input.tsx
index 212c5ac23751b..4781c1264c0fb 100644
--- a/packages/fluentui/react-northstar/src/components/Input/Input.tsx
+++ b/packages/fluentui/react-northstar/src/components/Input/Input.tsx
@@ -398,6 +398,7 @@ export const Input = compose<'input', InputProps, InputStylesProps, {}, {}>(
   Label: typeof InputLabel;
 };
 
+// @ts-expect-error React 18
 Input.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Input/InputLabel.tsx b/packages/fluentui/react-northstar/src/components/Input/InputLabel.tsx
index 689e605a358e7..e9b9b45307e91 100644
--- a/packages/fluentui/react-northstar/src/components/Input/InputLabel.tsx
+++ b/packages/fluentui/react-northstar/src/components/Input/InputLabel.tsx
@@ -38,6 +38,7 @@ InputLabel.defaultProps = {
   as: 'label',
 };
 
+// @ts-expect-error React 18
 InputLabel.propTypes = {
   ...commonPropTypes.createCommon(),
   labelPosition: PropTypes.oneOf<LabelPosition>(['inline', 'above', 'inside']),
diff --git a/packages/fluentui/react-northstar/src/components/Label/Label.tsx b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
index 519a5555a375b..040f33bee4401 100644
--- a/packages/fluentui/react-northstar/src/components/Label/Label.tsx
+++ b/packages/fluentui/react-northstar/src/components/Label/Label.tsx
@@ -172,6 +172,7 @@ export const Label = React.forwardRef<HTMLSpanElement, LabelProps>((props, ref)
 
 Label.displayName = 'Label';
 
+// @ts-expect-error React 18
 Label.propTypes = {
   ...commonPropTypes.createCommon({ color: true, content: 'shorthand' }),
   circular: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/List/List.tsx b/packages/fluentui/react-northstar/src/components/List/List.tsx
index 1698b2784ec43..a99badb163492 100644
--- a/packages/fluentui/react-northstar/src/components/List/List.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/List.tsx
@@ -200,6 +200,7 @@ List.defaultProps = {
   accessibility: listBehavior,
   wrap: children => children,
 };
+// @ts-expect-error React 18
 List.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemContent.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemContent.tsx
index 799d61980d7a7..e523d91b21cbe 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemContent.tsx
@@ -33,4 +33,5 @@ export const ListItemContent = compose<
   },
 });
 
+// @ts-expect-error React 18
 ListItemContent.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemContentMedia.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemContentMedia.tsx
index 52e28c8e825d3..045bcb3527597 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemContentMedia.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemContentMedia.tsx
@@ -27,4 +27,5 @@ export const ListItemContentMedia = compose<
   },
 });
 
+// @ts-expect-error React 18
 ListItemContentMedia.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemEndMedia.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemEndMedia.tsx
index 33d1ecdae92ff..58821963b51c3 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemEndMedia.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemEndMedia.tsx
@@ -32,4 +32,5 @@ export const ListItemEndMedia = compose<
   },
 });
 
+// @ts-expect-error React 18
 ListItemEndMedia.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemHeader.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemHeader.tsx
index 42b5769543fc7..ee25649626d3f 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemHeader.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemHeader.tsx
@@ -33,4 +33,5 @@ export const ListItemHeader = compose<
   },
 });
 
+// @ts-expect-error React 18
 ListItemHeader.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemHeaderMedia.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemHeaderMedia.tsx
index 4c6dccf0d1a52..7daad4a4c001f 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemHeaderMedia.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemHeaderMedia.tsx
@@ -27,4 +27,5 @@ export const ListItemHeaderMedia = compose<
   },
 });
 
+// @ts-expect-error React 18
 ListItemHeaderMedia.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/List/ListItemMedia.tsx b/packages/fluentui/react-northstar/src/components/List/ListItemMedia.tsx
index dec70681be232..8ee4d0b182b5d 100644
--- a/packages/fluentui/react-northstar/src/components/List/ListItemMedia.tsx
+++ b/packages/fluentui/react-northstar/src/components/List/ListItemMedia.tsx
@@ -30,4 +30,5 @@ export const ListItemMedia = compose<'div', ListItemMediaOwnProps, ListItemMedia
   },
 );
 
+// @ts-expect-error React 18
 ListItemMedia.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
index da36a4953e059..e8fa1c5936437 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/Menu.tsx
@@ -363,6 +363,7 @@ export const Menu = React.forwardRef<HTMLUListElement, MenuProps>((props, ref) =
 
 Menu.displayName = 'Menu';
 
+// @ts-expect-error React 18
 Menu.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
index 00ad5358cf910..192ff3c24ae35 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuDivider.tsx
@@ -134,6 +134,7 @@ MenuDivider.defaultProps = {
 
 MenuDivider.displayName = 'MenuDivider';
 
+// @ts-expect-error React 18
 MenuDivider.propTypes = {
   ...commonPropTypes.createCommon(),
   primary: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
index 084a115961a65..9736351b0809d 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx
@@ -589,6 +589,7 @@ export const MenuItem = React.forwardRef<HTMLAnchorElement, MenuItemProps>((inpu
 
 MenuItem.displayName = 'MenuItem';
 
+// @ts-expect-error React 18
 MenuItem.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
index 48747c8002af4..0793616242f11 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemContent.tsx
@@ -108,6 +108,7 @@ MenuItemContent.defaultProps = {
   as: 'span',
 };
 
+// @ts-expect-error React 18
 MenuItemContent.propTypes = {
   ...commonPropTypes.createCommon(),
   hasIcon: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
index f181d0713b501..38d246a13c38b 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIcon.tsx
@@ -81,6 +81,7 @@ MenuItemIcon.defaultProps = {
   as: 'span',
 };
 
+// @ts-expect-error React 18
 MenuItemIcon.propTypes = {
   ...commonPropTypes.createCommon(),
   hasContent: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
index 6f7228cdd6c87..d43aaf47b98f5 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemIndicator.tsx
@@ -112,6 +112,7 @@ MenuItemIndicator.defaultProps = {
   accessibility: indicatorBehavior,
 };
 
+// @ts-expect-error React 18
 MenuItemIndicator.propTypes = {
   ...commonPropTypes.createCommon(),
   iconOnly: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
index 92f2ba06f1bd5..7b30d43077586 100644
--- a/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
+++ b/packages/fluentui/react-northstar/src/components/Menu/MenuItemWrapper.tsx
@@ -154,6 +154,7 @@ MenuItemWrapper.defaultProps = {
   as: 'li',
 };
 
+// @ts-expect-error React 18
 MenuItemWrapper.propTypes = {
   ...commonPropTypes.createCommon(),
   active: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
index 5a4a64ac977bc..d608d23a19e6c 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/Pill.tsx
@@ -119,7 +119,7 @@ export const pillClassName = 'ui-pill';
 /**
  * Pills should be used when representing an input, as a way to filter content, or to represent an attribute.
  */
-export const Pill = React.forwardRef<HTMLSpanElement, PillProps>((props, ref) => {
+export const Pill = React.forwardRef<HTMLSpanElement, React.PropsWithChildren<PillProps>>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Pill.displayName, context.telemetry);
   setStart();
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
index 4c973b69f191c..59a42e6b7478b 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillAction.tsx
@@ -81,6 +81,7 @@ export const PillAction = React.forwardRef<HTMLDivElement, PillActionProps>((pro
 
 PillAction.displayName = 'PillAction';
 
+// @ts-expect-error React 18
 PillAction.propTypes = {
   ...commonPropTypes.createCommon(),
 };
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
index 801c6b1782b16..7d0d76dfa52f8 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillContent.tsx
@@ -88,6 +88,7 @@ export const PillContent = React.forwardRef<HTMLSpanElement, PillContentProps>((
 
 PillContent.displayName = 'PillContent';
 
+// @ts-expect-error React 18
 PillContent.propTypes = {
   ...commonPropTypes.createCommon(),
   actionable: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
index e73b5d94e8e93..db4b1681959ee 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillGroup.tsx
@@ -82,6 +82,7 @@ export const PillGroup = React.forwardRef<HTMLDivElement, PillGroupProps>((props
 
 PillGroup.displayName = 'PillGroup';
 
+// @ts-expect-error React 18
 PillGroup.propTypes = commonPropTypes.createCommon();
 
 PillGroup.defaultProps = {
diff --git a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
index abdf83882e19c..ce08749f5952b 100644
--- a/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Pill/PillIcon.tsx
@@ -99,6 +99,7 @@ PillIcon.defaultProps = {
 
 PillIcon.displayName = 'PillIcon';
 
+// @ts-expect-error React 18
 PillIcon.propTypes = {
   ...commonPropTypes.createCommon(),
   selectable: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
index 81bab903d7889..2275afa39cded 100644
--- a/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Popup/Popup.tsx
@@ -141,7 +141,7 @@ export const popupClassName = 'ui-popup';
 /**
  * A Popup displays a non-modal, often rich content, on top of its target element.
  */
-export const Popup: React.FC<PopupProps> &
+export const Popup: React.FC<React.PropsWithChildren<PopupProps>> &
   FluentComponentStaticProps<PopupProps> & {
     Content: typeof PopupContent;
   } = props => {
@@ -645,6 +645,7 @@ export const Popup: React.FC<PopupProps> &
 
 Popup.displayName = 'Popup';
 
+// @ts-expect-error React 18
 Popup.propTypes = {
   ...commonPropTypes.createCommon({
     as: false,
diff --git a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
index 816abda8d25b9..d79b11bd7b477 100644
--- a/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Popup/PopupContent.tsx
@@ -160,7 +160,8 @@ export const PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(
       ...popupContentProps,
       ...((_.keys(trapFocus).length && trapFocus) as FocusTrapZoneProps),
       as: ElementType,
-    };
+    } as FocusTrapZoneProps;
+
     element = (
       <FocusTrapZone innerRef={ref} {...focusTrapZoneProps}>
         {popupContent}
@@ -171,7 +172,7 @@ export const PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(
       ...popupContentProps,
       ...((_.keys(autoFocus).length && autoFocus) as AutoFocusZoneProps),
       as: ElementType,
-    };
+    } as AutoFocusZoneProps;
     element = (
       <AutoFocusZone innerRef={ref} {...autoFocusZoneProps}>
         {popupContent}
@@ -193,6 +194,7 @@ export const PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(
 
 PopupContent.displayName = 'PopupContent';
 
+// @ts-expect-error React 18
 PopupContent.propTypes = {
   ...commonPropTypes.createCommon(),
   placement: PropTypes.oneOf<PopperJsPlacement>([
diff --git a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
index 05015b944fb9c..4fbabada63399 100644
--- a/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
+++ b/packages/fluentui/react-northstar/src/components/Portal/Portal.tsx
@@ -83,7 +83,8 @@ export interface PortalProps extends ChildrenComponentProps, ContentComponentPro
  *
  * @deprecated Please use "Popup" or "Dialog" components instead.
  */
-export const Portal: React.FC<PortalProps> & FluentComponentStaticProps<PortalProps> = props => {
+export const Portal: React.FC<React.PropsWithChildren<PortalProps>> &
+  FluentComponentStaticProps<PortalProps> = props => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(Portal.displayName, context.telemetry);
   setStart();
@@ -182,6 +183,7 @@ Portal.propTypes = {
   onMount: PropTypes.func,
   onUnmount: PropTypes.func,
   open: PropTypes.bool,
+  // @ts-expect-error React 18
   trigger: PropTypes.element,
   triggerRef: customPropTypes.ref,
   triggerAccessibility: PropTypes.object,
diff --git a/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx b/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
index ccb29e3e3efb0..1351825c76948 100644
--- a/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
+++ b/packages/fluentui/react-northstar/src/components/Portal/PortalInner.tsx
@@ -34,7 +34,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
 /**
  * A PortalInner is a container for Portal's content.
  */
-export const PortalInner: React.FC<PortalInnerProps> = props => {
+export const PortalInner: React.FC<React.PropsWithChildren<PortalInnerProps>> = props => {
   const { children, mountNode } = props;
 
   const { className } = React.useContext(PortalContext);
@@ -59,6 +59,7 @@ export const PortalInner: React.FC<PortalInnerProps> = props => {
   return container && ReactDOM.createPortal(children, container);
 };
 
+// @ts-expect-error React 18
 PortalInner.propTypes = {
   ...commonPropTypes.createCommon({
     accessibility: false,
diff --git a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
index 7add057c000c7..7b9d57b2e3a17 100644
--- a/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Provider/Provider.tsx
@@ -260,6 +260,8 @@ Provider.propTypes = {
     enableStylesCaching: PropTypes.bool,
     enableVariablesCaching: PropTypes.bool,
   }),
+
+  // @ts-expect-error React 18
   children: PropTypes.node.isRequired,
   overwrite: PropTypes.bool,
   target: PropTypes.object as PropTypes.Validator<Document>,
diff --git a/packages/fluentui/react-northstar/src/components/Provider/ProviderConsumer.tsx b/packages/fluentui/react-northstar/src/components/Provider/ProviderConsumer.tsx
index 065368472f499..15b980cd6e732 100644
--- a/packages/fluentui/react-northstar/src/components/Provider/ProviderConsumer.tsx
+++ b/packages/fluentui/react-northstar/src/components/Provider/ProviderConsumer.tsx
@@ -14,7 +14,7 @@ export interface ProviderConsumerProps {
 /**
  * A ProviderConsumer is used to consume Fluent UI context from Provider.
  */
-export const ProviderConsumer: React.FunctionComponent<ProviderConsumerProps> = props => {
+export const ProviderConsumer: React.FunctionComponent<React.PropsWithChildren<ProviderConsumerProps>> = props => {
   const { render } = props;
   const context = useFluentContext();
 
diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
index a7406574b8354..6f31eb583d78f 100644
--- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroup.tsx
@@ -212,6 +212,7 @@ export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>((pro
 
 RadioGroup.displayName = 'RadioGroup';
 
+// @ts-expect-error React 18
 RadioGroup.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
index ed668ae120785..342f54441b61e 100644
--- a/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/RadioGroup/RadioGroupItem.tsx
@@ -204,6 +204,7 @@ export const RadioGroupItem = React.forwardRef<HTMLDivElement, RadioGroupItemPro
 
 RadioGroupItem.displayName = 'RadioGroupItem';
 
+// @ts-expect-error React 18
 RadioGroupItem.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
index 302cb49686014..f40e907b59483 100644
--- a/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
+++ b/packages/fluentui/react-northstar/src/components/Reaction/Reaction.tsx
@@ -125,6 +125,7 @@ export const Reaction = React.forwardRef<HTMLSpanElement, ReactionProps>((props,
 
 Reaction.displayName = 'Reaction';
 
+// @ts-expect-error React 18
 Reaction.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
index 726098049fa3f..51392136676b7 100644
--- a/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Reaction/ReactionGroup.tsx
@@ -96,6 +96,7 @@ export const ReactionGroup = React.forwardRef<HTMLDivElement, ReactionGroupProps
 
 ReactionGroup.displayName = 'ReactionGroup';
 
+// @ts-expect-error React 18
 ReactionGroup.propTypes = {
   ...commonPropTypes.createCommon(),
   items: customPropTypes.collectionShorthand,
diff --git a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
index e1f3b046bd462..627ddbdc3f690 100644
--- a/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
+++ b/packages/fluentui/react-northstar/src/components/Segment/Segment.tsx
@@ -96,6 +96,7 @@ export const Segment = React.forwardRef<HTMLDivElement, SegmentProps>((props, re
 
 Segment.displayName = 'Segment';
 
+// @ts-expect-error React 18
 Segment.propTypes = {
   ...commonPropTypes.createCommon({
     content: 'shorthand',
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/Skeleton.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/Skeleton.tsx
index f70b91bab967d..5bc0252b43186 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/Skeleton.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/Skeleton.tsx
@@ -47,6 +47,7 @@ Skeleton.Button = SkeletonButton;
 Skeleton.Text = SkeletonText;
 Skeleton.Input = SkeletonInput;
 Skeleton.Avatar = SkeletonAvatar;
+// @ts-expect-error React 18
 Skeleton.propTypes = {
   ...commonPropTypes.createCommon({
     accessibility: false,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonAvatar.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonAvatar.tsx
index fba72b46d1b1e..9aea9523aae01 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonAvatar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonAvatar.tsx
@@ -32,6 +32,7 @@ export const SkeletonAvatar = compose<
   }),
 });
 
+// @ts-expect-error React 18
 SkeletonAvatar.propTypes = {
   ...commonPropTypes.createCommon(),
   size: customPropTypes.size,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonButton.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonButton.tsx
index ff29d154c27e5..775cae7a5ea87 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonButton.tsx
@@ -47,6 +47,7 @@ export const SkeletonButton = compose<
   }),
 });
 
+// @ts-expect-error React 18
 SkeletonButton.propTypes = {
   ...commonPropTypes.createCommon(),
   size: customPropTypes.size,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonInput.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonInput.tsx
index 6ceca8f71eca4..0ae160933f2ba 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonInput.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonInput.tsx
@@ -32,6 +32,7 @@ export const SkeletonInput = compose<
   }),
 });
 
+// @ts-expect-error React 18
 SkeletonInput.propTypes = {
   ...commonPropTypes.createCommon(),
   fluid: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonLine.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonLine.tsx
index 4989a8783d404..af31eeb2d80bd 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonLine.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonLine.tsx
@@ -27,6 +27,7 @@ export const SkeletonLine = compose<'span', SkeletonLineOwnProps, SkeletonLineSt
   },
 );
 
+// @ts-expect-error React 18
 SkeletonLine.propTypes = {
   ...commonPropTypes.createCommon(),
   width: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonShape.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonShape.tsx
index e92e642b0aa8b..cb40ded9c955a 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonShape.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonShape.tsx
@@ -28,6 +28,7 @@ export const SkeletonShape = compose<'span', SkeletonShapeOwnProps, SkeletonShap
   },
 );
 
+// @ts-expect-error React 18
 SkeletonShape.propTypes = {
   ...commonPropTypes.createCommon(),
   width: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonText.tsx b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonText.tsx
index cb4c755ba28a9..638e6ffdc4c72 100644
--- a/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonText.tsx
+++ b/packages/fluentui/react-northstar/src/components/Skeleton/SkeletonText.tsx
@@ -32,6 +32,7 @@ export const SkeletonText = compose<
   }),
 });
 
+// @ts-expect-error React 18
 SkeletonText.propTypes = {
   ...commonPropTypes.createCommon(),
   size: customPropTypes.size,
diff --git a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
index c18ea79319ada..bb669ed698b1c 100644
--- a/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Slider/Slider.tsx
@@ -275,6 +275,7 @@ Slider.defaultProps = {
   min: 0,
   step: 1,
 };
+// @ts-expect-error React 18
 Slider.propTypes = {
   ...commonPropTypes.createCommon({ content: false }),
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
index 729d9f7857bb6..2570722fc255a 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButton.tsx
@@ -290,6 +290,7 @@ SplitButton.displayName = 'SplitButton';
 
 SplitButton.Toggle = SplitButtonToggle;
 
+// @ts-expect-error React 18
 SplitButton.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
index c7f6381114436..85faf9796731c 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonDivider.tsx
@@ -84,6 +84,7 @@ export const SplitButtonDivider = React.forwardRef<HTMLDivElement, SplitButtonDi
 
 SplitButtonDivider.displayName = 'SplitButtonDivider';
 
+// @ts-expect-error React 18
 SplitButtonDivider.propTypes = {
   ...commonPropTypes.createCommon(),
   primary: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
index 05e72e34ac705..d902d23282614 100644
--- a/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
+++ b/packages/fluentui/react-northstar/src/components/SplitButton/SplitButtonToggle.tsx
@@ -158,6 +158,7 @@ SplitButtonToggle.defaultProps = {
 
 SplitButtonToggle.displayName = 'SplitButtonToggle';
 
+// @ts-expect-error React 18
 SplitButtonToggle.propTypes = {
   ...commonPropTypes.createCommon({}),
   disabled: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Table/Table.tsx b/packages/fluentui/react-northstar/src/components/Table/Table.tsx
index 18b901030c153..841270bc6fb98 100644
--- a/packages/fluentui/react-northstar/src/components/Table/Table.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/Table.tsx
@@ -166,6 +166,7 @@ Table.create = createShorthandFactory({
   Component: Table,
 });
 
+// @ts-expect-error React 18
 Table.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
index fb48141863298..85933e08a3b8e 100644
--- a/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/TableCell.tsx
@@ -121,6 +121,7 @@ export const TableCell = React.forwardRef<HTMLDivElement, TableCellProps>((props
 
 TableCell.displayName = 'TableCell';
 
+// @ts-expect-error React 18
 TableCell.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
index 061f18ab8f563..a0096d28a1fd6 100644
--- a/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
+++ b/packages/fluentui/react-northstar/src/components/Table/TableRow.tsx
@@ -53,7 +53,7 @@ export type TableRowStylesProps = Pick<TableRowProps, 'header' | 'compact'>;
 /**
  * Component represents a single row in a tabular structure
  */
-export const TableRow = React.forwardRef<HTMLDivElement, TableRowProps>((props, ref) => {
+export const TableRow = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TableRowProps>>((props, ref) => {
   const context = useFluentContext();
   const { setStart, setEnd } = useTelemetry(TableRow.displayName, context.telemetry);
   setStart();
diff --git a/packages/fluentui/react-northstar/src/components/Text/Text.tsx b/packages/fluentui/react-northstar/src/components/Text/Text.tsx
index abfa1b2fb1677..eda9496e11d42 100644
--- a/packages/fluentui/react-northstar/src/components/Text/Text.tsx
+++ b/packages/fluentui/react-northstar/src/components/Text/Text.tsx
@@ -174,6 +174,8 @@ Text.displayName = 'Text';
 Text.defaultProps = {
   as: 'span' as const,
 };
+
+// @ts-expect-error prppTypes and ts mismatch
 Text.propTypes = {
   ...commonPropTypes.createCommon({ color: true }),
   atMention: PropTypes.oneOfType<any>([PropTypes.bool, PropTypes.oneOf(['me'])]),
diff --git a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
index 7cc9681081399..f229b4f9b94db 100644
--- a/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
+++ b/packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx
@@ -136,6 +136,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((pr
 
 TextArea.displayName = 'TextArea';
 
+// @ts-expect-error React 18
 TextArea.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
index 4a7c4d3652be7..77ddb0f7b8d71 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/Toolbar.tsx
@@ -650,6 +650,7 @@ export const Toolbar = compose<'div', ToolbarProps, ToolbarStylesProps, {}, {}>(
   RadioGroup: typeof ToolbarRadioGroup;
 };
 
+// @ts-expect-error React 18
 Toolbar.propTypes = {
   ...commonPropTypes.createCommon(),
   items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item', 'group', 'toggle', 'custom']),
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
index 65887e59aaa79..99e5411c3f9cb 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarCustomItem.tsx
@@ -141,6 +141,7 @@ export const ToolbarCustomItem = compose<'div', ToolbarCustomItemProps, ToolbarC
   },
 );
 
+// @ts-expect-error React 18
 ToolbarCustomItem.propTypes = {
   ...commonPropTypes.createCommon(),
   fitted: PropTypes.oneOfType([
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
index 88b62a441ebad..a3141dd2c799a 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarDivider.tsx
@@ -72,4 +72,5 @@ export const ToolbarDivider = compose<'div', ToolbarDividerProps, ToolbarDivider
   },
 );
 
+// @ts-expect-error React 18
 ToolbarDivider.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
index 3195928e80a55..a13357e980cf8 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItem.tsx
@@ -398,6 +398,7 @@ export const ToolbarItem = compose<'button', ToolbarItemProps, ToolbarItemStyles
   },
 );
 
+// @ts-expect-error React 18
 ToolbarItem.propTypes = {
   ...commonPropTypes.createCommon(),
   active: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemIcon.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemIcon.tsx
index a9d7ddfaec127..8f80edb646303 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemIcon.tsx
@@ -22,4 +22,5 @@ export const ToolbarItemIcon = compose<'div', ToolbarItemIconProps, ToolbarItemI
   },
 });
 
+// @ts-expect-error React 18
 ToolbarItemIcon.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemWrapper.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemWrapper.tsx
index 70226f492edeb..4dbfc3cdcef4e 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemWrapper.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarItemWrapper.tsx
@@ -25,4 +25,5 @@ export const ToolbarItemWrapper = compose<'div', ToolbarItemWrapperProps, Toolba
   },
 );
 
+// @ts-expect-error React 18
 ToolbarItemWrapper.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
index 294cd6fd9aeed..97fb4c975d90a 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenu.tsx
@@ -215,6 +215,7 @@ export const ToolbarMenu = compose<'ul', ToolbarMenuProps, ToolbarMenuStylesProp
   },
 );
 
+// @ts-expect-error React 18
 ToolbarMenu.propTypes = {
   ...commonPropTypes.createCommon(),
   items: customPropTypes.collectionShorthandWithKindProp(['divider', 'item']),
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
index abbb781898cea..fcd5760b9dd93 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuDivider.tsx
@@ -71,6 +71,7 @@ export const ToolbarMenuDivider = compose<'li', ToolbarMenuDividerProps, Toolbar
   },
 ) as ComponentWithAs<'li', ToolbarMenuDividerProps>;
 
+// @ts-expect-error React 18
 ToolbarMenuDivider.propTypes = commonPropTypes.createCommon();
 ToolbarMenuDivider.defaultProps = {
   as: 'li',
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
index 0e99f2d731be3..5b51d2a1b12d1 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
@@ -509,6 +509,7 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
   },
 );
 
+// @ts-expect-error React 18
 ToolbarMenuItem.propTypes = {
   ...commonPropTypes.createCommon(),
   active: PropTypes.bool,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemActiveIndicator.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemActiveIndicator.tsx
index c3ad4e3e0040a..231c1e43c324f 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemActiveIndicator.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemActiveIndicator.tsx
@@ -31,4 +31,5 @@ export const ToolbarMenuItemActiveIndicator = compose<
 ToolbarMenuItemActiveIndicator.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 ToolbarMenuItemActiveIndicator.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemContent.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemContent.tsx
index 1bfeed1db4dd4..ac86c498ab859 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemContent.tsx
@@ -31,4 +31,5 @@ export const ToolbarMenuItemContent = compose<
 ToolbarMenuItemContent.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 ToolbarMenuItemContent.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemIcon.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemIcon.tsx
index d4f9e5f81f6dd..e4156449ce352 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemIcon.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemIcon.tsx
@@ -37,4 +37,6 @@ export const ToolbarMenuItemIcon = compose<
 ToolbarMenuItemIcon.defaultProps = {
   as: 'span',
 };
+
+// @ts-expect-error React 18
 ToolbarMenuItemIcon.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemSubmenuIndicator.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemSubmenuIndicator.tsx
index 611a169e4c957..f4cf5ce9d56b3 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemSubmenuIndicator.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItemSubmenuIndicator.tsx
@@ -36,4 +36,5 @@ export const ToolbarMenuItemSubmenuIndicator = compose<
 ToolbarMenuItemSubmenuIndicator.defaultProps = {
   as: 'span',
 };
+// @ts-expect-error React 18
 ToolbarMenuItemSubmenuIndicator.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
index 5b8171e97c9a0..fd5010901cfeb 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroup.tsx
@@ -161,6 +161,7 @@ export const ToolbarMenuRadioGroup = compose<
   },
 );
 
+// @ts-expect-error React 18
 ToolbarMenuRadioGroup.propTypes = {
   ...commonPropTypes.createCommon(),
   activeIndex: PropTypes.number,
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroupWrapper.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroupWrapper.tsx
index 43e535c4eeabd..c572015a864e5 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroupWrapper.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuRadioGroupWrapper.tsx
@@ -30,4 +30,6 @@ ToolbarMenuRadioGroupWrapper.defaultProps = {
   as: 'li',
   accessibility: toolbarMenuRadioGroupWrapperBehavior,
 };
+
+// @ts-expect-error React 18
 ToolbarMenuRadioGroupWrapper.propTypes = commonPropTypes.createCommon();
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
index 1beab14b82e7e..65faa4e73d824 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarRadioGroup.tsx
@@ -204,6 +204,7 @@ export const ToolbarRadioGroup = compose<'div', ToolbarRadioGroupProps, ToolbarR
   },
 );
 
+// @ts-expect-error React 18
 ToolbarRadioGroup.propTypes = {
   ...commonPropTypes.createCommon(),
   activeIndex: PropTypes.number,
diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
index a64e9a51fbb66..214820c5dd460 100644
--- a/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tooltip/Tooltip.tsx
@@ -309,6 +309,7 @@ Tooltip.defaultProps = {
   accessibility: tooltipAsLabelBehavior,
   offset: [4, 4],
 };
+
 Tooltip.propTypes = {
   ...commonPropTypes.createCommon({
     as: false,
@@ -318,6 +319,7 @@ Tooltip.propTypes = {
   mouseEnterDelay: PropTypes.number,
   align: PropTypes.oneOf<Alignment>(ALIGNMENTS),
   subtle: PropTypes.bool,
+  // @ts-expect-error React 18
   children: PropTypes.element,
   defaultOpen: PropTypes.bool,
   mountNode: customPropTypes.domNode,
diff --git a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
index 366a3ecc4919e..2a9b069cdf902 100644
--- a/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tooltip/TooltipContent.tsx
@@ -125,6 +125,7 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro
 
 TooltipContent.displayName = 'TooltipContent';
 
+// @ts-expect-error React 18
 TooltipContent.propTypes = {
   ...commonPropTypes.createCommon(),
   placement: PropTypes.oneOf<PopperJsPlacement>([
diff --git a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
index 736767de3c8f5..0d7d44c10223d 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/Tree.tsx
@@ -219,6 +219,7 @@ export const Tree = React.forwardRef<HTMLDivElement, TreeProps>((props, ref) =>
 
 Tree.displayName = 'Tree';
 
+// @ts-expect-error React 18
 Tree.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
index 0c981474e2243..1eaf339b5b952 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/TreeItem.tsx
@@ -338,6 +338,7 @@ export const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>((props,
 
 TreeItem.displayName = 'TreeItem';
 
+// @ts-expect-error React 18
 TreeItem.propTypes = {
   ...commonPropTypes.createCommon({
     content: false,
diff --git a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
index 9896666dda052..c5338ba1e6e38 100644
--- a/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
+++ b/packages/fluentui/react-northstar/src/components/Tree/TreeTitle.tsx
@@ -230,6 +230,7 @@ export const TreeTitle = React.forwardRef<HTMLAnchorElement, TreeTitleProps>((pr
 
 TreeTitle.displayName = 'TreeTitle';
 
+// @ts-expect-error React 18
 TreeTitle.propTypes = {
   ...commonPropTypes.createCommon(),
   id: PropTypes.string,
diff --git a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
index e50704a824593..37d5b3082d238 100644
--- a/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
+++ b/packages/fluentui/react-northstar/src/utils/renderComponent.tsx
@@ -65,7 +65,7 @@ export const renderComponent = <P extends {}>(
 
   setStart();
 
-  const ElementType = getElementType(props) as React.ReactType<P>;
+  const ElementType = getElementType(props) as React.ElementType<P>;
   const unhandledProps = getUnhandledProps(handledProps, props);
   const stateAndProps = { ...state, ...props };
 
diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/handlesAccessibility.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/handlesAccessibility.tsx
index a3d0e8671b31c..0bbfb3e5618ac 100644
--- a/packages/fluentui/react-northstar/test/specs/commonTests/handlesAccessibility.tsx
+++ b/packages/fluentui/react-northstar/test/specs/commonTests/handlesAccessibility.tsx
@@ -40,12 +40,14 @@ export const handlesAccessibility = (
   const { requiredProps = {}, defaultRootRole, partSelector = '', usesWrapperSlot = false } = options;
 
   test('gets default accessibility when no override used', () => {
+    // @ts-expect-error enzyme < 18
     const rendered = mountWithProviderAndGetComponent(Component, <Component {...requiredProps} />);
     const role = getRenderedAttribute(rendered, 'role', partSelector);
     expect(role).toBe(defaultRootRole);
   });
 
   test('does not get role when overrides to null', () => {
+    // @ts-expect-error enzyme < 18
     const rendered = mountWithProviderAndGetComponent(Component, <Component {...requiredProps} accessibility={null} />);
     const role = getRenderedAttribute(rendered, 'role', partSelector);
     expect(role).toBeFalsy();
@@ -60,6 +62,8 @@ export const handlesAccessibility = (
       ) : (
         <Component {...requiredProps} accessibility={TestBehavior} />
       );
+
+      // @ts-expect-error enzyme < 18
       const rendered = mountWithProviderAndGetComponent(Component, element);
       const role = getRenderedAttribute(rendered, 'role', partSelector);
       expect(role).toBe(testRole);
@@ -72,6 +76,8 @@ export const handlesAccessibility = (
       ) : (
         <Component {...requiredProps} role={testRole} />
       );
+
+      // @ts-expect-error enzyme < 18
       const rendered = mountWithProviderAndGetComponent(Component, element);
       const role = getRenderedAttribute(rendered, 'role', partSelector);
       expect(role).toBe(testRole);
@@ -84,6 +90,8 @@ export const handlesAccessibility = (
       ) : (
         <Component {...requiredProps} accessibility={TestBehavior} role={testRole} />
       );
+
+      // @ts-expect-error enzyme < 18
       const rendered = mountWithProviderAndGetComponent(Component, element);
       const role = getRenderedAttribute(rendered, 'role', partSelector);
       expect(role).toBe(testRole);
diff --git a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
index eaaeb0ff44af1..a4135d9631598 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Chat/ChatMessage-test.tsx
@@ -38,7 +38,7 @@ describe('ChatMessage', () => {
       usePopperSpy = jest.spyOn(positionerApi, 'usePopper');
     });
 
-    function render(wrappingComponent?: React.ComponentType) {
+    function render(wrappingComponent?: React.ComponentType<React.PropsWithChildren<unknown>>) {
       const actionMenu = {
         iconOnly: true,
         items: [
@@ -59,6 +59,7 @@ describe('ChatMessage', () => {
           timestamp="10:15 PM"
           mine
         />,
+        // @ts-expect-error enzyme types <= 18
         { wrappingComponent },
       );
     }
diff --git a/packages/fluentui/react-northstar/test/specs/components/Form/FormField-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Form/FormField-test.tsx
index 2727b471b11e8..ccb1071a5ef65 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Form/FormField-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Form/FormField-test.tsx
@@ -14,7 +14,7 @@ const inputIconClassName = '.ui-input__icon';
 
 const formFieldImplementsShorthandProp = implementsShorthandProp(FormField);
 
-const getFormField = (control: React.ComponentType<any> | string) =>
+const getFormField = (control: React.ComponentType<React.PropsWithChildren<any>> | string) =>
   mountWithProvider(<FormField control={{ as: control }} name="firstName" />).find('FormField');
 
 describe('FormField', () => {
diff --git a/packages/fluentui/react-northstar/test/specs/components/Provider/Provider-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Provider/Provider-test.tsx
index 9a05707dd22bc..4a61eb8d53cd7 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Provider/Provider-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Provider/Provider-test.tsx
@@ -62,7 +62,7 @@ describe('Provider', () => {
 
     test('do not overwrite by default', () => {
       const getContext = jest.fn();
-      const Consumer: React.FC = () => {
+      const Consumer: React.FC<React.PropsWithChildren<unknown>> = () => {
         getContext(useFluentContext());
         return null;
       };
@@ -89,7 +89,7 @@ describe('Provider', () => {
 
     test('does overwrite when is true', () => {
       const getContext = jest.fn();
-      const Consumer: React.FC = () => {
+      const Consumer: React.FC<React.PropsWithChildren<unknown>> = () => {
         getContext(useFluentContext());
         return null;
       };
@@ -332,7 +332,7 @@ describe('Provider', () => {
   describe('context', () => {
     it('should memoize passed context value', () => {
       const onRender = jest.fn();
-      const Consumer: React.FC = () => {
+      const Consumer: React.FC<React.PropsWithChildren<unknown>> = () => {
         useFluentContext();
         onRender();
 
@@ -351,7 +351,7 @@ describe('Provider', () => {
 
     it('should propagate props updates', () => {
       const onRender = jest.fn();
-      const Consumer: React.FC = () => {
+      const Consumer: React.FC<React.PropsWithChildren<unknown>> = () => {
         useFluentContext();
         onRender();
 
diff --git a/packages/fluentui/react-northstar/test/specs/components/Toolbar/Toolbar-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Toolbar/Toolbar-test.tsx
index b214bd822a3dd..74f31adad2c66 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Toolbar/Toolbar-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Toolbar/Toolbar-test.tsx
@@ -11,7 +11,7 @@ type BaseComponentProps = { color?: string } & React.HTMLAttributes<HTMLButtonEl
 const boldButtonId = 'item1';
 const italicButtonId = 'item2';
 
-const BaseComponent: React.FC<BaseComponentProps> = props => {
+const BaseComponent: React.FC<React.PropsWithChildren<BaseComponentProps>> = props => {
   const [bold, setBold] = React.useState(false);
   const [italic, setItalic] = React.useState(true);
 
diff --git a/packages/fluentui/react-northstar/test/specs/components/Tree/Tree-test.tsx b/packages/fluentui/react-northstar/test/specs/components/Tree/Tree-test.tsx
index 12952512f87d5..9c2468e29c7ff 100644
--- a/packages/fluentui/react-northstar/test/specs/components/Tree/Tree-test.tsx
+++ b/packages/fluentui/react-northstar/test/specs/components/Tree/Tree-test.tsx
@@ -3,7 +3,7 @@ import { keyboardKey } from '@fluentui/accessibility';
 
 import { isConformant } from 'test/specs/commonTests';
 import { mountWithProvider } from 'test/utils';
-import { Tree } from 'src/components/Tree/Tree';
+import { Tree, type TreeProps } from 'src/components/Tree/Tree';
 import { treeTitleClassName } from 'src/components/Tree/TreeTitle';
 import { treeItemClassName } from 'src/components/Tree/TreeItem';
 import { ReactWrapper, CommonWrapper } from 'enzyme';
@@ -62,7 +62,7 @@ const items = [
     id: '3',
     title: '3',
   },
-];
+] as TreeProps['items'];
 
 const getTitles = (wrapper: ReactWrapper): CommonWrapper =>
   wrapper.find(`.${treeTitleClassName}`).filterWhere(n => typeof n.type() === 'string');
diff --git a/packages/fluentui/react-northstar/test/utils/getDisplayName.ts b/packages/fluentui/react-northstar/test/utils/getDisplayName.ts
index fd912bc0fa1a7..89ac63e318114 100644
--- a/packages/fluentui/react-northstar/test/utils/getDisplayName.ts
+++ b/packages/fluentui/react-northstar/test/utils/getDisplayName.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-export const getDisplayName = (Component: React.ReactType) => {
+export const getDisplayName = (Component: React.ElementType) => {
   return (
     (Component as React.ComponentType).displayName ||
     (Component as React.ComponentType).name ||
diff --git a/packages/fluentui/react-northstar/test/utils/withProvider.tsx b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
index c9baa658755d5..87fea66a6c21f 100644
--- a/packages/fluentui/react-northstar/test/utils/withProvider.tsx
+++ b/packages/fluentui/react-northstar/test/utils/withProvider.tsx
@@ -7,6 +7,7 @@ import * as React from 'react';
 export const EmptyThemeProvider: React.FunctionComponent<{
   disableAnimations?: boolean;
   telemetry?: Telemetry;
+  children?: React.ReactNode;
   renderer?: Renderer;
   theme?: ThemePrepared;
   rtl?: boolean;
@@ -48,6 +49,7 @@ export const mountWithProvider = <C extends React.Component, P = C['props'], S =
   options?: MountRendererProps,
 ) => {
   return mount(node, {
+    // @ts-expect-error enzyme types <= 18
     wrappingComponent: EmptyThemeProvider,
     ...options,
   });
diff --git a/packages/fluentui/react-northstar/tsconfig.json b/packages/fluentui/react-northstar/tsconfig.json
index f22addcb1f6e4..f3a50be0dfae6 100644
--- a/packages/fluentui/react-northstar/tsconfig.json
+++ b/packages/fluentui/react-northstar/tsconfig.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "composite": true,
     "outDir": "dist/dts",
-    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "typeRoots": ["../../../node_modules/@types", "../../../node_modules/@testing-library"],
+    "types": ["node", "jest", "jest-dom"],
     "paths": {
       "src/*": ["packages/fluentui/react-northstar/src/*"],
       "test/*": ["packages/fluentui/react-northstar/test/*"]
diff --git a/packages/fluentui/react-northstar/tsconfig.spec.json b/packages/fluentui/react-northstar/tsconfig.spec.json
index 487c22c774b4d..bfc8651e5f075 100644
--- a/packages/fluentui/react-northstar/tsconfig.spec.json
+++ b/packages/fluentui/react-northstar/tsconfig.spec.json
@@ -4,7 +4,8 @@
     "noEmit": true,
     "emitDeclarationOnly": false,
     "composite": false,
-    "types": ["node", "jest", "@testing-library/jest-dom"],
+    "typeRoots": ["../../../node_modules/@types", "../../../node_modules/@testing-library"],
+    "types": ["node", "jest", "jest-dom"],
     "paths": {
       "src/*": ["packages/fluentui/react-northstar/src/*"],
       "test/*": ["packages/fluentui/react-northstar/test/*"]
diff --git a/packages/fluentui/react-telemetry/src/TelemetryPerfFlags.tsx b/packages/fluentui/react-telemetry/src/TelemetryPerfFlags.tsx
index 0a38e87f458f2..595a25f731567 100644
--- a/packages/fluentui/react-telemetry/src/TelemetryPerfFlags.tsx
+++ b/packages/fluentui/react-telemetry/src/TelemetryPerfFlags.tsx
@@ -8,7 +8,7 @@ type TelemetryPerfFlagsProps = {
   onChange: (name: keyof StylesContextPerformance, value: boolean) => void;
 };
 
-export const TelemetryPerfFlags: React.FC<TelemetryPerfFlagsProps> = props => (
+export const TelemetryPerfFlags: React.FC<React.PropsWithChildren<TelemetryPerfFlagsProps>> = props => (
   <div style={styles.performanceFlags()}>
     {Object.keys(defaultPerformanceFlags).map(flag => (
       <div key={flag} style={styles.performanceFlag()}>
diff --git a/packages/fluentui/react-telemetry/src/TelemetryPopover.tsx b/packages/fluentui/react-telemetry/src/TelemetryPopover.tsx
index f60f43f42848b..f854a042aedf6 100644
--- a/packages/fluentui/react-telemetry/src/TelemetryPopover.tsx
+++ b/packages/fluentui/react-telemetry/src/TelemetryPopover.tsx
@@ -17,7 +17,7 @@ function defaultHotKeyHandler(e: KeyboardEvent) {
   return e.altKey && e.shiftKey && e.code === 'KeyT';
 }
 
-export const TelemetryPopover: React.FC<TelemetryPopoverProps> = props => {
+export const TelemetryPopover: React.FC<React.PropsWithChildren<TelemetryPopoverProps>> = props => {
   const { children, hotKeyHandler = defaultHotKeyHandler, mountNode = document.body } = props;
 
   const telemetry = React.useMemo(() => new Telemetry(), []);
diff --git a/packages/fluentui/react-telemetry/src/TelemetryTable.tsx b/packages/fluentui/react-telemetry/src/TelemetryTable.tsx
index b15f9d493831a..fb994e2692e5d 100644
--- a/packages/fluentui/react-telemetry/src/TelemetryTable.tsx
+++ b/packages/fluentui/react-telemetry/src/TelemetryTable.tsx
@@ -40,7 +40,7 @@ type TelemetryHeaderGroup = HeaderGroup &
     subgroup: 'styles' | 'timers';
   };
 
-export const TelemetryTable: React.FC<TelemetryTableProps> = props => {
+export const TelemetryTable: React.FC<React.PropsWithChildren<TelemetryTableProps>> = props => {
   const { expand, componentFilter, sort, onComponentFilterChange, onExpandChange, onSortChange, telemetry } = props;
 
   const [interval, setInterval] = React.useState(2000);
diff --git a/packages/fluentui/react-telemetry/src/useTelemetryColumns.tsx b/packages/fluentui/react-telemetry/src/useTelemetryColumns.tsx
index 9b63c829819e8..de23d819aff5c 100644
--- a/packages/fluentui/react-telemetry/src/useTelemetryColumns.tsx
+++ b/packages/fluentui/react-telemetry/src/useTelemetryColumns.tsx
@@ -7,7 +7,7 @@ import { TelemetryDataTotals } from './useTelemetryData';
 
 export type CellAlign = 'left' | 'right' | 'center';
 
-const TelemetryTableFilter: React.FC<FilterProps<{}> & { column: UseFiltersColumnProps<{}> }> = ({ column }) => {
+const TelemetryTableFilter: React.FC<React.PropsWithChildren<FilterProps<{}> & { column: UseFiltersColumnProps<{}> }>> = ({ column }) => {
   const { filterValue, setFilter } = column;
 
   return (
@@ -20,14 +20,14 @@ const TelemetryTableFilter: React.FC<FilterProps<{}> & { column: UseFiltersColum
   );
 };
 
-const TelemetryTableRoundingCell: React.FC<CellProps<{}>> = ({ value }) => <>{_.round(value, 2).toFixed(2)}</>;
+const TelemetryTableRoundingCell: React.FC<React.PropsWithChildren<CellProps<{}>>> = ({ value }) => <>{_.round(value, 2).toFixed(2)}</>;
 
-const TelemetryTableRoundingFooter: React.FC<HeaderProps<{}> & { totals: TelemetryDataTotals }> = ({
+const TelemetryTableRoundingFooter: React.FC<React.PropsWithChildren<HeaderProps<{}> & { totals: TelemetryDataTotals }>> = ({
   column,
   totals,
 }) => <>{_.round(totals[column.id as keyof TelemetryDataTotals], 2).toFixed(2)}</>;
 
-const TelemetryTableSumFooter: React.FC<HeaderProps<{}> & { totals: TelemetryDataTotals }> = ({ column, totals }) => (
+const TelemetryTableSumFooter: React.FC<React.PropsWithChildren<HeaderProps<{}> & { totals: TelemetryDataTotals }>> = ({ column, totals }) => (
   <>{totals[column.id as keyof TelemetryDataTotals]}</>
 );
 
diff --git a/packages/foundation-legacy/etc/foundation-legacy.api.md b/packages/foundation-legacy/etc/foundation-legacy.api.md
index f714b82072bcc..324c81264869b 100644
--- a/packages/foundation-legacy/etc/foundation-legacy.api.md
+++ b/packages/foundation-legacy/etc/foundation-legacy.api.md
@@ -192,7 +192,7 @@ export type IViewComponent<TViewProps> = (props: React_2.PropsWithChildren<TView
 export { legacyStyled }
 
 // @public @deprecated
-export const ThemeProvider: React_2.FunctionComponent<IThemeProviderProps>;
+export const ThemeProvider: React_2.FunctionComponent<React_2.PropsWithChildren<IThemeProviderProps>>;
 
 // @public
 export function useControlledState<TProps, TProp extends keyof TProps, TDefaultProp extends keyof TProps>(props: Readonly<TProps>, propName: TProp, options?: IControlledStateOptions<TProps, TProp, TDefaultProp>): [TProps[TProp] | undefined, React_2.Dispatch<React_2.SetStateAction<TProps[TProp]>>];
diff --git a/packages/foundation-legacy/src/ThemeProvider.tsx b/packages/foundation-legacy/src/ThemeProvider.tsx
index 12a572e8f2e3f..546fd939c7f9c 100644
--- a/packages/foundation-legacy/src/ThemeProvider.tsx
+++ b/packages/foundation-legacy/src/ThemeProvider.tsx
@@ -15,7 +15,9 @@ export interface IThemeProviderProps {
  * @deprecated This is an old ThemeProvider implementation. New code should use the ThemeProvider exported from
  * `@fluentui/react` (or `@fluentui/react/lib/Theme`) instead.
  */
-export const ThemeProvider: React.FunctionComponent<IThemeProviderProps> = (props: IThemeProviderProps) => {
+export const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<IThemeProviderProps>> = (
+  props: IThemeProviderProps,
+) => {
   const { scheme, theme, ...rest } = props;
 
   // TODO: consider merging implementation with theme-proto, which only stores a reference / scheme name to theme
diff --git a/packages/react-cards/etc/react-cards.api.md b/packages/react-cards/etc/react-cards.api.md
index 365166a20f9eb..38f9e45c0a94f 100644
--- a/packages/react-cards/etc/react-cards.api.md
+++ b/packages/react-cards/etc/react-cards.api.md
@@ -20,12 +20,12 @@ import * as React_2 from 'react';
 
 // @public @deprecated (undocumented)
 export const Card: React_2.FunctionComponent<ICardProps> & {
-    Item: React_2.FunctionComponent<ICardItemProps>;
-    Section: React_2.FunctionComponent<ICardSectionProps>;
+    Item: React_2.FunctionComponent<React_2.PropsWithChildren<ICardItemProps>>;
+    Section: React_2.FunctionComponent<React_2.PropsWithChildren<ICardSectionProps>>;
 };
 
 // @public @deprecated (undocumented)
-export const CardItem: React_2.FunctionComponent<ICardItemProps>;
+export const CardItem: React_2.FunctionComponent<React_2.PropsWithChildren<ICardItemProps>>;
 
 // @public @deprecated (undocumented)
 export const CardSection: React_2.FunctionComponent<ICardSectionProps>;
diff --git a/packages/react-cards/src/components/Card/Card.ts b/packages/react-cards/src/components/Card/Card.ts
index 526dd89282e80..15a5e214e93b5 100644
--- a/packages/react-cards/src/components/Card/Card.ts
+++ b/packages/react-cards/src/components/Card/Card.ts
@@ -18,8 +18,8 @@ const CardStatics = {
  * future.
  */
 export const Card: React.FunctionComponent<ICardProps> & {
-  Item: React.FunctionComponent<ICardItemProps>;
-  Section: React.FunctionComponent<ICardSectionProps>;
+  Item: React.FunctionComponent<React.PropsWithChildren<ICardItemProps>>;
+  Section: React.FunctionComponent<React.PropsWithChildren<ICardSectionProps>>;
 } = createComponent(CardView, {
   displayName: 'Card',
   styles,
diff --git a/packages/react-cards/src/components/Card/Card.view.tsx b/packages/react-cards/src/components/Card/Card.view.tsx
index 6110c6e2f1d90..839888c1f2417 100644
--- a/packages/react-cards/src/components/Card/Card.view.tsx
+++ b/packages/react-cards/src/components/Card/Card.view.tsx
@@ -117,7 +117,7 @@ function _isReactElement(item: React.ReactNode): item is React.ReactElement {
   return !!item && typeof item === 'object' && !!(item as React.ReactElement).type;
 }
 
-function _isCardItem(item: React.ReactNode): item is typeof CardItem {
+function _isCardItem(item: React.ReactNode) {
   // In theory, we should be able to just check item.type === CardItem.
   // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
   // the object identity is different despite the function implementation being the same.
@@ -125,6 +125,6 @@ function _isCardItem(item: React.ReactNode): item is typeof CardItem {
   return _isReactElement(item) && (item.type as React.ComponentType).displayName === CardItem.displayName;
 }
 
-function _isCardSection(item: React.ReactNode): item is typeof CardSection {
+function _isCardSection(item: React.ReactNode) {
   return _isReactElement(item) && (item.type as React.ComponentType).displayName === CardSection.displayName;
 }
diff --git a/packages/react-cards/src/components/Card/CardItem/CardItem.ts b/packages/react-cards/src/components/Card/CardItem/CardItem.ts
index 5e192843d9d94..146f680045ea3 100644
--- a/packages/react-cards/src/components/Card/CardItem/CardItem.ts
+++ b/packages/react-cards/src/components/Card/CardItem/CardItem.ts
@@ -8,11 +8,14 @@ import { CardItemView } from './CardItem.view';
  * @deprecated This component was experimental and is no longer being developed on, nor will it be supported in the
  * future.
  */
-export const CardItem: React.FunctionComponent<ICardItemProps> = createComponent(CardItemView, {
-  displayName: 'CardItem',
-  styles,
-  tokens,
-});
+export const CardItem: React.FunctionComponent<React.PropsWithChildren<ICardItemProps>> = createComponent(
+  CardItemView,
+  {
+    displayName: 'CardItem',
+    styles,
+    tokens,
+  },
+);
 
 /**
  * @deprecated This component was experimental and is no longer being developed on, nor will it be supported in the
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.test.tsx
index bfbc2ae28de93..cfe5adcd8b2ba 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.test.tsx
+++ b/packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.test.tsx
@@ -9,7 +9,7 @@ import { mockAccordionContextValue, mockAccordionItemContextValue } from '../../
 describe('useAccordionHeader_unstable', () => {
   it('should return button props as disabled even when it is not disabled (forceDisabled)', () => {
     const ref = React.createRef<HTMLElement>();
-    const wrapper: React.FC = ({ children }) => (
+    const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
       <AccordionProvider
         value={mockAccordionContextValue({
           openItems: [1],
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx
index 228996f025efe..928b53aa33ef1 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx
+++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/AccordionPanel.test.tsx
@@ -6,7 +6,7 @@ import { AccordionItemProvider } from '../../contexts/accordionItem';
 import { mockAccordionItemContextValue } from '../../testing/mockContextValue';
 
 describe('AccordionPanel', () => {
-  const Wrapper: React.FC = props => (
+  const Wrapper: React.FC<React.PropsWithChildren<unknown>> = props => (
     <AccordionItemProvider
       value={mockAccordionItemContextValue({
         open: true,
diff --git a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
index 808a7f62ec14f..2e00c494ac366 100644
--- a/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
+++ b/packages/react-components/react-accordion/library/src/components/AccordionPanel/useAccordionPanel.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useTabsterAttributes } from '@fluentui/react-tabster';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import { Collapse } from '@fluentui/react-motion-components-preview';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
@@ -24,11 +24,7 @@ export const useAccordionPanel_unstable = (
     open,
     components: {
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,
+      collapseMotion: Collapse,
     },
     root: slot.always(
       getIntrinsicElementProps('div', {
diff --git a/packages/react-components/react-aria/library/etc/react-aria.api.md b/packages/react-components/react-aria/library/etc/react-aria.api.md
index 46aadb79afe48..3676f6796d93a 100644
--- a/packages/react-components/react-aria/library/etc/react-aria.api.md
+++ b/packages/react-components/react-aria/library/etc/react-aria.api.md
@@ -5,6 +5,7 @@
 ```ts
 
 import type { AnnounceContextValue } from '@fluentui/react-shared-contexts';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
@@ -73,7 +74,7 @@ export type ARIAButtonElement<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = H
 export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a' | 'div'> = UnionToIntersection<ARIAButtonElement<AlternateAs>>;
 
 // @public
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React_2.PropsWithRef<JSX.IntrinsicElements[Type]> & {
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<React_2.PropsWithRef<JSX.IntrinsicElements[Type]>, 'children'> & {
     disabled?: boolean;
     disabledFocusable?: boolean;
 };
@@ -102,7 +103,7 @@ export type AriaLiveAnnouncerState = {
 };
 
 // @public (undocumented)
-export const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncerState, contextValues: AriaLiveAnnouncerContextValues) => JSX.Element;
+export const renderAriaLiveAnnouncer_unstable: (state: AriaLiveAnnouncerState, contextValues: AriaLiveAnnouncerContextValues) => React_2.JSX.Element;
 
 // @public (undocumented)
 export function useActiveDescendant<TActiveParentElement extends HTMLElement, TListboxElement extends HTMLElement>(options: ActiveDescendantOptions): UseActiveDescendantReturn<TActiveParentElement, TListboxElement>;
@@ -114,7 +115,7 @@ export const useActiveDescendantContext: () => ActiveDescendantContextValue;
 export function useARIAButtonProps<Type extends ARIAButtonType, Props extends ARIAButtonProps<Type>>(type?: Type, props?: Props): ARIAButtonResultProps<Type, Props>;
 
 // @internal @deprecated (undocumented)
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps>;
+export const useARIAButtonShorthand: ResolveShorthandFunction<any>;
 
 // @public (undocumented)
 export const useAriaLiveAnnouncer_unstable: (props: AriaLiveAnnouncerProps) => AriaLiveAnnouncerState;
diff --git a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/useAriaLiveAnnouncer.test.tsx b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/useAriaLiveAnnouncer.test.tsx
index 229dc8a6a360f..6264b25e6edd4 100644
--- a/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/useAriaLiveAnnouncer.test.tsx
+++ b/packages/react-components/react-aria/library/src/AriaLiveAnnouncer/useAriaLiveAnnouncer.test.tsx
@@ -19,7 +19,7 @@ describe('useAriaLiveAnnouncer', () => {
       },
       defaultView: global,
     } as unknown as Document;
-    const ContextWrapper: React.FC = props => {
+    const ContextWrapper: React.FC<React.PropsWithChildren> = props => {
       return <Provider value={{ dir: 'ltr', targetDocument }}>{props.children}</Provider>;
     };
 
diff --git a/packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.cy.tsx b/packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.cy.tsx
index be0d73ee95a38..80e3e5c16119c 100644
--- a/packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.cy.tsx
+++ b/packages/react-components/react-aria/library/src/activedescendant/useActiveDescendant.cy.tsx
@@ -16,8 +16,8 @@ describe('onActiveOptionChange', () => {
       const [lastActive, setLastActive] = React.useState('');
 
       const onActiveDescendantChange = React.useCallback(
-        event => {
-          setLastActive(event ? event.detail.id : 'no event');
+        (event: CustomEventInit<{ id: string }>) => {
+          setLastActive(event && event.detail ? event.detail.id : 'no event');
         },
         [setLastActive],
       );
diff --git a/packages/react-components/react-aria/library/src/button/types.ts b/packages/react-components/react-aria/library/src/button/types.ts
index 478b894dadb0c..8e0ae86460c03 100644
--- a/packages/react-components/react-aria/library/src/button/types.ts
+++ b/packages/react-components/react-aria/library/src/button/types.ts
@@ -1,4 +1,4 @@
-import type { ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';
+import type { DistributiveOmit, ExtractSlotProps, Slot, UnionToIntersection } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 export type ARIAButtonType = 'button' | 'a' | 'div';
@@ -18,8 +18,9 @@ export type ARIAButtonElementIntersection<AlternateAs extends 'a' | 'div' = 'a'
 /**
  * Props expected by `useARIAButtonProps` hooks
  */
-export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = React.PropsWithRef<
-  JSX.IntrinsicElements[Type]
+export type ARIAButtonProps<Type extends ARIAButtonType = ARIAButtonType> = DistributiveOmit<
+  React.PropsWithRef<JSX.IntrinsicElements[Type]>,
+  'children'
 > & {
   disabled?: boolean;
   /**
diff --git a/packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts b/packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts
index 9d8b64067a863..3574d36f2e896 100644
--- a/packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts
+++ b/packages/react-components/react-aria/library/src/button/useARIAButtonShorthand.ts
@@ -1,7 +1,7 @@
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useARIAButtonProps } from './useARIAButtonProps';
 import type { ResolveShorthandFunction } from '@fluentui/react-utilities';
-import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './types';
+import type { ARIAButtonProps, ARIAButtonType } from './types';
 
 /**
  * @internal
@@ -14,10 +14,14 @@ import type { ARIAButtonProps, ARIAButtonSlotProps, ARIAButtonType } from './typ
  * for multiple scenarios of shorthand properties. Ensuring 1st rule of ARIA for cases
  * where no attribute addition is required.
  */
-// eslint-disable-next-line @typescript-eslint/no-deprecated
-export const useARIAButtonShorthand: ResolveShorthandFunction<ARIAButtonSlotProps> = (value, options) => {
+// eslint-disable-next-line @typescript-eslint/no-deprecated, @typescript-eslint/no-explicit-any
+export const useARIAButtonShorthand: ResolveShorthandFunction<any> = ((value, options) => {
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const shorthand = resolveShorthand(value, options);
-  const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(shorthand?.as ?? 'button', shorthand);
+  const shorthandARIAButton = useARIAButtonProps<ARIAButtonType, ARIAButtonProps>(
+    shorthand?.as ?? 'button',
+    shorthand as ARIAButtonProps,
+  );
   return shorthand && shorthandARIAButton;
-};
+  // eslint-disable-next-line @typescript-eslint/no-deprecated, @typescript-eslint/no-explicit-any
+}) as ResolveShorthandFunction<any>;
diff --git a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx
index a1508433484bc..8b5eef3d3580d 100644
--- a/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx
+++ b/packages/react-components/react-avatar/library/src/components/AvatarGroupItem/AvatarGroupItem.test.tsx
@@ -6,7 +6,7 @@ import { isConformant } from '../../testing/isConformant';
 
 const testId = 'testId';
 
-const ContextWrapper: React.FC = ({ children }) => (
+const ContextWrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <AvatarGroupContext.Provider value={{ isOverflow: true }}>{children}</AvatarGroupContext.Provider>
 );
 
diff --git a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/index.stories.tsx b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/index.stories.tsx
index fa715fdeff39f..b6781533e95ab 100644
--- a/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/index.stories.tsx
+++ b/packages/react-components/react-breadcrumb/stories/src/Breadcrumb/index.stories.tsx
@@ -1,4 +1,5 @@
 import { Breadcrumb, BreadcrumbButton, BreadcrumbItem, BreadcrumbDivider } from '@fluentui/react-components';
+import * as React from 'react';
 import descriptionMd from './BreadcrumbDescription.md';
 export { Default } from './BreadcrumbDefault.stories';
 export { BreadcrumbSize } from './BreadcrumbSize.stories';
@@ -7,13 +8,13 @@ export { BreadcrumbWithTooltip } from './BreadcrumbWithTooltip.stories';
 
 import type { Meta } from '@storybook/react';
 
-const metadata: Meta<typeof Breadcrumb> = {
+const metadata = {
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: {
-    BreadcrumbItem,
-    BreadcrumbButton,
-    BreadcrumbDivider,
+    BreadcrumbItem: BreadcrumbItem as React.ComponentType<unknown>,
+    BreadcrumbButton: BreadcrumbButton as React.ComponentType<unknown>,
+    BreadcrumbDivider: BreadcrumbDivider as React.ComponentType<unknown>,
   },
   parameters: {
     docs: {
@@ -22,6 +23,6 @@ const metadata: Meta<typeof Breadcrumb> = {
       },
     },
   },
-};
+} satisfies Meta<typeof Breadcrumb>;
 
 export default metadata;
diff --git a/packages/react-components/react-button/library/src/utils/useToggleState.ts b/packages/react-components/react-button/library/src/utils/useToggleState.ts
index 2b8f8d938fa45..5a6731b7343a9 100644
--- a/packages/react-components/react-button/library/src/utils/useToggleState.ts
+++ b/packages/react-components/react-button/library/src/utils/useToggleState.ts
@@ -20,7 +20,7 @@ export function useToggleState<
   const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';
 
   const onToggleClick = React.useCallback(
-    ev => {
+    (ev: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
       if (!disabled && !disabledFocusable) {
         if (ev.defaultPrevented) {
           return;
diff --git a/packages/react-components/react-combobox/library/config/tests.js b/packages/react-components/react-combobox/library/config/tests.js
deleted file mode 100644
index c6c67de97059e..0000000000000
--- a/packages/react-components/react-combobox/library/config/tests.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** Jest test setup file. */
-
-require('@testing-library/jest-dom');
diff --git a/packages/react-components/react-combobox/library/config/tests.ts b/packages/react-components/react-combobox/library/config/tests.ts
new file mode 100644
index 0000000000000..d19c46b7c8a97
--- /dev/null
+++ b/packages/react-components/react-combobox/library/config/tests.ts
@@ -0,0 +1,2 @@
+/** Jest test setup file. */
+import '@testing-library/jest-dom';
diff --git a/packages/react-components/react-combobox/library/jest.config.js b/packages/react-components/react-combobox/library/jest.config.js
index c37f332f562de..b1dc3b8a96a51 100644
--- a/packages/react-components/react-combobox/library/jest.config.js
+++ b/packages/react-components/react-combobox/library/jest.config.js
@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable */
 
 const { readFileSync } = require('node:fs');
 const { join } = require('node:path');
@@ -29,6 +28,6 @@ module.exports = {
     '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],
   },
   coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js'],
+  setupFilesAfterEnv: ['./config/tests.ts'],
   snapshotSerializers: ['@griffel/jest-serializer'],
 };
diff --git a/packages/react-components/react-combobox/library/tsconfig.spec.json b/packages/react-components/react-combobox/library/tsconfig.spec.json
index 0e881941843de..9a2f5c8affbb0 100644
--- a/packages/react-components/react-combobox/library/tsconfig.spec.json
+++ b/packages/react-components/react-combobox/library/tsconfig.spec.json
@@ -3,9 +3,10 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "types": ["jest", "node"]
   },
   "include": [
+    "./config/tests.ts",
     "**/*.spec.ts",
     "**/*.spec.tsx",
     "**/*.test.ts",
diff --git a/packages/react-components/react-context-selector/src/useContextSelector.test.tsx b/packages/react-components/react-context-selector/src/useContextSelector.test.tsx
index fe55b5ffffda9..97d5ef0841d21 100644
--- a/packages/react-components/react-context-selector/src/useContextSelector.test.tsx
+++ b/packages/react-components/react-context-selector/src/useContextSelector.test.tsx
@@ -16,7 +16,7 @@ const TestComponent: React.FC<{ index: number; onUpdate?: () => void }> = props
   return <div className="test-component" data-active={active} />;
 };
 
-const TestProvider: React.FC = props => {
+const TestProvider: React.FC<React.PropsWithChildren<unknown>> = props => {
   const [index, setIndex] = React.useState<number>(0);
 
   return (
diff --git a/packages/react-components/react-context-selector/src/useHasParentContext.test.tsx b/packages/react-components/react-context-selector/src/useHasParentContext.test.tsx
index 6d35b776f48a8..3ca1ed2201927 100644
--- a/packages/react-components/react-context-selector/src/useHasParentContext.test.tsx
+++ b/packages/react-components/react-context-selector/src/useHasParentContext.test.tsx
@@ -8,7 +8,9 @@ const TestContext = createContext<number>(1);
 describe('useHasParentContext', () => {
   it('should return true if wrapped with context', () => {
     // Arrange
-    const wrapper: React.FC = ({ children }) => <TestContext.Provider value={1}>{children}</TestContext.Provider>;
+    const wrapper: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
+      <TestContext.Provider value={1}>{children}</TestContext.Provider>
+    );
     const { result } = renderHook(() => useHasParentContext(TestContext), { wrapper });
 
     // Assert
diff --git a/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md b/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
index 495068c61bae0..31abc94e4f577 100644
--- a/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
+++ b/packages/react-components/react-datepicker-compat/library/etc/react-datepicker-compat.api.md
@@ -6,7 +6,7 @@
 
 /// <reference types="react" />
 
-import type { CalendarProps } from '@fluentui/react-calendar-compat';
+import type { Calendar } from '@fluentui/react-calendar-compat';
 import { CalendarStrings } from '@fluentui/react-calendar-compat';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
index 2b6b11b75ee20..55d780701f5d8 100644
--- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/DatePicker.types.ts
@@ -1,13 +1,13 @@
 import { DayOfWeek, FirstWeekOfYear } from '@fluentui/react-calendar-compat';
 import { Input } from '@fluentui/react-input';
 import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import type { CalendarProps, CalendarStrings, DateFormatting } from '@fluentui/react-calendar-compat';
+import type { Calendar, CalendarStrings, DateFormatting } from '@fluentui/react-calendar-compat';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningProps } from '@fluentui/react-positioning';
 
 export type DatePickerSlots = {
   root: NonNullable<Slot<typeof Input>>;
-  calendar: NonNullable<Slot<Partial<CalendarProps>>>;
+  calendar: NonNullable<Slot<typeof Calendar>>;
   popupSurface?: Slot<'div'>;
 };
 
diff --git a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx
index 55006a5e5d235..b67cfe9485182 100644
--- a/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx
+++ b/packages/react-components/react-datepicker-compat/library/src/components/DatePicker/useDatePicker.tsx
@@ -13,13 +13,19 @@ import {
   useOnClickOutside,
   useOnScrollOutside,
   slot,
+  ExtractSlotProps,
 } from '@fluentui/react-utilities';
 import { useFieldContext_unstable as useFieldContext } from '@fluentui/react-field';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopupPositioning } from '../../utils/usePopupPositioning';
 import type { CalendarProps, ICalendar } from '@fluentui/react-calendar-compat';
-import type { DatePickerProps, DatePickerState, DatePickerValidationResultData } from './DatePicker.types';
+import type {
+  DatePickerProps,
+  DatePickerSlots,
+  DatePickerState,
+  DatePickerValidationResultData,
+} from './DatePicker.types';
 import type { InputProps, InputOnChangeData } from '@fluentui/react-input';
 
 function isDateOutOfBounds(date: Date, minDate?: Date, maxDate?: Date): boolean {
@@ -453,7 +459,7 @@ export const useDatePicker_unstable = (props: DatePickerProps, ref: React.Ref<HT
       calendar.current.focus();
     }
   }, [disableAutoFocus, open, props.disabled]);
-  const calendarShorthand = slot.always(props.calendar, {
+  const calendarShorthand = slot.always<ExtractSlotProps<DatePickerSlots['calendar']>>(props.calendar, {
     defaultProps: {
       allFocusable,
       componentRef: calendar,
diff --git a/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.ts b/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.ts
index 84d3930686a8a..84d4d0e2622d7 100644
--- a/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.ts
+++ b/packages/react-components/react-dialog/library/src/components/Dialog/useDialog.ts
@@ -1,6 +1,6 @@
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { useModalAttributes } from '@fluentui/react-tabster';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';
 import * as React from 'react';
 
@@ -48,11 +48,7 @@ export const useDialog_unstable = (props: DialogProps): DialogState => {
 
   return {
     components: {
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      surfaceMotion: DialogSurfaceMotion as React.FC<PresenceMotionSlotProps>,
+      surfaceMotion: DialogSurfaceMotion,
     },
     inertTrapFocus,
     open,
diff --git a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
index 51a6f5c59c7bc..71fb7defa6347 100644
--- a/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
+++ b/packages/react-components/react-dialog/library/src/components/DialogSurface/useDialogSurface.ts
@@ -1,5 +1,5 @@
 import { Escape } from '@fluentui/keyboard-keys';
-import { presenceMotionSlot, type PresenceMotionSlotProps } from '@fluentui/react-motion';
+import { presenceMotionSlot } from '@fluentui/react-motion';
 import {
   useEventCallback,
   useMergedRefs,
@@ -97,11 +97,7 @@ export const useDialogSurface_unstable = (
     components: {
       backdrop: 'div',
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      backdropMotion: DialogBackdropMotion as React.FC<PresenceMotionSlotProps>,
+      backdropMotion: DialogBackdropMotion,
     },
     open,
     backdrop,
diff --git a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts
index 139d604726c52..e0b13d16247e9 100644
--- a/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts
+++ b/packages/react-components/react-drawer/library/src/components/DrawerHeaderTitle/useDrawerHeaderTitleStyles.styles.ts
@@ -35,6 +35,11 @@ export const useDrawerHeaderTitleStyles_unstable = (state: DrawerHeaderTitleStat
 
   const styles = useStyles();
 
+  // We should not use components to pass along the base element type of a slot
+  // but there's no way to retrieve the element type of a slot from the slot definition
+  // right now without using SLOT_ELEMENT_TYPE_SYMBOL
+  // TODO: create a method to retrieve the element type of a slot
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   const { heading: root = {}, action, components } = state;
 
   useDialogTitleStyles_unstable({
diff --git a/packages/react-components/react-jsx-runtime/package.json b/packages/react-components/react-jsx-runtime/package.json
index 2c62e42f4df3f..0fc45358b72e9 100644
--- a/packages/react-components/react-jsx-runtime/package.json
+++ b/packages/react-components/react-jsx-runtime/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@fluentui/react-utilities": "^9.18.23",
-    "react-is": "^17.0.2",
+    "react-is": "^18.3.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
diff --git a/packages/react-components/react-jsx-runtime/src/interop.test.tsx b/packages/react-components/react-jsx-runtime/src/interop.test.tsx
index 24d2f754c91f9..76614a14bb15c 100644
--- a/packages/react-components/react-jsx-runtime/src/interop.test.tsx
+++ b/packages/react-components/react-jsx-runtime/src/interop.test.tsx
@@ -171,6 +171,7 @@ describe('resolveShorthand with assertSlots', () => {
       const TestComponent = (props: TestComponentProps) => {
         const higherOrderState = useHigherOrderStateHook(props);
         const state: TestComponentState = {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           components: { ...higherOrderState.components, slot: 'span' },
           slot: {
             ...higherOrderState.slot,
diff --git a/packages/react-components/react-jsx-runtime/src/jsx/createElementFromSlotComponent.ts b/packages/react-components/react-jsx-runtime/src/jsx/createElementFromSlotComponent.ts
index 3c9b4e73fbafc..02fcb4a93541f 100644
--- a/packages/react-components/react-jsx-runtime/src/jsx/createElementFromSlotComponent.ts
+++ b/packages/react-components/react-jsx-runtime/src/jsx/createElementFromSlotComponent.ts
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import type { SlotComponentType } from '@fluentui/react-utilities';
 import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
+import type { SlotPropsDataType } from '../utils/types';
 
 /**
  * @internal
  * creates a ReactElement from a slot declaration
  */
-export function createElementFromSlotComponent<Props extends UnknownSlotProps>(
+export function createElementFromSlotComponent<Props extends SlotPropsDataType>(
   type: SlotComponentType<Props>,
   overrideChildren: React.ReactNode[],
 ): React.ReactElement<Props> {
diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts
index 49f3e1378ff8a..09b6299670681 100644
--- a/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts
+++ b/packages/react-components/react-jsx-runtime/src/jsx/jsxDEVSlot.ts
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { SlotComponentType } from '@fluentui/react-utilities';
 import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
 import { DevRuntime } from '../utils/DevRuntime';
+import type { SlotPropsDataType } from '../utils/types';
 
-export const jsxDEVSlot = <Props extends UnknownSlotProps>(
+export const jsxDEVSlot = <Props extends SlotPropsDataType>(
   type: SlotComponentType<Props>,
   overrideProps: Props | null,
   key?: React.Key,
diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxSlot.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxSlot.ts
index ebfa184124b92..7b3825d74eecc 100644
--- a/packages/react-components/react-jsx-runtime/src/jsx/jsxSlot.ts
+++ b/packages/react-components/react-jsx-runtime/src/jsx/jsxSlot.ts
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { SlotComponentType } from '@fluentui/react-utilities';
 import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
 import { Runtime } from '../utils/Runtime';
+import type { SlotPropsDataType } from '../utils/types';
 
-export const jsxSlot = <Props extends UnknownSlotProps>(
+export const jsxSlot = <Props extends SlotPropsDataType>(
   type: SlotComponentType<Props>,
   overrideProps: Props | null,
   key?: React.Key,
diff --git a/packages/react-components/react-jsx-runtime/src/jsx/jsxsSlot.ts b/packages/react-components/react-jsx-runtime/src/jsx/jsxsSlot.ts
index 756df8bc6531b..90e20de6a911a 100644
--- a/packages/react-components/react-jsx-runtime/src/jsx/jsxsSlot.ts
+++ b/packages/react-components/react-jsx-runtime/src/jsx/jsxsSlot.ts
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import { SlotComponentType } from '@fluentui/react-utilities';
 import { getMetadataFromSlotComponent } from '../utils/getMetadataFromSlotComponent';
 import { Runtime } from '../utils/Runtime';
+import type { SlotPropsDataType } from '../utils/types';
 
-export const jsxsSlot = <Props extends UnknownSlotProps>(
+export const jsxsSlot = <Props extends SlotPropsDataType>(
   type: SlotComponentType<Props>,
   overrideProps: Props | null,
   key?: React.Key,
diff --git a/packages/react-components/react-jsx-runtime/src/utils/getMetadataFromSlotComponent.ts b/packages/react-components/react-jsx-runtime/src/utils/getMetadataFromSlotComponent.ts
index 8c95fd3ba8004..ce958b6a194a4 100644
--- a/packages/react-components/react-jsx-runtime/src/utils/getMetadataFromSlotComponent.ts
+++ b/packages/react-components/react-jsx-runtime/src/utils/getMetadataFromSlotComponent.ts
@@ -1,18 +1,19 @@
 import type * as React from 'react';
 import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
-import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import type { SlotComponentType } from '@fluentui/react-utilities';
+import type { SlotPropsDataType } from './types';
 
 /**
  * @internal
  */
-export function getMetadataFromSlotComponent<Props extends UnknownSlotProps>(type: SlotComponentType<Props>) {
+export function getMetadataFromSlotComponent<Props extends SlotPropsDataType>(type: SlotComponentType<Props>) {
   const {
     as,
     [SLOT_ELEMENT_TYPE_SYMBOL]: baseElementType,
     [SLOT_RENDER_FUNCTION_SYMBOL]: renderFunction,
     ...propsWithoutMetadata
   } = type;
-  const props = propsWithoutMetadata as UnknownSlotProps as Props;
+  const props = propsWithoutMetadata as SlotPropsDataType as Props;
 
   const elementType = (
     typeof baseElementType === 'string' ? as ?? baseElementType : baseElementType
diff --git a/packages/react-components/react-jsx-runtime/src/utils/types.ts b/packages/react-components/react-jsx-runtime/src/utils/types.ts
index 218d95aa9e587..0ee58809359ec 100644
--- a/packages/react-components/react-jsx-runtime/src/utils/types.ts
+++ b/packages/react-components/react-jsx-runtime/src/utils/types.ts
@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { SlotComponentType, UnknownSlotProps } from '@fluentui/react-utilities';
+import type { SlotComponentType } from '@fluentui/react-utilities';
 
 export type JSXRuntime = <P extends {}>(
   type: React.ElementType<P>,
@@ -9,10 +9,22 @@ export type JSXRuntime = <P extends {}>(
   self?: unknown,
 ) => React.ReactElement<P>;
 
-export type JSXSlotRuntime = <Props extends UnknownSlotProps>(
+export type JSXSlotRuntime = <Props extends SlotPropsDataType>(
   type: SlotComponentType<Props>,
   overrideProps: Props | null,
   key?: React.Key,
   source?: unknown,
   self?: unknown,
 ) => React.ReactElement<Props>;
+
+/**
+ * @internal
+ *
+ * This should ONLY be used in type templates as in `extends SlotPropsDataType`;
+ * it shouldn't be used as a component's Slot props type.
+ */
+export type SlotPropsDataType = {
+  as?: keyof JSX.IntrinsicElements;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  children?: any;
+};
diff --git a/packages/react-components/react-list/library/src/components/List/List.cy.tsx b/packages/react-components/react-list/library/src/components/List/List.cy.tsx
index cf564ae43a0a8..7a3928da40856 100644
--- a/packages/react-components/react-list/library/src/components/List/List.cy.tsx
+++ b/packages/react-components/react-list/library/src/components/List/List.cy.tsx
@@ -5,6 +5,7 @@ import { teamsLightTheme } from '@fluentui/react-theme';
 
 import { List } from './List';
 import { ListItem } from '../ListItem';
+import type { ListProps } from './List.types';
 import { SelectionItemId } from '@fluentui/react-utilities';
 
 const mount = (element: JSX.Element) => {
@@ -72,11 +73,11 @@ type SelectionTestListProps = {
 const SelectionTestList = ({ selectionMode, defaultSelectedItems, controlled }: SelectionTestListProps) => {
   const [selectedItems, setSelectedItems] = React.useState(defaultSelectedItems || []);
 
-  const onChange = React.useCallback((_, { selectedItems: selected }) => {
+  const onChange = React.useCallback<NonNullable<ListProps['onSelectionChange']>>((_, { selectedItems: selected }) => {
     setSelectedItems(selected);
   }, []);
 
-  const onSelectLastClick = React.useCallback(_ => {
+  const onSelectLastClick = React.useCallback(() => {
     setSelectedItems(['list-item-3']);
   }, []);
 
diff --git a/packages/react-components/react-menu/library/etc/react-menu.api.md b/packages/react-components/react-menu/library/etc/react-menu.api.md
index c6b8c4d7e2759..7e7da093a08a4 100644
--- a/packages/react-components/react-menu/library/etc/react-menu.api.md
+++ b/packages/react-components/react-menu/library/etc/react-menu.api.md
@@ -12,6 +12,7 @@ import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ContextSelector } from '@fluentui/react-context-selector';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
@@ -157,7 +158,7 @@ export type MenuItemLinkSlots = {
 export type MenuItemLinkState = ComponentState<MenuItemLinkSlots>;
 
 // @public (undocumented)
-export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> & Pick<Partial<MenuItemSlots>, 'content'> & {
+export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
     hasSubmenu?: boolean;
     persistOnClick?: boolean;
     disabled?: boolean;
@@ -189,7 +190,7 @@ export type MenuItemSelectableState = MenuItemSelectableProps & {
 
 // @public (undocumented)
 export type MenuItemSlots = {
-    root: Slot<'div'>;
+    root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;
     icon?: Slot<'span'>;
     checkmark?: Slot<'span'>;
     submenuIndicator?: Slot<'span'>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
index f8e0576690f44..6c1ff5e5c3106 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/MenuItem.types.ts
@@ -1,7 +1,7 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';
 
 export type MenuItemSlots = {
-  root: Slot<'div'>;
+  root: Slot<Omit<ExtractSlotProps<Slot<'div'>>, 'content'>>;
 
   /**
    * Icon slot rendered before children content
@@ -36,29 +36,28 @@ export type MenuItemSlots = {
   subText?: Slot<'span'>;
 };
 
-export type MenuItemProps = Omit<ComponentProps<Partial<MenuItemSlots>>, 'content'> &
-  Pick<Partial<MenuItemSlots>, 'content'> & {
-    /**
-     * If the menu item is a trigger for a submenu
-     *
-     * @default false
-     */
-    hasSubmenu?: boolean;
+export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & {
+  /**
+   * If the menu item is a trigger for a submenu
+   *
+   * @default false
+   */
+  hasSubmenu?: boolean;
 
-    /**
-     * Clicking on the menu item will not dismiss an open menu
-     *
-     * @default false
-     */
-    persistOnClick?: boolean;
+  /**
+   * Clicking on the menu item will not dismiss an open menu
+   *
+   * @default false
+   */
+  persistOnClick?: boolean;
 
-    disabled?: boolean;
-    /**
-     * @deprecated this property does nothing.
-     * disabled focusable is by default by simply using `disabled` property
-     */
-    disabledFocusable?: boolean;
-  };
+  disabled?: boolean;
+  /**
+   * @deprecated this property does nothing.
+   * disabled focusable is by default by simply using `disabled` property
+   */
+  disabledFocusable?: boolean;
+};
 
 export type MenuItemState = ComponentState<MenuItemSlots> &
   Required<Pick<MenuItemProps, 'disabled' | 'hasSubmenu' | 'persistOnClick'>>;
diff --git a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
index 750a3deeda900..88e2d5e50dcd9 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItem/useMenuItem.tsx
@@ -19,12 +19,7 @@ import {
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import {
-  ARIAButtonElement,
-  ARIAButtonElementIntersection,
-  ARIAButtonProps,
-  useARIAButtonProps,
-} from '@fluentui/react-aria';
+import { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 import { useIsInMenuSplitGroup, useMenuSplitGroupContext_unstable } from '../../contexts/menuSplitGroupContext';
 
@@ -37,7 +32,13 @@ const ChevronLeftIcon = bundleIcon(ChevronLeftFilled, ChevronLeftRegular);
 export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIAButtonElement<'div'>>): MenuItemState => {
   const isSubmenuTrigger = useMenuTriggerContext_unstable();
   const persistOnClickContext = useMenuContext_unstable(context => context.persistOnItemClick);
-  const { as = 'div', disabled = false, hasSubmenu = isSubmenuTrigger, persistOnClick = persistOnClickContext } = props;
+  const {
+    disabled = false,
+    hasSubmenu = isSubmenuTrigger,
+    persistOnClick = persistOnClickContext,
+    content,
+    ...rest
+  } = props;
   const { hasIcons, hasCheckmarks } = useIconAndCheckmarkAlignment({ hasSubmenu });
   const setOpen = useMenuContext_unstable(context => context.setOpen);
   useNotifySplitItemMultiline({ multiline: !!props.subText, hasSubmenu });
@@ -60,11 +61,11 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       subText: 'span',
     },
     root: slot.always(
-      getIntrinsicElementProps(
-        as,
-        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
+      getIntrinsicElementProps<MenuItemProps>(
+        'div',
+        useARIAButtonProps('div', {
           role: 'menuitem',
-          ...props,
+          ...rest,
           disabled: false,
           disabledFocusable: disabled,
           ref: useMergedRefs(ref, innerRef) as React.Ref<ARIAButtonElementIntersection<'div'>>,
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
index d9aaa4f21d54e..480635aea7398 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemLink/useMenuItemLink.ts
@@ -27,6 +27,7 @@ export const useMenuItemLink_unstable = (
   return {
     ...baseState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...baseState.components,
       root: 'a',
     },
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx
index 0099c7f05ebc9..6ef0a923a359e 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx
+++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitch.tsx
@@ -29,6 +29,7 @@ export const useMenuItemSwitch_unstable = (
       },
     }),
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...baseState.components,
       switchIndicator: 'span',
     },
diff --git a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts
index eca6a62d4704d..76ab563a43efd 100644
--- a/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts
+++ b/packages/react-components/react-menu/library/src/components/MenuItemSwitch/useMenuItemSwitchStyles.styles.ts
@@ -135,6 +135,7 @@ export const useMenuItemSwitchStyles_unstable = (state: MenuItemSwitchState): Me
   useMenuItemStyles_unstable({
     ...state,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...state.components,
       checkmark: 'span',
       submenuIndicator: 'span',
diff --git a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
index 5414b326c1d7a..9c897364c7d31 100644
--- a/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
+++ b/packages/react-components/react-migration-v0-v9/library/etc/react-migration-v0-v9.api.md
@@ -157,9 +157,9 @@ export const input: {
 // @public (undocumented)
 export const ItemLayout: React_2.ForwardRefExoticComponent<Omit<ItemLayoutSlots, "root"> & Omit<{
     as?: "div" | undefined;
-} & Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
-} & {
+}, "children"> & {
     children?: React_2.ReactNode | SlotRenderFunction<Pick<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React_2.HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React_2.RefObject<HTMLDivElement> | null | undefined;
     }>;
diff --git a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
index 017cb6c9a017a..d48d24a3421e0 100644
--- a/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
+++ b/packages/react-components/react-migration-v8-v9/library/etc/react-migration-v8-v9.api.md
@@ -42,7 +42,7 @@ export const brandWeb: BrandVariants;
 export const ButtonShim: React_2.ForwardRefExoticComponent<IBaseButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 // @public (undocumented)
-export const CheckboxShim: React_2.ForwardRefExoticComponent<Pick<ICheckboxProps, "label" | "title" | "className" | "key" | "disabled" | "name" | "defaultChecked" | "id" | "onChange" | "componentRef" | "styles" | "theme" | "checked" | "ariaLabel" | "required" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaPositionInSet" | "ariaSetSize" | "boxSide" | "checkmarkIconProps" | "defaultIndeterminate" | "indeterminate" | "inputProps" | "onRenderLabel"> & React_2.RefAttributes<HTMLInputElement>>;
+export const CheckboxShim: React_2.ForwardRefExoticComponent<Pick<ICheckboxProps, "label" | "title" | "key" | "disabled" | "name" | "defaultChecked" | "className" | "id" | "onChange" | "componentRef" | "styles" | "theme" | "checked" | "ariaLabel" | "required" | "ariaDescribedBy" | "ariaLabelledBy" | "ariaPositionInSet" | "ariaSetSize" | "boxSide" | "checkmarkIconProps" | "defaultIndeterminate" | "indeterminate" | "inputProps" | "onRenderLabel"> & React_2.RefAttributes<HTMLInputElement>>;
 
 // @public
 export type ColorVariants = {
diff --git a/packages/react-components/react-motion/library/etc/react-motion.api.md b/packages/react-components/react-motion/library/etc/react-motion.api.md
index dc2e3ace55a27..6d5410f918e55 100644
--- a/packages/react-components/react-motion/library/etc/react-motion.api.md
+++ b/packages/react-components/react-motion/library/etc/react-motion.api.md
@@ -134,7 +134,7 @@ export class PresenceGroup extends React_2.Component<PresenceGroupProps, Presenc
         firstRender: boolean;
     };
     // (undocumented)
-    render(): JSX.Element;
+    render(): React_2.JSX.Element;
 }
 
 // @public (undocumented)
diff --git a/packages/react-components/react-motion/library/package.json b/packages/react-components/react-motion/library/package.json
index 95d7afda836a1..b95f4cc9ff4fe 100644
--- a/packages/react-components/react-motion/library/package.json
+++ b/packages/react-components/react-motion/library/package.json
@@ -28,7 +28,7 @@
     "@fluentui/react-shared-contexts": "^9.23.1",
     "@fluentui/react-utilities": "^9.18.23",
     "@swc/helpers": "^0.5.1",
-    "react-is": "^17.0.2"
+    "react-is": "^18.3.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
diff --git a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx
index 21b87b89d296d..135055c3f27c6 100644
--- a/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx
+++ b/packages/react-components/react-motion/library/src/factories/createPresenceComponent.test.tsx
@@ -483,7 +483,7 @@ describe('PresenceGroupChildContext', () => {
     const TestPresence = createPresenceComponent(motion);
     const { ElementMock } = createElementMock();
 
-    const Wrapper: React.FC<{ visible: boolean }> = ({ children, visible }) => (
+    const Wrapper: React.FC<React.PropsWithChildren<{ visible: boolean }>> = ({ children, visible }) => (
       <PresenceGroupChildContext.Provider value={{ appear: false, onExit, visible, unmountOnExit: true }}>
         {children}
       </PresenceGroupChildContext.Provider>
diff --git a/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.test.tsx b/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.test.tsx
index 23f54758a5f7d..0aae6f1dd811c 100644
--- a/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.test.tsx
+++ b/packages/react-components/react-motion/library/src/hooks/useIsReducedMotion.test.tsx
@@ -25,7 +25,7 @@ describe('useIsReducedMotion', () => {
   it('should return "false" if matchMedia is not supported', () => {
     const targetDocument = createDocumentMock(undefined);
     const { result } = renderHook(() => useIsReducedMotion(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: { children: React.ReactNode }) => (
         <Provider_unstable value={{ targetDocument, dir: 'ltr' }}>{children}</Provider_unstable>
       ),
     });
@@ -38,7 +38,7 @@ describe('useIsReducedMotion', () => {
     const targetDocument = createDocumentMock(matchMediaMock);
 
     const { result } = renderHook(() => useIsReducedMotion(), {
-      wrapper: ({ children }) => (
+      wrapper: ({ children }: { children: React.ReactNode }) => (
         <Provider_unstable value={{ targetDocument, dir: 'ltr' }}>{children}</Provider_unstable>
       ),
     });
diff --git a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.test.tsx b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.test.tsx
index 56451080d3ff3..faa299c14467b 100644
--- a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.test.tsx
+++ b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.test.tsx
@@ -21,11 +21,7 @@ const TestMotion = jest.fn(
 const TestComponent: React.FC<TestComponentProps> = props => {
   const state: TestComponentState = {
     components: {
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      presenceMotion: TestMotion as React.FC<PresenceMotionSlotProps>,
+      presenceMotion: TestMotion,
     },
     presenceMotion: presenceMotionSlot(props.presenceMotion, {
       elementType: TestMotion,
diff --git a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx
index 54f108e3b66c7..f52c1d86585e7 100644
--- a/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx
+++ b/packages/react-components/react-motion/library/src/slots/presenceMotionSlot.tsx
@@ -30,8 +30,6 @@ export type PresenceMotionSlotProps<MotionParams extends Record<string, MotionPa
    */
   as?: keyof JSX.IntrinsicElements;
 
-  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a
-  //       possible value for children
   children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & { children: React.ReactElement }>;
 };
 
diff --git a/packages/react-components/react-motion/library/tsconfig.spec.json b/packages/react-components/react-motion/library/tsconfig.spec.json
index 0e881941843de..895b3d94ecdb6 100644
--- a/packages/react-components/react-motion/library/tsconfig.spec.json
+++ b/packages/react-components/react-motion/library/tsconfig.spec.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "typeRoots": ["../../../../node_modules/@types", "../../../../node_modules/@testing-library"],
+    "types": ["jest", "node", "jest-dom"]
   },
   "include": [
     "**/*.spec.ts",
diff --git a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
index 18ebbac700a69..5c29e08dd3dea 100644
--- a/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
+++ b/packages/react-components/react-overflow/library/src/useOverflowItem.test.tsx
@@ -23,7 +23,9 @@ describe('useOverflowItem', () => {
         (ref as React.MutableRefObject<HTMLDivElement>).current = document.createElement('div');
       },
       {
-        wrapper: ({ children }) => <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>,
+        wrapper: ({ children }: { children: React.ReactNode }) => (
+          <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>
+        ),
       },
     );
 
@@ -50,7 +52,9 @@ describe('useOverflowItem', () => {
         (ref as React.MutableRefObject<HTMLDivElement>).current = document.createElement('div');
       },
       {
-        wrapper: ({ children }) => <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>,
+        wrapper: ({ children }: { children: React.ReactNode }) => (
+          <OverflowContext.Provider value={value}>{children}</OverflowContext.Provider>
+        ),
       },
     );
 
diff --git a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
index f34e55f04d66f..5a5feb1adb5b6 100644
--- a/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
+++ b/packages/react-components/react-portal-compat/src/PortalCompatProvider.test.tsx
@@ -10,7 +10,7 @@ import { PortalCompatProvider, useProviderThemeClasses } from './PortalCompatPro
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
-const TestWrapperWithMultipleClasses: React.FC = props => {
+const TestWrapperWithMultipleClasses: React.FC<React.PropsWithChildren> = props => {
   // Creates a second className with CSS variables
   const { styleTagId } = useFluentProviderThemeStyleTag({
     theme: { borderRadiusCircular: '50px' },
@@ -32,7 +32,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes from FluentProvider', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>
@@ -61,7 +61,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes with custom ID prefix', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <IdPrefixProvider value="custom1-">
           <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
             <PortalCompatProvider>{props.children}</PortalCompatProvider>
@@ -79,7 +79,7 @@ describe('useProviderThemeClasses', () => {
 
   it('handles classes with a React 18 compatible ID', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <ThemeClassNameProvider value="fui-FluentProviderR1a">
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </ThemeClassNameProvider>
@@ -95,7 +95,7 @@ describe('useProviderThemeClasses', () => {
 
   it('returns only proper classes', () => {
     const { result } = renderHook(() => useProviderThemeClasses(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <ThemeClassNameProvider value="foo bar baz">
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </ThemeClassNameProvider>
@@ -133,7 +133,7 @@ describe('PortalCompatProvider', () => {
   it('during register adds a className from "ThemeClassNameContext" context', () => {
     const element = document.createElement('div');
     const { result } = renderHook(() => usePortalCompat(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>
@@ -167,7 +167,7 @@ describe('PortalCompatProvider', () => {
     const element = document.createElement('div');
 
     const { result } = renderHook(() => usePortalCompat(), {
-      wrapper: props => (
+      wrapper: (props: React.PropsWithChildren) => (
         <FluentProvider theme={{ colorNeutralBackground1: '#ccc' }}>
           <PortalCompatProvider>{props.children}</PortalCompatProvider>
         </FluentProvider>
diff --git a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx
index 897b6490e40aa..c36a01fd8eb8c 100644
--- a/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx
+++ b/packages/react-components/react-portal/library/src/components/Portal/usePortalMountNode.test.tsx
@@ -16,7 +16,7 @@ describe('usePortalMountNode', () => {
   it('creates an element and attaches it to "mountNode"', () => {
     const mountNode = document.createElement('div');
     const { result } = renderHook(() => usePortalMountNode({}), {
-      wrapper: props => <PortalMountNodeProvider {...props} value={mountNode} />,
+      wrapper: () => <PortalMountNodeProvider value={mountNode} />,
     });
 
     expect(result.current).toBeInstanceOf(HTMLDivElement);
diff --git a/packages/react-components/react-portal/library/tsconfig.spec.json b/packages/react-components/react-portal/library/tsconfig.spec.json
index 11f8254e711f4..9acb691220b29 100644
--- a/packages/react-components/react-portal/library/tsconfig.spec.json
+++ b/packages/react-components/react-portal/library/tsconfig.spec.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "typeRoots": ["../../../../node_modules/@types", "../../../../node_modules/@testing-library"],
+    "types": ["jest", "node", "jest-dom"]
   },
   "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
 }
diff --git a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
index 76476bd3ef430..afbf087a7cdcf 100644
--- a/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
+++ b/packages/react-components/react-provider/library/src/components/FluentProvider/useFluentProvider.test.tsx
@@ -17,7 +17,7 @@ describe('useFluentProvider_unstable', () => {
   });
 
   it(`should warn user if no theme was set in parent or child`, () => {
-    const Wrapper: React.FC = ({ children }) => <FluentProvider>{children}</FluentProvider>;
+    const Wrapper: React.FC<React.PropsWithChildren> = ({ children }) => <FluentProvider>{children}</FluentProvider>;
 
     const { result } = renderHook(() => useFluentProvider_unstable({}, React.createRef()), {
       wrapper: Wrapper,
@@ -41,7 +41,9 @@ describe('useFluentProvider_unstable', () => {
       strokeWidthThin: '20px',
     };
 
-    const Wrapper: React.FC = ({ children }) => <FluentProvider theme={themeA}>{children}</FluentProvider>;
+    const Wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+      <FluentProvider theme={themeA}>{children}</FluentProvider>
+    );
 
     const { result } = renderHook(() => useFluentProvider_unstable({ theme: themeB }, React.createRef()), {
       wrapper: Wrapper,
@@ -66,7 +68,7 @@ describe('useFluentProvider_unstable', () => {
       inputDefaultAppearance: 'filled-darker',
     };
 
-    const Wrapper: React.FC = ({ children }) => (
+    const Wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
       <FluentProvider overrides_unstable={overridesA}>{children}</FluentProvider>
     );
 
@@ -131,7 +133,7 @@ describe('useFluentProvider_unstable', () => {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         () => useFluentProvider_unstable({ customStyleHooks_unstable: customStylesB }, React.createRef()),
         {
-          wrapper: ({ children }) => (
+          wrapper: ({ children }: { children: React.ReactNode }) => (
             <FluentProvider customStyleHooks_unstable={customStylesA}>{children}</FluentProvider>
           ),
         },
diff --git a/packages/react-components/react-provider/library/tsconfig.spec.json b/packages/react-components/react-provider/library/tsconfig.spec.json
index 0e881941843de..895b3d94ecdb6 100644
--- a/packages/react-components/react-provider/library/tsconfig.spec.json
+++ b/packages/react-components/react-provider/library/tsconfig.spec.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "typeRoots": ["../../../../node_modules/@types", "../../../../node_modules/@testing-library"],
+    "types": ["jest", "node", "jest-dom"]
   },
   "include": [
     "**/*.spec.ts",
diff --git a/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx b/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx
index adb2d131d4685..3238020f64325 100644
--- a/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx
+++ b/packages/react-components/react-provider/stories/src/Provider/FluentProviderFrame.stories.tsx
@@ -53,7 +53,7 @@ const FrameRenderer: React.FunctionComponent<FrameRendererProps> = ({ children }
   );
 };
 
-const Example: React.FC = props => {
+const Example: React.FC<React.PropsWithChildren> = props => {
   const styles = useExampleStyles();
 
   return (
diff --git a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx
index 266a2c08a10d2..6418b53a98285 100644
--- a/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx
+++ b/packages/react-components/react-search/library/src/components/SearchBox/useSearchBox.tsx
@@ -111,6 +111,7 @@ export const useSearchBox_unstable = (props: SearchBoxProps, ref: React.Ref<HTML
   const state: SearchBoxState = {
     ...inputState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...inputState.components,
       dismiss: 'span',
     },
diff --git a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
index 29486f2acbd1e..92c5691437d1f 100644
--- a/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
+++ b/packages/react-components/react-storybook-addon/src/decorators/withFluentProvider.tsx
@@ -47,7 +47,7 @@ export const withFluentProvider = (StoryFn: () => JSX.Element, context: FluentSt
   );
 };
 
-const FluentExampleContainer: React.FC<{ theme: Theme }> = props => {
+const FluentExampleContainer: React.FC<{ theme: Theme; children: React.ReactNode }> = props => {
   const { theme } = props;
 
   const backgroundColor = theme.colorNeutralBackground2;
diff --git a/packages/react-components/react-table/library/etc/react-table.api.md b/packages/react-components/react-table/library/etc/react-table.api.md
index c2810b6abdb86..fadf8bfc18e82 100644
--- a/packages/react-components/react-table/library/etc/react-table.api.md
+++ b/packages/react-components/react-table/library/etc/react-table.api.md
@@ -405,7 +405,7 @@ export interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<
     getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
     selection: TableSelectionState;
     sort: TableSortState<TItem>;
-    tableRef: React_2.Ref<HTMLDivElement>;
+    tableRef: React_2.Ref<HTMLDivElement & HTMLTableElement>;
 }
 
 // @public
diff --git a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx
index 12f54d4f99200..ec467b4b0cc81 100644
--- a/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridBody/DataGridBody.tsx
@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridBody component
  */
 export const DataGridBody: ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridBody_unstable(props, ref);
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridBodyProps>(
+  (props, ref) => {
+    const state = useDataGridBody_unstable(props, ref);
 
-  useDataGridBodyStyles_unstable(state);
+    useDataGridBodyStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridBodyStyles_unstable')(state);
 
-  return renderDataGridBody_unstable(state);
-}) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+    return renderDataGridBody_unstable(state);
+  },
+) as ForwardRefComponent<DataGridBodyProps> & (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
 
 DataGridBody.displayName = 'DataGridBody';
diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx
index 36bfd9647550b..a5e2d692fd742 100644
--- a/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridRow/DataGridRow.tsx
@@ -10,14 +10,16 @@ import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
  * DataGridRow component
  */
 export const DataGridRow: ForwardRefComponent<DataGridRowProps> &
-  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef((props, ref) => {
-  const state = useDataGridRow_unstable(props, ref);
+  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element) = React.forwardRef<HTMLElement, DataGridRowProps>(
+  (props, ref) => {
+    const state = useDataGridRow_unstable(props, ref);
 
-  useDataGridRowStyles_unstable(state);
+    useDataGridRowStyles_unstable(state);
 
-  useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
+    useCustomStyleHook_unstable('useDataGridRowStyles_unstable')(state);
 
-  return renderDataGridRow_unstable(state);
-}) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
+    return renderDataGridRow_unstable(state);
+  },
+) as ForwardRefComponent<DataGridRowProps> & (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
 
 DataGridRow.displayName = 'DataGridRow';
diff --git a/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx b/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx
index 8b71d7d4b6358..a004745273a00 100644
--- a/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx
+++ b/packages/react-components/react-table/library/src/components/DataGridRow/useDataGridRow.tsx
@@ -72,6 +72,7 @@ export const useDataGridRow_unstable = (props: DataGridRowProps, ref: React.Ref<
   return {
     ...baseState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...baseState.components,
       selectionCell: DataGridSelectionCell,
     },
diff --git a/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
index bbf2e096734a5..d537e6ccb085e 100644
--- a/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/library/src/components/TableCellLayout/useTableCellLayout.ts
@@ -22,6 +22,7 @@ export const useTableCellLayout_unstable = (
   props: TableCellLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TableCellLayoutState => {
+  const { content, ...rest } = props;
   const { size } = useTableContext();
 
   return {
@@ -38,7 +39,7 @@ export const useTableCellLayout_unstable = (
         // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
         // but since it would be a breaking change to fix it, we are casting ref to it's proper type
         ref: ref as React.Ref<HTMLDivElement>,
-        ...props,
+        ...rest,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx b/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
index 3770b04f5b33f..068e5a93359ba 100644
--- a/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
+++ b/packages/react-components/react-table/library/src/components/TableSelectionCell/useTableSelectionCell.tsx
@@ -34,6 +34,7 @@ export const useTableSelectionCell_unstable = (
   return {
     ...tableCellState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...tableCellState.components,
       checkboxIndicator: Checkbox,
       radioIndicator: Radio,
diff --git a/packages/react-components/react-table/library/src/hooks/types.ts b/packages/react-components/react-table/library/src/hooks/types.ts
index b1c1e1ba15d61..6b902c8a83089 100644
--- a/packages/react-components/react-table/library/src/hooks/types.ts
+++ b/packages/react-components/react-table/library/src/hooks/types.ts
@@ -142,7 +142,7 @@ export interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<
    * A React.Ref object to be set as a ref for the table.
    * Used with column resizing.
    */
-  tableRef: React.Ref<HTMLDivElement>;
+  tableRef: React.Ref<HTMLDivElement & HTMLTableElement>;
 }
 
 export interface UseTableSortOptions {
diff --git a/packages/react-components/react-table/library/src/hooks/useTableFeatures.ts b/packages/react-components/react-table/library/src/hooks/useTableFeatures.ts
index 133798e72b859..d70f866cdbba5 100644
--- a/packages/react-components/react-table/library/src/hooks/useTableFeatures.ts
+++ b/packages/react-components/react-table/library/src/hooks/useTableFeatures.ts
@@ -22,7 +22,7 @@ export const defaultTableState: TableFeaturesState<unknown> = {
   columns: [],
   // eslint-disable-next-line @typescript-eslint/naming-convention
   columnSizing_unstable: defaultColumnSizingState,
-  tableRef: React.createRef<HTMLDivElement>(),
+  tableRef: React.createRef<HTMLDivElement & HTMLTableElement>(),
 };
 
 export function useTableFeatures<TItem>(
diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
index ebce1ec3bbc93..9b4b0388977dd 100644
--- a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
+++ b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
@@ -22,7 +22,7 @@ import { SelectTabEvent } from '../TabList/TabList.types';
  * @param ref - reference to root HTMLElement of Tab
  */
 export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {
-  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;
+  const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value, ...rest } = props;
 
   const appearance = useTabListContext_unstable(ctx => ctx.appearance);
   const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);
@@ -79,6 +79,9 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
         'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),
         ...focusProps,
         ...props,
+        // FIXME: value is not a valid prop for button
+        value,
+        ...rest,
         disabled,
         onClick: onTabClick,
         onFocus: selectTabOnFocus ? onTabFocus : onFocus,
diff --git a/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx b/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx
index 404b97820bead..0e83e6f7b790e 100644
--- a/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx
+++ b/packages/react-components/react-tabster/src/hooks/useFocusVisible.test.tsx
@@ -20,7 +20,7 @@ const createDocumentMock = (): Document => {
 describe('useFocusVisible', () => {
   describe('targetWindow', () => {
     it('uses a window from context by default', () => {
-      const Wrapper: React.FC<{ targetDocument: Document | undefined }> = props => (
+      const Wrapper: React.FC<{ targetDocument: Document | undefined; children?: React.ReactNode }> = props => (
         <Provider_unstable value={{ dir: 'ltr', targetDocument: props.targetDocument }}>
           {props.children}
         </Provider_unstable>
@@ -49,7 +49,7 @@ describe('useFocusVisible', () => {
       const element = targetDocument.createElement('div');
 
       const { result, rerender } = renderHook<
-        { targetDocument: Document | undefined },
+        { targetDocument: Document | undefined; children?: React.ReactNode },
         React.MutableRefObject<HTMLElement | null>
       >(props => useFocusVisible({ targetDocument: props.targetDocument }), {
         wrapper: props => (
diff --git a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
index 775bbe458bea9..0a7478beb45c9 100644
--- a/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
+++ b/packages/react-components/react-tag-picker/library/src/components/TagPickerOption/useTagPickerOption.ts
@@ -19,6 +19,7 @@ export const useTagPickerOption_unstable = (
   const optionState = useOption_unstable(props, ref);
   const state: TagPickerOptionState = {
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...optionState.components,
       media: 'div',
       secondaryContent: 'span',
diff --git a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
index a0fd39b1e9c9c..5ae73e7bc4b96 100644
--- a/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
+++ b/packages/react-components/react-tags/stories/src/TagGroup/TagGroupOverflow.stories.tsx
@@ -87,7 +87,7 @@ const OverflowMenuItem = (props: OverflowMenuItemProps) => {
 
   return (
     <MenuItem key={tag.value} className={styles.menuItem}>
-      <Tag {...tag} as="span" className={styles.tag} />
+      <Tag {...tag} className={styles.tag} />
     </MenuItem>
   );
 };
diff --git a/packages/react-components/react-text/library/config/tests.js b/packages/react-components/react-text/library/config/tests.js
deleted file mode 100644
index c6c67de97059e..0000000000000
--- a/packages/react-components/react-text/library/config/tests.js
+++ /dev/null
@@ -1,3 +0,0 @@
-/** Jest test setup file. */
-
-require('@testing-library/jest-dom');
diff --git a/packages/react-components/react-text/library/config/tests.ts b/packages/react-components/react-text/library/config/tests.ts
new file mode 100644
index 0000000000000..797b314376f07
--- /dev/null
+++ b/packages/react-components/react-text/library/config/tests.ts
@@ -0,0 +1,3 @@
+/** Jest test setup file. */
+
+import '@testing-library/jest-dom';
diff --git a/packages/react-components/react-text/library/jest.config.js b/packages/react-components/react-text/library/jest.config.js
index 695bb6aa25dd9..e937100b00da7 100644
--- a/packages/react-components/react-text/library/jest.config.js
+++ b/packages/react-components/react-text/library/jest.config.js
@@ -29,6 +29,6 @@ module.exports = {
     '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],
   },
   coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js'],
+  setupFilesAfterEnv: ['./config/tests.ts'],
   snapshotSerializers: ['@griffel/jest-serializer'],
 };
diff --git a/packages/react-components/react-text/library/tsconfig.spec.json b/packages/react-components/react-text/library/tsconfig.spec.json
index 0e881941843de..895b3d94ecdb6 100644
--- a/packages/react-components/react-text/library/tsconfig.spec.json
+++ b/packages/react-components/react-text/library/tsconfig.spec.json
@@ -3,7 +3,8 @@
   "compilerOptions": {
     "module": "CommonJS",
     "outDir": "dist",
-    "types": ["jest", "node", "@testing-library/jest-dom"]
+    "typeRoots": ["../../../../node_modules/@types", "../../../../node_modules/@testing-library"],
+    "types": ["jest", "node", "jest-dom"]
   },
   "include": [
     "**/*.spec.ts",
diff --git a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
index 415a4946105be..d013463997bd1 100644
--- a/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
+++ b/packages/react-components/react-toast/library/src/components/AriaLive/AriaLive.tsx
@@ -7,7 +7,7 @@ import type { AriaLiveProps } from './AriaLive.types';
 /**
  * A component that manages aria live announcements imperatively
  */
-export const AriaLive: React.FC<AriaLiveProps> = props => {
+export const AriaLive: React.FC<React.PropsWithChildren<AriaLiveProps>> = props => {
   const state = useAriaLive_unstable(props);
 
   useAriaLiveStyles_unstable(state);
diff --git a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
index 3de56e5f4c1c6..f36c75a3a3fc4 100644
--- a/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
+++ b/packages/react-components/react-toast/library/src/components/ToastContainer/useToastContainer.ts
@@ -50,6 +50,7 @@ export const useToastContainer_unstable = (
     pauseOnWindowBlur,
     imperativeRef,
     tryRestoreFocus,
+    content,
     ...rest
   } = props;
   const titleId = useId('toast-title');
@@ -131,8 +132,8 @@ export const useToastContainer_unstable = (
 
   // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController
   const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;
-  const onMotionFinish: ToastContainerState['onMotionFinish'] = React.useCallback(
-    (_, { direction }) => {
+  const onMotionFinish = React.useCallback(
+    (_: null, { direction }: { direction: 'enter' | 'exit' }) => {
       if (direction === 'exit') {
         remove();
       }
diff --git a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
index a93d5166447df..c584667de8385 100644
--- a/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
+++ b/packages/react-components/react-toolbar/library/src/components/ToolbarGroup/useToolbarGroup.ts
@@ -16,7 +16,7 @@ export const useToolbarGroup_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {
+      getIntrinsicElementProps('div', {
         ref,
         role: 'presentation',
         ...props,
diff --git a/packages/react-components/react-tree/library/src/hooks/useRootTree.ts b/packages/react-components/react-tree/library/src/hooks/useRootTree.ts
index f7714274176ce..0becfe3a82e1b 100644
--- a/packages/react-components/react-tree/library/src/hooks/useRootTree.ts
+++ b/packages/react-components/react-tree/library/src/hooks/useRootTree.ts
@@ -2,7 +2,6 @@ import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/reac
 import type { TreeCheckedChangeData, TreeProps, TreeState } from '../Tree';
 import * as React from 'react';
 import { Collapse } from '@fluentui/react-motion-components-preview';
-import { PresenceMotionSlotProps } from '@fluentui/react-motion';
 import { TreeContextValue, TreeItemRequest } from '../contexts/treeContext';
 import { createCheckedItems } from '../utils/createCheckedItems';
 import { treeDataTypes } from '../utils/tokens';
@@ -80,11 +79,7 @@ export function useRootTree(
   return {
     components: {
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,
+      collapseMotion: Collapse,
     },
     contextType: 'root',
     selectionMode,
diff --git a/packages/react-components/react-tree/library/src/hooks/useSubtree.ts b/packages/react-components/react-tree/library/src/hooks/useSubtree.ts
index bb79652f6d094..9c6da0f8061fe 100644
--- a/packages/react-components/react-tree/library/src/hooks/useSubtree.ts
+++ b/packages/react-components/react-tree/library/src/hooks/useSubtree.ts
@@ -26,11 +26,7 @@ export function useSubtree(
     open,
     components: {
       root: 'div',
-      // TODO: remove once React v18 slot API is modified
-      // This is a problem at the moment due to UnknownSlotProps assumption
-      // that `children` property is `ReactNode`, which in this case is not valid
-      // as PresenceComponentProps['children'] is `ReactElement`
-      collapseMotion: Collapse as React.FC<PresenceMotionSlotProps>,
+      collapseMotion: Collapse,
     },
     level: parentLevel + 1,
     root: slot.always(
diff --git a/packages/react-components/react-utilities/etc/react-utilities.api.md b/packages/react-components/react-utilities/etc/react-utilities.api.md
index 7bf62331fcf8b..bf8ac50530ccb 100644
--- a/packages/react-components/react-utilities/etc/react-utilities.api.md
+++ b/packages/react-components/react-utilities/etc/react-utilities.api.md
@@ -7,7 +7,7 @@
 import * as React_2 from 'react';
 
 // @public
-function always<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
+function always<Props extends SlotPropsDataType>(value: Props | SlotShorthandValue | undefined, options: SlotOptions<Props>): SlotComponentType<Props>;
 
 // @internal
 export function applyTriggerPropsToChildren<TriggerChildProps>(children: TriggerProps<TriggerChildProps>['children'], triggerChildProps: TriggerChildProps): React_2.ReactElement | null;
@@ -27,10 +27,10 @@ export type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof
 // @public
 export type ComponentState<Slots extends SlotPropsRecord> = {
     components: {
-        [Key in keyof Slots]-?: React_2.ComponentType<ExtractSlotProps<Slots[Key]>> | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+        [Key in keyof Slots]-?: React_2.ElementType;
     };
 } & {
-    [Key in keyof Slots]: ReplaceNullWithUndefined<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>;
+    [Key in keyof Slots]: ReplaceNullWithUndefined<WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>>;
 };
 
 // @internal (undocumented)
@@ -63,7 +63,7 @@ export type FluentTriggerComponent = {
 };
 
 // @public
-export type ForwardRefComponent<Props> = React_2.ForwardRefExoticComponent<Props & React_2.RefAttributes<InferredElementRefType<Props>>>;
+export type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
 
 // @public
 export function getEventClientCoords(event: TouchOrMouseEvent): {
@@ -72,7 +72,7 @@ export function getEventClientCoords(event: TouchOrMouseEvent): {
 };
 
 // @public
-export const getIntrinsicElementProps: <Props extends UnknownSlotProps, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "as" | keyof HTMLAttributes>>;
+export const getIntrinsicElementProps: <Props extends SlotPropsDataType, ExcludedPropKeys extends Extract<keyof Props, string> = never>(tagName: NonNullable<Props["as"]>, props: Props & React_2.RefAttributes<InferredElementRefType<Props>>, excludedPropNames?: ExcludedPropKeys[] | undefined) => DistributiveOmit<Props, ExcludedPropKeys | Exclude<keyof Props, "children" | "slot" | "style" | "title" | "as" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">>;
 
 // @public @deprecated
 export function getNativeElementProps<TAttributes extends React_2.HTMLAttributes<any>>(tagName: string, props: {}, excludedPropNames?: string[]): TAttributes;
@@ -97,13 +97,13 @@ export const getPartitionedNativeProps: <Props extends Pick<React_2.HTMLAttribut
 export const getRTLSafeKey: (key: string, dir: 'ltr' | 'rtl') => string;
 
 // @public @deprecated
-export function getSlots<R extends SlotPropsRecord>(state: ComponentState<R>): {
+export function getSlots<R extends SlotPropsRecord>(state: unknown): {
     slots: Slots<R>;
     slotProps: ObjectSlotProps<R>;
 };
 
 // @internal @deprecated
-export function getSlotsNext<R extends SlotPropsRecord>(state: ComponentState<R>): {
+export function getSlotsNext<R extends SlotPropsRecord>(state: unknown): {
     slots: Slots<R>;
     slotProps: ObjectSlotProps<R>;
 };
@@ -134,7 +134,7 @@ export function isInteractiveHTMLElement(element: unknown): boolean;
 export function isMouseEvent(event: TouchOrMouseEvent): event is MouseEvent | React_2.MouseEvent;
 
 // @public
-export function isResolvedShorthand<Shorthand extends Slot<UnknownSlotProps>>(shorthand?: Shorthand): shorthand is ExtractSlotProps<Shorthand>;
+export function isResolvedShorthand<Shorthand extends Slot<SlotPropsDataType>>(shorthand?: Shorthand): shorthand is ExtractSlotProps<Shorthand>;
 
 // @public
 export function isSlot<Props extends {}>(element: unknown): element is SlotComponentType<Props>;
@@ -160,7 +160,7 @@ export type OnSelectionChangeData = {
 };
 
 // @public
-function optional<Props extends UnknownSlotProps>(value: Props | SlotShorthandValue | undefined | null, options: {
+function optional<Props extends SlotPropsDataType>(value: Props | SlotShorthandValue | undefined | null, options: {
     renderByDefault?: boolean;
 } & SlotOptions<Props>): SlotComponentType<Props> | undefined;
 
@@ -187,6 +187,12 @@ export interface PriorityQueue<T> {
 // @public (undocumented)
 export type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
 
+// @public (undocumented)
+export interface RefAttributes<T> extends React_2.Attributes {
+    // (undocumented)
+    ref?: React_2.Ref<T> | undefined;
+}
+
 // @public
 export type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T | null) => void);
 
@@ -194,15 +200,15 @@ export type RefObjectFunction<T> = React_2.RefObject<T> & ((value: T | null) =>
 export function resetIdsForTests(): void;
 
 // @public @deprecated
-export const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps>;
+export const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType>;
 
 // @public
-function resolveShorthand_2<Props extends UnknownSlotProps | null | undefined>(value: Props | SlotShorthandValue): Props;
+function resolveShorthand_2<Props extends SlotPropsDataType | null | undefined>(value: Props | SlotShorthandValue): Props;
 
 // @public @deprecated (undocumented)
-export type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
-    <P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): P;
-    <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): P | undefined;
+export type ResolveShorthandFunction<Props extends SlotPropsDataType = SlotPropsDataType> = {
+    <P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): WithoutSlotRenderFunction<P>;
+    <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>): WithoutSlotRenderFunction<P> | undefined;
 };
 
 // @public @deprecated (undocumented)
@@ -249,13 +255,11 @@ export { SelectionMode_2 as SelectionMode }
 export function setVirtualParent(child: Node, parent?: Node): void;
 
 // @public
-export type Slot<Type extends keyof JSX.IntrinsicElements | React_2.ComponentType | React_2.VoidFunctionComponent | UnknownSlotProps, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
+export type Slot<Type extends keyof JSX.IntrinsicElements | ComponentType<any> | SlotPropsDataType, AlternateAs extends keyof JSX.IntrinsicElements = never> = IsSingleton<Extract<Type, string>> extends true ? WithSlotShorthandValue<Type extends keyof JSX.IntrinsicElements ? {
     as?: Type;
-} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends React_2.ComponentType<infer Props> ? WithSlotRenderFunction<Props> : Type> | {
-    [As in AlternateAs]: {
-        as: As;
-    } & WithSlotRenderFunction<IntrinsicElementProps<As>>;
-}[AlternateAs] | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
+} & WithSlotRenderFunction<IntrinsicElementProps<Type>> : Type extends ComponentType<infer Props> ? Props extends SlotPropsDataType ? Props : WithSlotRenderFunction<Props> : Type> | (AlternateAs extends unknown ? {
+    as: AlternateAs;
+} & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>> : never) | null : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
 
 declare namespace slot {
     export {
@@ -279,31 +283,34 @@ export type SlotClassNames<Slots> = {
 };
 
 // @public
-export type SlotComponentType<Props> = Props & {
-    (props: React_2.PropsWithChildren<{}>): React_2.ReactElement | null;
+export type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> & FunctionComponent<{
+    children?: ReactNode;
+}> & {
     [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;
-    [SLOT_ELEMENT_TYPE_SYMBOL]: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+    [SLOT_ELEMENT_TYPE_SYMBOL]: ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
 };
 
 // @public (undocumented)
-export type SlotOptions<Props extends UnknownSlotProps> = {
+export type SlotOptions<Props extends SlotPropsDataType> = {
     elementType: React_2.ComponentType<Props> | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
-    defaultProps?: Partial<Props>;
+    defaultProps?: Partial<Props & {
+        ref?: React_2.Ref<InferredElementRefType<Props>>;
+    }>;
 };
 
 // @public
-export type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+export type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;
 
 // @public (undocumented)
-export type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => React_2.ReactNode;
+export type SlotRenderFunction<Props> = (Component: React_2.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
 
 // @public @deprecated (undocumented)
 export type Slots<S extends SlotPropsRecord> = {
-    [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As> ? As : ExtractSlotProps<S[K]> extends React_2.ComponentType<infer P> ? React_2.ElementType<NonNullable<P>> : React_2.ElementType<ExtractSlotProps<S[K]>>;
+    [K in keyof S]: React_2.ElementType<any>;
 };
 
 // @public
-export type SlotShorthandValue = React_2.ReactChild | React_2.ReactNode[] | React_2.ReactPortal;
+export type SlotShorthandValue = React_2.ReactElement | string | number | Iterable<ReactNode> | React_2.ReactPortal;
 
 // @public
 export const SSRProvider: React_2.FC<{
@@ -321,7 +328,7 @@ export type TriggerProps<TriggerChildProps = unknown> = {
 // @public
 export type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) extends (x: infer I) => U ? I : never;
 
-// @public
+// @public @deprecated (undocumented)
 export type UnknownSlotProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'> & {
     as?: keyof JSX.IntrinsicElements;
 };
diff --git a/packages/react-components/react-utilities/src/compose/assertSlots.ts b/packages/react-components/react-utilities/src/compose/assertSlots.ts
index 5b2d20d1ad38f..bf93df9657d74 100644
--- a/packages/react-components/react-utilities/src/compose/assertSlots.ts
+++ b/packages/react-components/react-utilities/src/compose/assertSlots.ts
@@ -34,6 +34,7 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
    */
   if (process.env.NODE_ENV !== 'production') {
     const typedState = state as ComponentState<Slots>;
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
     for (const slotName of Object.keys(typedState.components)) {
       const slotElement = typedState[slotName];
       if (slotElement === undefined) {
@@ -44,6 +45,7 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
       // FIXME: this slot will still fail to support child render function scenario
       if (!isSlot(slotElement)) {
         typedState[slotName as keyof ComponentState<Slots>] = slot.always(slotElement, {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           elementType: typedState.components[slotName] as React.ComponentType<{}>,
         }) as ComponentState<Slots>[keyof ComponentState<Slots>];
         // eslint-disable-next-line no-console
@@ -56,13 +58,17 @@ export function assertSlots<Slots extends SlotPropsRecord>(state: unknown): asse
         // This means a slot is being declared by using resolveShorthand on the state hook,
         // but the render method is using the new `assertSlots` method. That scenario can be solved by simply updating the slot element with the proper element type
         const { [SLOT_ELEMENT_TYPE_SYMBOL]: elementType } = slotElement;
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         if (elementType !== typedState.components[slotName]) {
+          // eslint-disable-next-line @typescript-eslint/no-deprecated
           slotElement[SLOT_ELEMENT_TYPE_SYMBOL] = typedState.components[slotName] as React.ComponentType<{}>;
           // eslint-disable-next-line no-console
           console.warn(/** #__DE-INDENT__ */ `
             @fluentui/react-utilities [${assertSlots.name}]:
             "state.${slotName}" element type differs from "state.components.${slotName}",
-            ${elementType} !== ${typedState.components[slotName]}.
+            ${elementType} !== ${
+            typedState.components[slotName] /* eslint-disable-line @typescript-eslint/no-deprecated */
+          }.
             Be sure to create slots properly by using "slot.always" or "slot.optional" with the correct elementType.
           `);
         }
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts
index c75947a2bc85b..9fd9c00672f3a 100644
--- a/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts
+++ b/packages/react-components/react-utilities/src/compose/deprecated/getSlots.ts
@@ -1,40 +1,23 @@
 import * as React from 'react';
 import { omit } from '../../utils/omit';
-import type {
-  AsIntrinsicElement,
-  ComponentState,
-  ExtractSlotProps,
-  SlotPropsRecord,
-  SlotRenderFunction,
-  UnknownSlotProps,
-} from '../types';
+import type { ComponentState, SlotPropsRecord, SlotRenderFunction, UnknownSlotProps } from '../types';
 import { isSlot } from '../isSlot';
 import { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';
-import { UnionToIntersection } from '../../utils/types';
 
 /**
  * @deprecated - use slot.always or slot.optional combined with assertSlots instead
  */
 export type Slots<S extends SlotPropsRecord> = {
-  [K in keyof S]: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>
-    ? // for slots with an `as` prop, the slot will be any one of the possible values of `as`
-      As
-    : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>
-    ? React.ElementType<NonNullable<P>>
-    : React.ElementType<ExtractSlotProps<S[K]>>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [K in keyof S]: React.ElementType<any>;
 };
 
 /**
  * @deprecated - use slot.always or slot.optional combined with assertSlots instead
  */
 export type ObjectSlotProps<S extends SlotPropsRecord> = {
-  [K in keyof S]-?: ExtractSlotProps<S[K]> extends AsIntrinsicElement<infer As>
-    ? // For intrinsic element types, return the intersection of all possible
-      // element's props, to be compatible with the As type returned by Slots<>
-      UnionToIntersection<JSX.IntrinsicElements[As]> // Slot<'div', 'span'>
-    : ExtractSlotProps<S[K]> extends React.ComponentType<infer P>
-    ? P // Slot<typeof Button>
-    : ExtractSlotProps<S[K]>; // Slot<ButtonProps>
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [K in keyof S]-?: any; // Slot<ButtonProps>
 };
 
 /**
@@ -57,20 +40,22 @@ export type ObjectSlotProps<S extends SlotPropsRecord> = {
  * @returns An object containing the `slots` map and `slotProps` map.
  */
 export function getSlots<R extends SlotPropsRecord>(
-  state: ComponentState<R>,
+  state: unknown,
 ): {
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   slots: Slots<R>;
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   slotProps: ObjectSlotProps<R>;
 } {
+  const typeState = state as ComponentState<R>;
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const slots = {} as Slots<R>;
   const slotProps = {} as R;
 
-  const slotNames: (keyof R)[] = Object.keys(state.components);
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  const slotNames: (keyof R)[] = Object.keys(typeState.components);
   for (const slotName of slotNames) {
-    const [slot, props] = getSlot(state, slotName);
+    const [slot, props] = getSlot(typeState, slotName);
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     slots[slotName] = slot as Slots<R>[typeof slotName];
     slotProps[slotName] = props;
@@ -96,15 +81,19 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
   const renderFunction = isSlot(props) ? props[SLOT_RENDER_FUNCTION_SYMBOL] : undefined;
 
   const slot = (
-    state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
-      ? asProp || state.components?.[slotName] || 'div'
-      : state.components[slotName]
+    state.components?.[slotName] === undefined || // eslint-disable-line @typescript-eslint/no-deprecated
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    typeof state.components[slotName] === 'string'
+      ? // eslint-disable-next-line @typescript-eslint/no-deprecated
+        asProp || state.components?.[slotName] || 'div'
+      : // eslint-disable-next-line @typescript-eslint/no-deprecated
+        state.components[slotName]
   ) as React.ElementType<R[K]>;
 
   if (renderFunction || typeof children === 'function') {
     const render = (renderFunction || children) as SlotRenderFunction<R[K]>;
     return [
-      React.Fragment,
+      React.Fragment as React.ElementType<R[K]>,
       {
         children: render(slot, rest as Omit<R[K], 'as'>),
       } as unknown as R[K],
@@ -112,6 +101,7 @@ function getSlot<R extends SlotPropsRecord, K extends keyof R>(
   }
 
   const shouldOmitAsProp = typeof slot === 'string' && asProp;
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   const slotProps = (shouldOmitAsProp ? omit(props, ['as']) : (props as UnknownSlotProps)) as R[K];
   return [slot, slotProps];
 }
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.test.tsx b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.test.tsx
index 73fdf5ae2a7ae..fa373e851c2ff 100644
--- a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.test.tsx
+++ b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.test.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { getSlotsNext } from './getSlotsNext';
-import type { ExtractSlotProps, Slot, SlotComponentType, UnknownSlotProps } from '../types';
+import type { ExtractSlotProps, Slot, SlotComponentType, SlotPropsDataType } from '../types';
 import { resolveShorthand } from './resolveShorthand';
 import { SLOT_RENDER_FUNCTION_SYMBOL } from '../constants';
 
-const resolveShorthandMock = <Props extends UnknownSlotProps>(props: Props): SlotComponentType<Props> => {
+const resolveShorthandMock = <Props extends SlotPropsDataType>(props: Props): SlotComponentType<Props> => {
   // casting is required here as SlotComponent is a callable
   return { ...props } as SlotComponentType<Props>;
 };
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts
index 9889ea0654fdf..f8dc0a1f58be6 100644
--- a/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts
+++ b/packages/react-components/react-utilities/src/compose/deprecated/getSlotsNext.ts
@@ -13,21 +13,23 @@ import { ObjectSlotProps, Slots } from './getSlots';
  * @deprecated use slot.always or slot.optional combined with assertSlots instead
  */
 export function getSlotsNext<R extends SlotPropsRecord>(
-  state: ComponentState<R>,
+  state: unknown,
 ): {
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   slots: Slots<R>;
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   slotProps: ObjectSlotProps<R>;
 } {
+  const typedState = state as ComponentState<R>;
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   const slots = {} as Slots<R>;
   const slotProps = {} as R;
 
-  const slotNames: (keyof R)[] = Object.keys(state.components);
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  const slotNames: (keyof R)[] = Object.keys(typedState.components);
   for (const slotName of slotNames) {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    const [slot, props] = getSlotNext(state, slotName);
+    const [slot, props] = getSlotNext(typedState, slotName);
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     slots[slotName] = slot as Slots<R>[typeof slotName];
     slotProps[slotName] = props;
@@ -54,12 +56,17 @@ function getSlotNext<R extends SlotPropsRecord, K extends keyof R>(
   const { as: asProp, ...propsWithoutAs } = props as NonUndefined<typeof props>;
 
   const slot = (
-    state.components?.[slotName] === undefined || typeof state.components[slotName] === 'string'
-      ? asProp || state.components?.[slotName] || 'div'
-      : state.components[slotName]
+    state.components?.[slotName] === undefined || // eslint-disable-line @typescript-eslint/no-deprecated
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    typeof state.components[slotName] === 'string'
+      ? // eslint-disable-next-line @typescript-eslint/no-deprecated
+        asProp || state.components?.[slotName] || 'div'
+      : // eslint-disable-next-line @typescript-eslint/no-deprecated
+        state.components[slotName]
   ) as React.ElementType<R[K]>;
 
   const shouldOmitAsProp = typeof slot === 'string' && asProp;
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   const slotProps: UnknownSlotProps = shouldOmitAsProp ? propsWithoutAs : props;
 
   return [slot, slotProps as R[K]];
diff --git a/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts b/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts
index 5ba28a48fe71c..c29cb45a2f2b2 100644
--- a/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts
+++ b/packages/react-components/react-utilities/src/compose/deprecated/resolveShorthand.ts
@@ -1,5 +1,5 @@
 import * as slot from '../slot';
-import type { SlotShorthandValue, UnknownSlotProps } from '../types';
+import type { SlotPropsDataType, SlotShorthandValue, WithoutSlotRenderFunction } from '../types';
 
 /**
  * @deprecated - use slot.always or slot.optional combined with assertSlots instead
@@ -11,12 +11,15 @@ export type ResolveShorthandOptions<Props, Required extends boolean = false> = R
 /**
  * @deprecated use slot.always or slot.optional combined with assertSlots instead
  */
-export type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlotProps> = {
-  // eslint-disable-next-line @typescript-eslint/no-deprecated
-  <P extends Props>(value: P | SlotShorthandValue | undefined, options: ResolveShorthandOptions<P, true>): P;
+export type ResolveShorthandFunction<Props extends SlotPropsDataType = SlotPropsDataType> = {
+  <P extends Props>(
+    value: P | SlotShorthandValue | undefined,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    options: ResolveShorthandOptions<P, true>,
+  ): WithoutSlotRenderFunction<P>;
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   <P extends Props>(value: P | SlotShorthandValue | null | undefined, options?: ResolveShorthandOptions<P, boolean>):
-    | P
+    | WithoutSlotRenderFunction<P>
     | undefined;
 };
 
@@ -27,14 +30,14 @@ export type ResolveShorthandFunction<Props extends UnknownSlotProps = UnknownSlo
  * @param value - the base shorthand props
  * @param options - options to resolve shorthand props
  *
- * @deprecated use slot.always or slot.optional combined with assertSlots instead
+ * @deprecated use slot.always, slot.optional, slot.resolveShorthand combined with assertSlots instead
  */
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-export const resolveShorthand: ResolveShorthandFunction<UnknownSlotProps> = (value, options) =>
-  slot.optional<UnknownSlotProps>(value, {
+export const resolveShorthand: ResolveShorthandFunction<SlotPropsDataType> = (value, options) =>
+  slot.optional<SlotPropsDataType>(value, {
     ...options,
     renderByDefault: options?.required,
     // elementType as undefined is the way to identify between a slot and a resolveShorthand call
     // in the case elementType is undefined assertSlots will fail, ensuring it'll only work with slot method.
     elementType: undefined!,
-  });
+  }) as WithoutSlotRenderFunction<SlotPropsDataType>;
diff --git a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts b/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
index 65de47f02e09c..3995d19e4ecc3 100644
--- a/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
+++ b/packages/react-components/react-utilities/src/compose/getIntrinsicElementProps.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps } from '../utils/getNativeElementProps';
-import type { InferredElementRefType, UnknownSlotProps } from './types';
+import type { InferredElementRefType, SlotPropsDataType } from './types';
 import type { DistributiveOmit } from '../utils/types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -13,7 +13,7 @@ type HTMLAttributes = React.HTMLAttributes<any>;
  * Equivalent to {@link getNativeElementProps}, but more type-safe.
  */
 export const getIntrinsicElementProps = <
-  Props extends UnknownSlotProps,
+  Props extends SlotPropsDataType,
   ExcludedPropKeys extends Extract<keyof Props, string> = never,
 >(
   /** The slot's default element type (e.g. 'div') */
@@ -25,6 +25,6 @@ export const getIntrinsicElementProps = <
 ) => {
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   return getNativeElementProps<
-    DistributiveOmit<Props, Exclude<keyof Props, keyof HTMLAttributes | keyof UnknownSlotProps> | ExcludedPropKeys>
+    DistributiveOmit<Props, Exclude<keyof Props, keyof HTMLAttributes | keyof SlotPropsDataType> | ExcludedPropKeys>
   >(props.as ?? tagName, props, excludedPropNames);
 };
diff --git a/packages/react-components/react-utilities/src/compose/index.ts b/packages/react-components/react-utilities/src/compose/index.ts
index fb6f26f68e14b..263a5af615ad0 100644
--- a/packages/react-components/react-utilities/src/compose/index.ts
+++ b/packages/react-components/react-utilities/src/compose/index.ts
@@ -10,8 +10,6 @@ export type {
   ForwardRefComponent,
   InferredElementRefType,
   IsSingleton,
-  PropsWithoutChildren,
-  PropsWithoutRef,
   Slot,
   SlotClassNames,
   SlotComponentType,
@@ -20,6 +18,7 @@ export type {
   SlotShorthandValue,
   UnknownSlotProps,
 } from './types';
+
 export { isResolvedShorthand } from './isResolvedShorthand';
 export { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';
 export { isSlot } from './isSlot';
@@ -39,3 +38,4 @@ export { getSlotsNext } from './deprecated/getSlotsNext';
 
 export { slot };
 export type { SlotOptions } from './slot';
+export type { PropsWithoutChildren, PropsWithoutRef } from '../utils/types';
diff --git a/packages/react-components/react-utilities/src/compose/isResolvedShorthand.ts b/packages/react-components/react-utilities/src/compose/isResolvedShorthand.ts
index 9297f04c93675..8a81ebd796009 100644
--- a/packages/react-components/react-utilities/src/compose/isResolvedShorthand.ts
+++ b/packages/react-components/react-utilities/src/compose/isResolvedShorthand.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { ExtractSlotProps, Slot, UnknownSlotProps } from './types';
+import type { ExtractSlotProps, Slot, SlotPropsDataType } from './types';
 
 /**
  * Guard method that validates if a shorthand is a slot
@@ -31,7 +31,7 @@ import type { ExtractSlotProps, Slot, UnknownSlotProps } from './types';
  * })
  * ```
  */
-export function isResolvedShorthand<Shorthand extends Slot<UnknownSlotProps>>(
+export function isResolvedShorthand<Shorthand extends Slot<SlotPropsDataType>>(
   shorthand?: Shorthand,
 ): shorthand is ExtractSlotProps<Shorthand> {
   return (
diff --git a/packages/react-components/react-utilities/src/compose/slot.ts b/packages/react-components/react-utilities/src/compose/slot.ts
index 6520b3fb4d425..20fb4e2d712ce 100644
--- a/packages/react-components/react-utilities/src/compose/slot.ts
+++ b/packages/react-components/react-utilities/src/compose/slot.ts
@@ -3,16 +3,17 @@ import type {
   SlotComponentType,
   SlotRenderFunction,
   SlotShorthandValue,
-  UnknownSlotProps,
+  SlotPropsDataType,
+  InferredElementRefType,
 } from './types';
 import * as React from 'react';
 import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';
 
-export type SlotOptions<Props extends UnknownSlotProps> = {
+export type SlotOptions<Props extends SlotPropsDataType> = {
   elementType:
     | React.ComponentType<Props>
     | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
-  defaultProps?: Partial<Props>;
+  defaultProps?: Partial<Props & { ref?: React.Ref<InferredElementRefType<Props>> }>;
 };
 
 /**
@@ -23,7 +24,7 @@ export type SlotOptions<Props extends UnknownSlotProps> = {
  * * `elementType` - the base element type of a slot, defaults to `'div'`
  * * `defaultProps` - similar to a React component declaration, you can provide a slot default properties to be merged with the shorthand/properties provided.
  */
-export function always<Props extends UnknownSlotProps>(
+export function always<Props extends SlotPropsDataType>(
   value: Props | SlotShorthandValue | undefined,
   options: SlotOptions<Props>,
 ): SlotComponentType<Props> {
@@ -64,7 +65,7 @@ export function always<Props extends UnknownSlotProps>(
  * with the values provided by `options.defaultProps` (or `{}`). This is useful for cases such as providing a default content
  * in case no shorthand is provided, like the case of the `expandIcon` slot for the `AccordionHeader`
  */
-export function optional<Props extends UnknownSlotProps>(
+export function optional<Props extends SlotPropsDataType>(
   value: Props | SlotShorthandValue | undefined | null,
   options: { renderByDefault?: boolean } & SlotOptions<Props>,
 ): SlotComponentType<Props> | undefined {
@@ -79,13 +80,13 @@ export function optional<Props extends UnknownSlotProps>(
  * The main difference between this function and `slot` is that this function does not return the metadata required for a slot to be considered a properly renderable slot, it only converts the value to a slot properties object
  * @param value - the value of the slot, it can be a slot shorthand or a slot properties object
  */
-export function resolveShorthand<Props extends UnknownSlotProps | null | undefined>(
+export function resolveShorthand<Props extends SlotPropsDataType | null | undefined>(
   value: Props | SlotShorthandValue,
 ): Props {
   if (
     typeof value === 'string' ||
     typeof value === 'number' ||
-    Array.isArray(value) ||
+    isIterable(value) ||
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     React.isValidElement<any>(value)
   ) {
@@ -104,3 +105,7 @@ export function resolveShorthand<Props extends UnknownSlotProps | null | undefin
 
   return value;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isIterable = (value: unknown): value is Iterable<any> =>
+  typeof value === 'object' && value !== null && Symbol.iterator in value;
diff --git a/packages/react-components/react-utilities/src/compose/types.ts b/packages/react-components/react-utilities/src/compose/types.ts
index 73b4de70f1d61..cbcf1660e8171 100644
--- a/packages/react-components/react-utilities/src/compose/types.ts
+++ b/packages/react-components/react-utilities/src/compose/types.ts
@@ -1,11 +1,28 @@
 import * as React from 'react';
 import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from './constants';
-import { DistributiveOmit, ReplaceNullWithUndefined } from '../utils/types';
+import {
+  ComponentType,
+  FunctionComponent,
+  NamedExoticComponent,
+  PropsWithoutChildren,
+  PropsWithoutRef,
+  ReactNode,
+  RefAttributes,
+  ReplaceNullWithUndefined,
+} from '../utils/types';
 
-export type SlotRenderFunction<Props> = (
-  Component: React.ElementType<Props>,
-  props: Omit<Props, 'as'>,
-) => React.ReactNode;
+/**
+ * @internal
+ *
+ * This should ONLY be used in type templates as in `extends SlotPropsDataType`;
+ * it shouldn't be used as a component's Slot props type.
+ */
+export type SlotPropsDataType = {
+  as?: keyof JSX.IntrinsicElements;
+  children?: ReactNode;
+};
+
+export type SlotRenderFunction<Props> = (Component: React.ElementType<Props>, props: Omit<Props, 'as'>) => ReactNode;
 
 /**
  * Matches any component's Slots type (such as ButtonSlots).
@@ -13,14 +30,15 @@ export type SlotRenderFunction<Props> = (
  * This should ONLY be used in type templates as in `extends SlotPropsRecord`;
  * it shouldn't be used as a component's Slots type.
  */
-export type SlotPropsRecord = Record<string, UnknownSlotProps | SlotShorthandValue | null | undefined>;
+export type SlotPropsRecord = Record<string, SlotPropsDataType | SlotShorthandValue | null | undefined>;
 
 /**
  * The shorthand value of a slot allows specifying its child
  */
-export type SlotShorthandValue = React.ReactChild | React.ReactNode[] | React.ReactPortal;
+export type SlotShorthandValue = React.ReactElement | string | number | Iterable<ReactNode> | React.ReactPortal;
 
 /**
+ * @deprecated - SlotPropsDataType instead
  * Matches any slot props type.
  *
  * This should ONLY be used in type templates as in `extends UnknownSlotProps`;
@@ -38,13 +56,23 @@ type WithSlotShorthandValue<Props> =
   | ('children' extends keyof Props ? Extract<SlotShorthandValue, Props['children']> : never);
 
 /**
+ * @internal
  * Helper type for {@link Slot}. Takes the props we want to support for a slot and adds the ability for `children`
  * to be a render function that takes those props.
  */
-type WithSlotRenderFunction<Props> = Props & {
+export type WithSlotRenderFunction<Props> = Omit<Props, 'children'> & {
   children?: ('children' extends keyof Props ? Props['children'] : never) | SlotRenderFunction<Props>;
 };
 
+/**
+ * @internal
+ */
+export type WithoutSlotRenderFunction<Props> = Props extends unknown
+  ? 'children' extends keyof Props
+    ? Omit<Props, 'children'> & { children?: Exclude<Props['children'], Function> }
+    : Props
+  : never;
+
 /**
  * HTML element types that are not allowed to have children.
  *
@@ -98,20 +126,23 @@ type IntrinsicElementProps<Type extends keyof JSX.IntrinsicElements> = Type exte
  * ```
  */
 export type Slot<
-  Type extends keyof JSX.IntrinsicElements | React.ComponentType | React.VoidFunctionComponent | UnknownSlotProps,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Type extends keyof JSX.IntrinsicElements | ComponentType<any> | SlotPropsDataType,
   AlternateAs extends keyof JSX.IntrinsicElements = never,
 > = IsSingleton<Extract<Type, string>> extends true
   ?
       | WithSlotShorthandValue<
           Type extends keyof JSX.IntrinsicElements // Intrinsic elements like `div`
             ? { as?: Type } & WithSlotRenderFunction<IntrinsicElementProps<Type>>
-            : Type extends React.ComponentType<infer Props> // Component types like `typeof Button`
-            ? WithSlotRenderFunction<Props>
+            : Type extends ComponentType<infer Props> // Component types like `typeof Button`
+            ? Props extends SlotPropsDataType
+              ? Props
+              : WithSlotRenderFunction<Props>
             : Type // Props types like `ButtonProps`
         >
-      | {
-          [As in AlternateAs]: { as: As } & WithSlotRenderFunction<IntrinsicElementProps<As>>;
-        }[AlternateAs]
+      | (AlternateAs extends unknown
+          ? { as: AlternateAs } & WithSlotRenderFunction<IntrinsicElementProps<AlternateAs>>
+          : never)
       | null
   : 'Error: First parameter to Slot must not be not a union of types. See documentation of Slot type.';
 
@@ -135,24 +166,6 @@ export type IsSingleton<T extends string> = { [K in T]: Exclude<T, K> extends ne
  */
 export type AsIntrinsicElement<As extends keyof JSX.IntrinsicElements> = { as?: As };
 
-/**
- * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
- * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
- *
- * The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
- * types, to prevent unions from being expanded.
- */
-export type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
-
-/**
- * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
- * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
- *
- * The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
- * types, to prevent unions from being expanded.
- */
-export type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
-
 /**
  * Removes SlotShorthandValue and null from the slot type, extracting just the slot's Props object.
  */
@@ -164,30 +177,33 @@ export type ExtractSlotProps<S> = Exclude<S, SlotShorthandValue | null | undefin
  */
 export type ComponentProps<Slots extends SlotPropsRecord, Primary extends keyof Slots = 'root'> =
   // Include a prop for each slot (see note below about the Omit)
+  // Note: the `Omit<Slots, Primary & 'root'>` here is a little tricky. Here's what it's doing:
+  // * If the Primary slot is 'root', then omit the `root` slot prop.
+  // * Otherwise, don't omit any props: include *both* the Primary and `root` props.
+  //   We need both props to allow the user to specify native props for either slot because the `root` slot is
+  //   special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983
   Omit<Slots, Primary & 'root'> &
     // Include all of the props of the primary slot inline in the component's props
     PropsWithoutRef<ExtractSlotProps<Slots[Primary]>>;
 
-// Note: the `Omit<Slots, Primary & 'root'>` above is a little tricky. Here's what it's doing:
-// * If the Primary slot is 'root', then omit the `root` slot prop.
-// * Otherwise, don't omit any props: include *both* the Primary and `root` props.
-//   We need both props to allow the user to specify native props for either slot because the `root` slot is
-//   special and always gets className and style props, per RFC https://github.com/microsoft/fluentui/pull/18983
-
 /**
  * Defines the State object of a component given its slots.
  */
 export type ComponentState<Slots extends SlotPropsRecord> = {
+  /**
+   * @deprecated
+   * The base element type for each slot.
+   * This property is deprecated and will be removed in a future version.
+   * The slot base element type is declared through `slot.*(slotShorthand, {elementType: ElementType})` instead.
+   */
   components: {
-    [Key in keyof Slots]-?:
-      | React.ComponentType<ExtractSlotProps<Slots[Key]>>
-      | (ExtractSlotProps<Slots[Key]> extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+    [Key in keyof Slots]-?: React.ElementType;
   };
 } & {
   // Include a prop for each slot, with the shorthand resolved to a props object
   // The root slot can never be null, so also exclude null from it
   [Key in keyof Slots]: ReplaceNullWithUndefined<
-    Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>
+    WithoutSlotRenderFunction<Exclude<Slots[Key], SlotShorthandValue | (Key extends 'root' ? null : never)>>
   >;
 };
 
@@ -216,15 +232,10 @@ export type InferredElementRefType<Props> = ObscureEventName extends keyof Props
 
 /**
  * Return type for `React.forwardRef`, including inference of the proper typing for the ref.
+ *
+ * Note: {@link React.RefAttributes} is {@link https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/69756 | leaking string references} into forwardRef components, forwardRef component do not support string refs.
  */
-export type ForwardRefComponent<Props> = React.ForwardRefExoticComponent<
-  Props & React.RefAttributes<InferredElementRefType<Props>>
->;
-// A definition like this would also work, but typescript is more likely to unnecessarily expand
-// the props type with this version (and it's likely much more expensive to evaluate)
-// export type ForwardRefComponent<Props> = Props extends React.DOMAttributes<infer Element>
-//   ? React.ForwardRefExoticComponent<Props> & React.RefAttributes<Element>
-//   : never;
+export type ForwardRefComponent<Props> = NamedExoticComponent<Props & RefAttributes<InferredElementRefType<Props>>>;
 
 /**
  * Helper type to correctly define the slot class names object.
@@ -237,22 +248,19 @@ export type SlotClassNames<Slots> = {
  * A definition of a slot, as a component, very similar to how a React component is declared,
  * but with some additional metadata that is used to determine how to render the slot.
  */
-export type SlotComponentType<Props> = Props & {
-  /**
-   * **NOTE**: Slot components are not callable.
-   */
-  (props: React.PropsWithChildren<{}>): React.ReactElement | null;
-  /**
-   * @internal
-   */
-  [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;
-  /**
-   * @internal
-   */
-  [SLOT_ELEMENT_TYPE_SYMBOL]:
-    | React.ComponentType<Props>
-    | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
-};
+export type SlotComponentType<Props> = WithoutSlotRenderFunction<Props> &
+  FunctionComponent<{ children?: ReactNode }> & {
+    /**
+     * @internal
+     */
+    [SLOT_RENDER_FUNCTION_SYMBOL]?: SlotRenderFunction<Props>;
+    /**
+     * @internal
+     */
+    [SLOT_ELEMENT_TYPE_SYMBOL]:
+      | ComponentType<Props>
+      | (Props extends AsIntrinsicElement<infer As> ? As : keyof JSX.IntrinsicElements);
+  };
 
 /**
  * Data type for event handlers. It makes data a discriminated union, where each object requires `event` and `type` property.
diff --git a/packages/react-components/react-utilities/src/hooks/useId.test.tsx b/packages/react-components/react-utilities/src/hooks/useId.test.tsx
index 29d271aae4a61..8d154e1fe484a 100644
--- a/packages/react-components/react-utilities/src/hooks/useId.test.tsx
+++ b/packages/react-components/react-utilities/src/hooks/useId.test.tsx
@@ -41,7 +41,9 @@ describe('useId', () => {
 
   it('consumers prefix from a context', () => {
     const { result } = renderHook(() => useId(), {
-      wrapper: ({ children }) => <IdPrefixProvider value="scope-">{children}</IdPrefixProvider>,
+      wrapper: ({ children }: { children: React.ReactNode }) => (
+        <IdPrefixProvider value="scope-">{children}</IdPrefixProvider>
+      ),
     });
 
     expect(result.current).toMatch(/^scope-fui-/);
diff --git a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts
index f7c5e60d8757b..91a6358d8fb67 100644
--- a/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts
+++ b/packages/react-components/react-utilities/src/hooks/useMergedRefs.ts
@@ -6,21 +6,35 @@ import * as React from 'react';
  */
 export type RefObjectFunction<T> = React.RefObject<T> & ((value: T | null) => void);
 
+/** @internal */
+type MutableRefObjectFunction<T> = React.MutableRefObject<T | null> & ((value: T | null) => void);
+
 /**
  * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that
  * updates all provided refs
  * @param refs - Refs to collectively update with one ref value.
  * @returns A function with an attached "current" prop, so that it can be treated like a RefObject.
  */
+// LegacyRef is actually not supported, but in React v18 types this is leaking directly from forwardRef component declaration
 export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObjectFunction<T> {
   'use no memo';
 
-  const mergedCallback: RefObjectFunction<T> = React.useCallback(
+  const mergedCallback = React.useCallback(
     (value: T | null) => {
       // Update the "current" prop hanging on the function.
-      (mergedCallback as React.MutableRefObject<T | null>).current = value;
+      mergedCallback.current = value;
 
       for (const ref of refs) {
+        if (typeof ref === 'string' && process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.error(/** #__DE-INDENT__ */ `
+            @fluentui/react-utilities [useMergedRefs]:
+            This hook does not support the usage of string refs. Please use React.useRef instead.
+
+            For more info on 'React.useRef', see https://react.dev/reference/react/useRef.
+            For more info on string refs, see https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-string-refs.
+          `);
+        }
         if (typeof ref === 'function') {
           ref(value);
         } else if (ref) {
@@ -31,7 +45,7 @@ export function useMergedRefs<T>(...refs: (React.Ref<T> | undefined)[]): RefObje
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- already exhaustive
     [...refs],
-  ) as RefObjectFunction<T>;
+  ) as MutableRefObjectFunction<T>;
 
   return mergedCallback;
 }
diff --git a/packages/react-components/react-utilities/src/index.ts b/packages/react-components/react-utilities/src/index.ts
index 2377571564989..ed25d723e94bc 100644
--- a/packages/react-components/react-utilities/src/index.ts
+++ b/packages/react-components/react-utilities/src/index.ts
@@ -29,6 +29,7 @@ export type {
   SlotPropsRecord,
   SlotRenderFunction,
   SlotShorthandValue,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
   UnknownSlotProps,
   SlotComponentType,
   SlotOptions,
@@ -71,7 +72,7 @@ export {
   createPriorityQueue,
 } from './utils/index';
 
-export type { DistributiveOmit, UnionToIntersection } from './utils/types';
+export type { DistributiveOmit, UnionToIntersection, RefAttributes } from './utils/types';
 
 export type { PriorityQueue } from './utils/priorityQueue';
 
diff --git a/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.test.tsx b/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.test.tsx
index 175cf2f21e447..03ceedfdf2908 100644
--- a/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.test.tsx
+++ b/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.test.tsx
@@ -3,7 +3,8 @@ import { render } from '@testing-library/react';
 import { applyTriggerPropsToChildren } from './applyTriggerPropsToChildren';
 import type { FluentTriggerComponent } from './types';
 
-export const TestTrigger: React.FC<{ id?: string }> & FluentTriggerComponent = props => <>{props.children}</>;
+export const TestTrigger: React.FC<{ id?: string; children: React.ReactNode | (() => React.JSX.Element) }> &
+  FluentTriggerComponent = props => <>{props.children}</>;
 TestTrigger.displayName = 'TestTrigger';
 TestTrigger.isFluentTriggerComponent = true;
 
diff --git a/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.ts b/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.ts
index d13a4d3b8225d..12f3b5dbaf078 100644
--- a/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.ts
+++ b/packages/react-components/react-utilities/src/trigger/applyTriggerPropsToChildren.ts
@@ -27,7 +27,7 @@ export function applyTriggerPropsToChildren<TriggerChildProps>(
  * a FluentTriggerComponent or React Fragment (the same element returned by {@link getTriggerChild}).
  */
 function cloneTriggerTree<TriggerChildProps>(
-  child: React.ReactNode,
+  child: TriggerProps['children'],
   triggerProps: TriggerChildProps,
 ): React.ReactElement {
   if (!React.isValidElement(child) || child.type === React.Fragment) {
diff --git a/packages/react-components/react-utilities/src/trigger/getTriggerChild.test.tsx b/packages/react-components/react-utilities/src/trigger/getTriggerChild.test.tsx
index 60b59c68c5a26..7f862f7f3adf0 100644
--- a/packages/react-components/react-utilities/src/trigger/getTriggerChild.test.tsx
+++ b/packages/react-components/react-utilities/src/trigger/getTriggerChild.test.tsx
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { getTriggerChild } from './getTriggerChild';
 import type { FluentTriggerComponent } from './types';
 
-const TestTrigger: React.FC<{ id?: string }> & FluentTriggerComponent = props => <>{props.children}</>;
+const TestTrigger: React.FC<React.PropsWithChildren<{ id?: string }>> & FluentTriggerComponent = props => (
+  <>{props.children}</>
+);
 TestTrigger.displayName = 'TestTrigger';
 TestTrigger.isFluentTriggerComponent = true;
 
diff --git a/packages/react-components/react-utilities/src/utils/types.ts b/packages/react-components/react-utilities/src/utils/types.ts
index 3d0f96236b358..5c23022f57177 100644
--- a/packages/react-components/react-utilities/src/utils/types.ts
+++ b/packages/react-components/react-utilities/src/utils/types.ts
@@ -1,3 +1,5 @@
+import * as React from 'react';
+
 /**
  * Helper type that works similar to Omit,
  * but when modifying an union type it will distribute the omission to all the union members.
@@ -21,6 +23,16 @@
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : T;
 
+/**
+ * @public
+ *
+ * Helper type that works similar to Pick,
+ * but when modifying an union type it will distribute the picking to all the union members.
+ *
+ * See {@link https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types} for more information
+ */
+export type DistributivePick<T, K> = T extends unknown ? Pick<T, K & keyof T> : never;
+
 /**
  * Converts a union type (`A | B | C`) to an intersection type (`A & B & C`)
  */
@@ -31,3 +43,90 @@ export type UnionToIntersection<U> = (U extends unknown ? (x: U) => U : never) e
  * If type T includes `null`, remove it and add `undefined` instead.
  */
 export type ReplaceNullWithUndefined<T> = T extends null ? Exclude<T, null> | undefined : T;
+
+/**
+ * @internal
+ * With react 18, our `children` type starts leaking everywhere and that causes conflicts on component declaration, specially in the `propTypes` property of
+ * both `ComponentClass` and `FunctionComponent`.
+ *
+ * This type substitutes `React.ComponentType` only keeping the function signature, it omits `propTypes`, `displayName` and other properties that are not
+ * required for the inference.
+ */
+export type ComponentType<P = {}> = ComponentClass<P> | FunctionComponent<P>;
+
+/**
+ * @internal
+ *
+ * On types/react 18 there are two types being delivered,
+ * they rely on the typescript version to decide which will be consumed {@link https://github.com/DefinitelyTyped/DefinitelyTyped/blob/b59dc3ac1e2770fbd6cdbb90ba52abe04c168196/types/react/package.json#L10}
+ *
+ * If TS is higher than 5.0 then the `FunctionComponent` will be returning ReactNode (which we don't support)
+ * If TS is below or equal to 5.0 then the `FunctionComponent` will be returning ReactElement | null (which we support)
+ *
+ * Since it's not possible to have a single type that works for both cases
+ * (as ReactNode is more specific, and this will break while evaluating functions),
+ * we need to create our own `FunctionComponent` type
+ * that will work for both cases.
+ *
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ */
+export interface FunctionComponent<P> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (props: P): any;
+  displayName?: string;
+}
+
+export type FC<P> = FunctionComponent<P>;
+
+export interface ExoticComponent<P> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (props: P): any;
+  $$typeof: symbol;
+}
+
+export interface NamedExoticComponent<P> extends ExoticComponent<P> {
+  displayName?: string;
+}
+
+export interface RefAttributes<T> extends React.Attributes {
+  ref?: React.Ref<T> | undefined;
+}
+
+/**
+ * @internal
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ */
+export interface ComponentClass<P = {}, S = React.ComponentState> extends React.StaticLifecycle<P, S> {
+  new (props: P): React.Component<P, S>;
+}
+
+/**
+ * @internal
+ *
+ * on types/react 18 ReactNode becomes a more strict type, which is not compatible with our current implementation. to avoid any issues we are creating our own ReactNode type which allows anything.
+ *
+ * This type should only be used for inference purposes, and should never be exposed.
+ *
+ * **THIS TYPE IS INTERNAL AND SHOULD NEVER BE EXPOSED**
+ *
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ReactNode = any;
+
+/**
+ * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
+ * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
+ *
+ * The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
+ * types, to prevent unions from being expanded.
+ */
+export type PropsWithoutRef<P> = 'ref' extends keyof P ? DistributiveOmit<P, 'ref'> : P;
+
+/**
+ * Removes the 'ref' prop from the given Props type, leaving unions intact (such as the discriminated union created by
+ * IntrinsicSlotProps). This allows IntrinsicSlotProps to be used with React.forwardRef.
+ *
+ * The conditional "extends unknown" (always true) exploits a quirk in the way TypeScript handles conditional
+ * types, to prevent unions from being expanded.
+ */
+export type PropsWithoutChildren<P> = 'children' extends keyof P ? DistributiveOmit<P, 'children'> : P;
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts
index 27fa73b27d53e..21b8ee0acd499 100644
--- a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts
+++ b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/useVirtualizerScrollView.ts
@@ -68,6 +68,7 @@ export function useVirtualizerScrollView_unstable(props: VirtualizerScrollViewPr
   return {
     ...virtualizerState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...virtualizerState.components,
       container: 'div',
     },
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx
index 0e2de6647db6d..891978344695c 100644
--- a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx
+++ b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/useVirtualizerScrollViewDynamic.tsx
@@ -183,6 +183,7 @@ export function useVirtualizerScrollViewDynamic_unstable(
   return {
     ...virtualizerState,
     components: {
+      // eslint-disable-next-line @typescript-eslint/no-deprecated
       ...virtualizerState.components,
       container: 'div',
     },
diff --git a/packages/react-components/react-virtualizer/library/src/hooks/useDynamicPagination.ts b/packages/react-components/react-virtualizer/library/src/hooks/useDynamicPagination.ts
index ec1da4bcf0ec2..607ef5108aefc 100644
--- a/packages/react-components/react-virtualizer/library/src/hooks/useDynamicPagination.ts
+++ b/packages/react-components/react-virtualizer/library/src/hooks/useDynamicPagination.ts
@@ -104,13 +104,10 @@ export const useDynamicVirtualizerPagination = (
   /**
    * On scroll timer that will continuously delay callback until scrolling stops
    */
-  const onScroll = React.useCallback(
-    event => {
-      clearScrollTimer();
-      setScrollTimer(onScrollEnd, 100);
-    },
-    [onScrollEnd, clearScrollTimer, setScrollTimer],
-  );
+  const onScroll = React.useCallback(() => {
+    clearScrollTimer();
+    setScrollTimer(onScrollEnd, 100);
+  }, [onScrollEnd, clearScrollTimer, setScrollTimer]);
 
   /**
    * Pagination ref will ensure we attach listeners to containers on change
diff --git a/packages/react-components/react-virtualizer/library/src/hooks/useStaticPagination.ts b/packages/react-components/react-virtualizer/library/src/hooks/useStaticPagination.ts
index 8ec1b39a8733e..ee34f91622648 100644
--- a/packages/react-components/react-virtualizer/library/src/hooks/useStaticPagination.ts
+++ b/packages/react-components/react-virtualizer/library/src/hooks/useStaticPagination.ts
@@ -81,13 +81,10 @@ export const useStaticVirtualizerPagination = (
   /**
    * On scroll timer that will continuously delay callback until scrolling stops
    */
-  const onScroll = React.useCallback(
-    event => {
-      clearScrollTimer();
-      setScrollTimer(onScrollEnd, 100);
-    },
-    [onScrollEnd, clearScrollTimer, setScrollTimer],
-  );
+  const onScroll = React.useCallback(() => {
+    clearScrollTimer();
+    setScrollTimer(onScrollEnd, 100);
+  }, [onScrollEnd, clearScrollTimer, setScrollTimer]);
 
   /**
    * Pagination ref will ensure we attach listeners to containers on change
diff --git a/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx b/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
index 3bdf1ae3e9a5d..b2268c627b4d1 100644
--- a/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
+++ b/packages/react-components/recipes/src/recipes/media-object/code-snippets/MediaObject.tsx
@@ -40,7 +40,7 @@ const MediaObject: React.VoidFunctionComponent<MediaObjectTypes> = ({
   );
 };
 
-const Legend: React.FC<{ colorClassName: string }> = ({ children, colorClassName }) => {
+const Legend: React.FC<React.PropsWithChildren<{ colorClassName: string }>> = ({ children, colorClassName }) => {
   const skeletonStyles = useSkeletonStyles();
   return (
     <div className={skeletonStyles.legend}>
diff --git a/packages/react-components/recipes/src/templates/Example.tsx b/packages/react-components/recipes/src/templates/Example.tsx
index 46132fa6e05d1..c242d1c65594d 100644
--- a/packages/react-components/recipes/src/templates/Example.tsx
+++ b/packages/react-components/recipes/src/templates/Example.tsx
@@ -4,7 +4,7 @@ import { webLightTheme } from '@fluentui/react-theme';
 import { mergeClasses } from '@griffel/react';
 import { useExampleStyles } from './Example.styles';
 
-export const TemplateExample: React.FC<{ centered?: boolean }> = ({ children, centered }) => {
+export const TemplateExample: React.FC<React.PropsWithChildren<{ centered?: boolean }>> = ({ children, centered }) => {
   const exampleStyles = useExampleStyles();
 
   const innerContainerClassName = mergeClasses(exampleStyles.innerContainer, centered && exampleStyles.centered);
diff --git a/packages/react-conformance/package.json b/packages/react-conformance/package.json
index 9ba2de7705108..fbfb38e2b27a6 100644
--- a/packages/react-conformance/package.json
+++ b/packages/react-conformance/package.json
@@ -22,13 +22,13 @@
     "lodash": "^4.17.15",
     "chalk": "^2.4.2",
     "react-docgen-typescript": "^2.1.0",
-    "react-is": "^17.0.2",
+    "react-is": "^18.3.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^16.0.0",
     "jest": "^26.0.0",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0",
diff --git a/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx b/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx
index 33e2e2d207296..d9c6c77d6b3fa 100644
--- a/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx
+++ b/packages/react-docsite-components/src/components/Animation/AnimationDetail/AnimationDetail.tsx
@@ -25,7 +25,7 @@ const styles = mergeStyleSets({
   },
 });
 
-export const AnimationDetail: React.FunctionComponent<IAnimationDetailProps> = props => {
+export const AnimationDetail: React.FunctionComponent<React.PropsWithChildren<IAnimationDetailProps>> = props => {
   const { animation, coreClass, reactVariable } = props;
 
   return (
diff --git a/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx b/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx
index 3fb7a6f1ed3b1..1c6db88f54f2b 100644
--- a/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx
+++ b/packages/react-docsite-components/src/components/Animation/AnimationDetailGrid/AnimationDetailGrid.tsx
@@ -14,7 +14,7 @@ const styles = mergeStyleSets({
   },
 });
 
-export const AnimationDetailGrid: React.FunctionComponent<IAnimationDetailGridProps> = props => {
+export const AnimationDetailGrid: React.FunctionComponent<React.PropsWithChildren<IAnimationDetailGridProps>> = props => {
   return (
     <div className={styles.root}>
       {props.children.map((item: JSX.Element, i: number) => (
diff --git a/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx b/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx
index 6d9a53b22f1ea..9651c8580b9a9 100644
--- a/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx
+++ b/packages/react-docsite-components/src/components/ApiReferencesTable/ApiReferencesTable.tsx
@@ -182,9 +182,9 @@ export class ApiReferencesTable extends React.Component<IApiReferencesTableProps
 
     return title ? (
       // This heading must be programmatically focusable for simulating jumping to an anchor
-      <Text variant="xLarge" as="h3" styles={{ root: { marginTop: 0 } }} id={name} tabIndex={-1}>
+      (<Text variant="xLarge" as="h3" styles={{ root: { marginTop: 0 } }} id={name} tabIndex={-1}>
         {title}
-      </Text>
+      </Text>)
     ) : undefined;
   }
 }
@@ -192,7 +192,7 @@ export class ApiReferencesTable extends React.Component<IApiReferencesTableProps
 /**
  * Memoized DetailsList wrapper handling scenarios specific to API reference tables.
  */
-const ApiDetailsList: React.FunctionComponent<IApiDetailsListProps> = React.memo(props => {
+const ApiDetailsList: React.FunctionComponent<React.PropsWithChildren<IApiDetailsListProps>> = React.memo(props => {
   // Alphabetize the items and add a key to each one.
   const { itemKind, items, ariaLabel } = props;
   const processedItems: IApiEnumProperty[] | IApiInterfaceProperty[] | IMethod[] = useConst(() => {
diff --git a/packages/react-docsite-components/src/components/App/App.tsx b/packages/react-docsite-components/src/components/App/App.tsx
index 9d3a88b4f7b9d..9347324a985ac 100644
--- a/packages/react-docsite-components/src/components/App/App.tsx
+++ b/packages/react-docsite-components/src/components/App/App.tsx
@@ -22,7 +22,7 @@ export interface IAppState {
 const getClassNames = classNamesFunction<IAppStyleProps, IAppStyles>();
 
 @withResponsiveMode
-export class AppBase extends React.Component<IAppProps, IAppState> {
+export class AppBase extends React.Component<React.PropsWithChildren<IAppProps>, IAppState> {
   public state: IAppState = { isMenuVisible: false, isMenuClosing: false };
   private _classNames: IProcessedStyleSet<IAppStyles>;
   private _showOnlyExamples: boolean;
@@ -211,7 +211,7 @@ function _findMatchingLink(links: INavLink[], path: string): INavLink | undefine
   }
 }
 
-export const App: React.FunctionComponent<IAppProps> = styled<IAppProps, IAppStyleProps, IAppStyles>(
+export const App: React.FunctionComponent<React.PropsWithChildren<IAppProps>> = styled<IAppProps, IAppStyleProps, IAppStyles>(
   AppBase,
   getStyles,
   undefined,
diff --git a/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx
index af04ac0831a61..0c1ba2bdd2588 100644
--- a/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx
+++ b/packages/react-docsite-components/src/components/CodeSnippet/CodeSnippet.tsx
@@ -79,7 +79,7 @@ const languageMapping: { [key: string]: string } = {
   css: 'scss',
 };
 
-const CodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
+const CodeSnippetBase: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = props => {
   const classNames = getClassNames(props.styles, { className: props.className });
   return (
     <SyntaxHighlighter
@@ -92,7 +92,7 @@ const CodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
   );
 };
 
-export const CodeSnippet: React.FunctionComponent<ICodeSnippetProps> = styled<
+export const CodeSnippet: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = styled<
   ICodeSnippetProps,
   ICodeSnippetStyleProps,
   ICodeSnippetStyles
diff --git a/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx b/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx
index 1026cb2256cf5..06ed28661e05e 100644
--- a/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx
+++ b/packages/react-docsite-components/src/components/CodeSnippet/PrismCodeSnippet.tsx
@@ -126,7 +126,9 @@ const languageMapping: { [key: string]: string } = {
   css: 'scss',
 };
 
-const PrismCodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props => {
+const PrismCodeSnippetBase: React.FunctionComponent<
+  React.PropsWithChildren<React.PropsWithChildren<ICodeSnippetProps>>
+> = props => {
   const classNames = getClassNames(props.styles, {});
   return (
     <SyntaxHighlighter
@@ -140,7 +142,7 @@ const PrismCodeSnippetBase: React.FunctionComponent<ICodeSnippetProps> = props =
   );
 };
 
-export const PrismCodeSnippet: React.FunctionComponent<ICodeSnippetProps> = styled<
+export const PrismCodeSnippet: React.FunctionComponent<React.PropsWithChildren<ICodeSnippetProps>> = styled<
   ICodeSnippetProps,
   ICodeSnippetStyleProps,
   ICodeSnippetStyles
diff --git a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
index d7032f452a648..2dcf7cb02dcfa 100644
--- a/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
+++ b/packages/react-docsite-components/src/components/CodepenComponent/CodepenComponent.tsx
@@ -27,7 +27,7 @@ interface ICodepenPrefill {
   // and other options--see https://blog.codepen.io/documentation/api/prefill/
 }
 
-const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
+const CodepenComponentBase: React.FunctionComponent<React.PropsWithChildren<ICodepenProps>> = props => {
   const { jsContent = '', buttonAs: ButtonType = CommandButton, styles, theme } = props;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -94,7 +94,7 @@ const CodepenComponentBase: React.FunctionComponent<ICodepenProps> = props => {
   );
 };
 
-export const CodepenComponent: React.FunctionComponent<ICodepenProps> = styled<
+export const CodepenComponent: React.FunctionComponent<React.PropsWithChildren<ICodepenProps>> = styled<
   ICodepenProps,
   ICodepenStyleProps,
   ICodepenStyles
diff --git a/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx b/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx
index 8f9bd8372e55d..046ba42d418c9 100644
--- a/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx
+++ b/packages/react-docsite-components/src/components/ColorPalette/ColorPalette.tsx
@@ -195,7 +195,7 @@ class ColorPaletteBase extends React.Component<IColorPaletteProps, IColorPalette
   };
 }
 
-export const ColorPalette: React.FunctionComponent<IColorPaletteProps> = styled<
+export const ColorPalette: React.FunctionComponent<React.PropsWithChildren<IColorPaletteProps>> = styled<
   IColorPaletteProps,
   IColorPaletteStyleProps,
   IColorPaletteStyles
diff --git a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx
index d9064ad31e053..7b99f61777264 100644
--- a/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx
+++ b/packages/react-docsite-components/src/components/ComponentPage/ComponentPage.tsx
@@ -313,7 +313,7 @@ function _idFromSectionTitle(title: string): string {
   return title.replace(/[^\w-]/g, '');
 }
 
-export const ComponentPage: React.FunctionComponent<IComponentPageProps> = styled<
+export const ComponentPage: React.FunctionComponent<React.PropsWithChildren<IComponentPageProps>> = styled<
   IComponentPageProps,
   IComponentPageStyleProps,
   IComponentPageStyles
diff --git a/packages/react-docsite-components/src/components/EditSection/EditSection.tsx b/packages/react-docsite-components/src/components/EditSection/EditSection.tsx
index 1ba9dec812f5f..2f0dc5e7716c5 100644
--- a/packages/react-docsite-components/src/components/EditSection/EditSection.tsx
+++ b/packages/react-docsite-components/src/components/EditSection/EditSection.tsx
@@ -11,7 +11,7 @@ const getClassNames = classNamesFunction<IEditSectionStyleProps, IEditSectionSty
 /**
  * Component for displaying an edit button next to a section header.
  */
-export const EditSectionBase: React.FunctionComponent<IEditSectionProps> = props => {
+export const EditSectionBase: React.FunctionComponent<React.PropsWithChildren<IEditSectionProps>> = props => {
   const { className, section, title, url, styles, theme } = props;
 
   // Check if url is falsey.
@@ -38,7 +38,7 @@ export const EditSectionBase: React.FunctionComponent<IEditSectionProps> = props
   );
 };
 
-export const EditSection: React.FunctionComponent<IEditSectionProps> = styled<
+export const EditSection: React.FunctionComponent<React.PropsWithChildren<IEditSectionProps>> = styled<
   IEditSectionProps,
   IEditSectionStyleProps,
   IEditSectionStyles
diff --git a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx
index cf02c0744e909..06fa135630336 100644
--- a/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx
+++ b/packages/react-docsite-components/src/components/ExampleCard/ExampleCard.tsx
@@ -164,7 +164,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
                   editorAriaLabel={`Editor for the example "${title}". The example will be updated as you type.`}
                   modelRef={this._monacoModelRef}
                   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  previewAs={ExamplePreview as any as React.FunctionComponent<{}>}
+                  previewAs={ExamplePreview as any as React.FunctionComponent<React.PropsWithChildren<unknown>>}
                 >
                   {children}
                 </EditorWrapper>
@@ -176,7 +176,6 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
                   }
                 </ExamplePreview>
               )}
-
               {this._getDosAndDonts()}
             </div>
           );
@@ -205,7 +204,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
 
   // eslint-disable-next-line @typescript-eslint/member-ordering
   private _getPreviewComponent = memoizeFunction(
-    (activeTheme: Theme | undefined, scheme: ISchemeNames): React.FunctionComponent => {
+    (activeTheme: Theme | undefined, scheme: ISchemeNames): React.FunctionComponent<React.PropsWithChildren> => {
       // Generate a component which renders the children with the current
       return props => {
         const { children } = props;
@@ -282,7 +281,7 @@ export class ExampleCardBase extends React.Component<IExampleCardProps, IExample
   };
 }
 
-export const ExampleCard: React.FunctionComponent<IExampleCardProps> = styled<
+export const ExampleCard: React.FunctionComponent<React.PropsWithChildren<IExampleCardProps>> = styled<
   IExampleCardProps,
   IExampleCardStyleProps,
   IExampleCardStyles
diff --git a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx
index da63aa9399e62..4706d3d110f23 100644
--- a/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx
+++ b/packages/react-docsite-components/src/components/FeedbackList/FeedbackList.tsx
@@ -139,7 +139,7 @@ export class FeedbackListBase extends React.Component<IFeedbackListProps, IFeedb
   };
 }
 
-export const FeedbackList: React.FunctionComponent<IFeedbackListProps> = styled<
+export const FeedbackList: React.FunctionComponent<React.PropsWithChildren<IFeedbackListProps>> = styled<
   IFeedbackListProps,
   IFeedbackListStyleProps,
   IFeedbackListStyles
diff --git a/packages/react-docsite-components/src/components/Header/Header.tsx b/packages/react-docsite-components/src/components/Header/Header.tsx
index d5b450c2ba187..b4ac9ebe7066f 100644
--- a/packages/react-docsite-components/src/components/Header/Header.tsx
+++ b/packages/react-docsite-components/src/components/Header/Header.tsx
@@ -128,7 +128,7 @@ export class HeaderBase extends React.Component<IHeaderProps, IHeaderState> {
   };
 }
 
-export const Header: React.FunctionComponent<IHeaderProps> = styled<IHeaderProps, IHeaderStyleProps, IHeaderStyles>(
+export const Header: React.FunctionComponent<React.PropsWithChildren<IHeaderProps>> = styled<IHeaderProps, IHeaderStyleProps, IHeaderStyles>(
   HeaderBase,
   getStyles,
   undefined,
diff --git a/packages/react-docsite-components/src/components/Markdown/Markdown.tsx b/packages/react-docsite-components/src/components/Markdown/Markdown.tsx
index 64ce98338f996..29697cd4b5674 100644
--- a/packages/react-docsite-components/src/components/Markdown/Markdown.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/Markdown.tsx
@@ -36,7 +36,7 @@ const getStyles: IStyleFunction<IMarkdownStyleProps, IMarkdownStyles> = () => {
 
 const getClassNames = classNamesFunction<IMarkdownStyleProps, IMarkdownStyles>();
 
-const MarkdownBase: React.FunctionComponent<IMarkdownProps> = props => {
+const MarkdownBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownProps>> = props => {
   const { styles, theme, children } = props;
   const classNames = getClassNames(styles, { theme: theme! });
 
@@ -131,7 +131,7 @@ function getOverrides(subComponentStyles: IMarkdownSubComponentStyles, props: IM
   };
 }
 
-export const Markdown: React.FunctionComponent<IMarkdownProps> = styled<
+export const Markdown: React.FunctionComponent<React.PropsWithChildren<IMarkdownProps>> = styled<
   IMarkdownProps,
   IMarkdownStyleProps,
   IMarkdownStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx
index 7fd4608c4e381..8174d30b49350 100644
--- a/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/MarkdownCode.tsx
@@ -31,7 +31,7 @@ const getStyles: IStyleFunction<IMarkdownCodeStyleProps, IMarkdownCodeStyles> =
 
 const getClassNames = classNamesFunction<IMarkdownCodeStyleProps, IMarkdownCodeStyles>();
 
-const MarkdownCodeBase: React.FunctionComponent<IMarkdownCodeProps> = props => {
+const MarkdownCodeBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownCodeProps>> = props => {
   const { className, styles, ...rest } = props;
   const classNames = getClassNames(styles);
 
@@ -43,7 +43,7 @@ const MarkdownCodeBase: React.FunctionComponent<IMarkdownCodeProps> = props => {
   return <code className={classNames.root}>{props.children}</code>;
 };
 
-export const MarkdownCode: React.FunctionComponent<IMarkdownCodeProps> = styled<
+export const MarkdownCode: React.FunctionComponent<React.PropsWithChildren<IMarkdownCodeProps>> = styled<
   IMarkdownCodeProps,
   IMarkdownCodeStyleProps,
   IMarkdownCodeStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx
index 2f4a0a65ddfd0..b02a1809d491d 100644
--- a/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/MarkdownHeader.tsx
@@ -87,7 +87,7 @@ const getStyles: IStyleFunction<IMarkdownHeaderStyleProps, IMarkdownHeaderStyles
 
 const getClassNames = classNamesFunction<IMarkdownHeaderStyleProps, IMarkdownHeaderStyles>();
 
-const MarkdownHeaderBase: React.FunctionComponent<IMarkdownHeaderProps> = props => {
+const MarkdownHeaderBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownHeaderProps>> = props => {
   const { as: RootType = 'h1', children, id, styles, className } = props;
 
   const classNames = getClassNames(styles, { as: RootType, className });
@@ -98,7 +98,7 @@ const MarkdownHeaderBase: React.FunctionComponent<IMarkdownHeaderProps> = props
   );
 };
 
-export const MarkdownHeader: React.FunctionComponent<IMarkdownHeaderProps> = styled<
+export const MarkdownHeader: React.FunctionComponent<React.PropsWithChildren<IMarkdownHeaderProps>> = styled<
   IMarkdownHeaderProps,
   IMarkdownHeaderStyleProps,
   IMarkdownHeaderStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx
index d5d4d3a9323e8..3e2aade2eb4bf 100644
--- a/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/MarkdownLink.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Link, ILinkProps } from '@fluentui/react/lib/Link';
 import { removeAnchorLink } from '../../utilities/index2';
 
-export const MarkdownLink: React.FunctionComponent<ILinkProps> = props => {
+export const MarkdownLink: React.FunctionComponent<React.PropsWithChildren<ILinkProps>> = props => {
   let href = props.href;
   const { underline = true } = props;
   if (href && href[0] === '#' && href.indexOf('/') === -1) {
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx
index 0321fec3a8454..83e434d3b3df4 100644
--- a/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/MarkdownParagraph.tsx
@@ -40,7 +40,7 @@ const getStyles: IStyleFunction<IMarkdownParagraphStyleProps, IMarkdownParagraph
 
 const getClassNames = classNamesFunction<IMarkdownParagraphStyleProps, IMarkdownParagraphStyles>();
 
-const MarkdownParagraphBase: React.FunctionComponent<IMarkdownParagraphProps> = props => {
+const MarkdownParagraphBase: React.FunctionComponent<React.PropsWithChildren<IMarkdownParagraphProps>> = props => {
   const { children, theme } = props;
   const classNames: IClassNames<IMarkdownParagraphStyles> = getClassNames(props.styles, {
     theme: theme!,
@@ -50,7 +50,7 @@ const MarkdownParagraphBase: React.FunctionComponent<IMarkdownParagraphProps> =
   return <p className={classNames.root}>{children}</p>;
 };
 
-export const MarkdownParagraph: React.FunctionComponent<IMarkdownParagraphProps> = styled<
+export const MarkdownParagraph: React.FunctionComponent<React.PropsWithChildren<IMarkdownParagraphProps>> = styled<
   IMarkdownParagraphProps,
   IMarkdownParagraphStyleProps,
   IMarkdownParagraphStyles
diff --git a/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx b/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx
index 670a847372af1..e8d4aade807fa 100644
--- a/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx
+++ b/packages/react-docsite-components/src/components/Markdown/MarkdownPre.tsx
@@ -8,7 +8,7 @@ export interface IMarkdownPreProps extends React.HTMLAttributes<HTMLPreElement>
   enableRenderHtmlBlock?: boolean;
 }
 
-export const MarkdownPre: React.FunctionComponent<IMarkdownPreProps> = props => {
+export const MarkdownPre: React.FunctionComponent<React.PropsWithChildren<IMarkdownPreProps>> = props => {
   const { children, enableRenderHtmlBlock, ...rest } = props;
 
   // markdown-to-jsx will render code blocks as <pre><code>code here</code></pre>.
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx
index 37b575605d51f..2ab50f1603876 100644
--- a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx
+++ b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownCell.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownCellBase extends React.PureComponent<IMarkdownTableCellProps> {
+export class MarkdownCellBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableCellProps>> {
   public render(): JSX.Element {
     const { as = 'td', children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx
index 07d2415224569..4c3be615c22ae 100644
--- a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx
+++ b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTBody.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTBodyBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTBodyBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx
index 676119071f192..9d67f14d7b101 100644
--- a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx
+++ b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTHead.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTHeadBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTHeadBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx
index 8958c912410de..04ad42d35b5f9 100644
--- a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx
+++ b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTable.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTableBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTableBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, className, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx
index cafa4eab8a28b..0e49dc6771553 100644
--- a/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx
+++ b/packages/react-docsite-components/src/components/MarkdownTable/MarkdownTr.tsx
@@ -5,7 +5,7 @@ import { getStyles } from './MarkdownTable.styles';
 
 const getClassNames = classNamesFunction<IMarkdownTableStyleProps, IMarkdownTableStyles>();
 
-export class MarkdownTrBase extends React.PureComponent<IMarkdownTableProps> {
+export class MarkdownTrBase extends React.PureComponent<React.PropsWithChildren<IMarkdownTableProps>> {
   public render(): JSX.Element {
     const { children, styles, theme } = this.props;
 
diff --git a/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx b/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
index fa1f8ccf4961e..ec039f54d6627 100644
--- a/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
@@ -4,7 +4,7 @@ import { css, hiddenContentStyle } from '@fluentui/react';
 import { IBanner, IPageSectionPropsWithSectionName } from '../Page.types';
 import { Markdown } from '../../Markdown/index';
 
-export const BannerSection: React.FunctionComponent<IPageSectionPropsWithSectionName & IBanner> = props => {
+export const BannerSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionPropsWithSectionName & IBanner>> = props => {
   const { className, title = props.sectionName, content, style, id } = props;
   return (
     <div className={css(styles.banner, className)} style={style}>
diff --git a/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx b/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx
index c7794ae50a85a..47fef0537933e 100644
--- a/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/BestPracticesSection.tsx
@@ -12,7 +12,7 @@ export interface IBestPracticesSectionProps extends IPageSectionPropsWithSection
   donts?: string;
 }
 
-export const BestPracticesSection: React.FunctionComponent<IBestPracticesSectionProps> = props => {
+export const BestPracticesSection: React.FunctionComponent<React.PropsWithChildren<IBestPracticesSectionProps>> = props => {
   const {
     className,
     fileNamePrefix,
diff --git a/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx b/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx
index c13a96da46cda..8a570a674e213 100644
--- a/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/ExamplesSection.tsx
@@ -10,7 +10,7 @@ export interface IExamplesSectionProps extends IPageSectionPropsWithSectionName
   examples?: IExample[];
 }
 
-export const ExamplesSection: React.FunctionComponent<IExamplesSectionProps> = props => {
+export const ExamplesSection: React.FunctionComponent<React.PropsWithChildren<IExamplesSectionProps>> = props => {
   const { className, examples, exampleKnobs, readableSectionName = props.sectionName, style, id } = props;
   const [activeEditorTitle, setActiveEditorTitle] = React.useState('');
 
diff --git a/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx b/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx
index 592e10c30bf90..6bd927fb78735 100644
--- a/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/FeedbackSection.tsx
@@ -4,7 +4,7 @@ import { css } from '@fluentui/react';
 import { IPageSectionPropsWithSectionName } from '../Page.types';
 import * as styles from '../Page.module.scss';
 
-export const FeedbackSection: React.FunctionComponent<IPageSectionPropsWithSectionName> = props => {
+export const FeedbackSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionPropsWithSectionName>> = props => {
   const { className, readableSectionName = props.sectionName, style, title, id } = props;
 
   return (
diff --git a/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx b/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx
index 96a8d63e2dbe8..db903f1c2557f 100644
--- a/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/ImplementationSection.tsx
@@ -15,7 +15,7 @@ export interface IImplementationSectionProps extends IPageSectionPropsWithSectio
   hideImplementationTitle?: boolean;
 }
 
-export const ImplementationSection: React.FunctionComponent<IImplementationSectionProps> = props => {
+export const ImplementationSection: React.FunctionComponent<React.PropsWithChildren<IImplementationSectionProps>> = props => {
   const {
     className,
     readableSectionName = props.sectionName,
@@ -38,7 +38,7 @@ export const ImplementationSection: React.FunctionComponent<IImplementationSecti
       {jsonDocs && (
         // In this context, the table shouldn't handle jumping to anchors, because Page delay-renders
         // its sections and the table shouldn't need to know about or handle that.
-        <ApiReferencesTableSet jsonDocs={jsonDocs} jumpToAnchors={false} />
+        (<ApiReferencesTableSet jsonDocs={jsonDocs} jumpToAnchors={false} />)
       )}
       {!jsonDocs && _getNativePropsInfo(props)}
       {!jsonDocs && <PropertiesTableSet sources={propertiesTablesSources} />}
diff --git a/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx b/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx
index 9a2124ef6e273..4d961a6f05431 100644
--- a/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/MarkdownSection.tsx
@@ -6,7 +6,7 @@ import { Markdown } from '../../Markdown/index';
 import { IPageSectionProps } from '../Page.types';
 import * as styles from '../Page.module.scss';
 
-export const MarkdownSection: React.FunctionComponent<IPageSectionProps> = props => {
+export const MarkdownSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionProps>> = props => {
   const {
     className,
     content: markdown,
diff --git a/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx b/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx
index 9bee29dc61f3b..eccafe173a2b2 100644
--- a/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/OtherPageSection.tsx
@@ -5,7 +5,7 @@ import * as styles from '../Page.module.scss';
 import { EditSection } from '../../EditSection/index';
 import { Markdown } from '../../Markdown/index';
 
-export const OtherPageSection: React.FunctionComponent<IPageSectionProps> = props => {
+export const OtherPageSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionProps>> = props => {
   const {
     // prettier-ignore
     className,
diff --git a/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx b/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx
index 36f4d32b1bc05..8795177e38102 100644
--- a/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx
+++ b/packages/react-docsite-components/src/components/Page/sections/OverviewSection.tsx
@@ -4,7 +4,7 @@ import { IPageSectionPropsWithSectionName } from '../Page.types';
 import * as styles from '../Page.module.scss';
 import { hiddenContentStyle } from '@fluentui/react/lib/Styling';
 
-export const OverviewSection: React.FunctionComponent<IPageSectionPropsWithSectionName> = props => {
+export const OverviewSection: React.FunctionComponent<React.PropsWithChildren<IPageSectionPropsWithSectionName>> = props => {
   const { className, content: overview, sectionName, readableSectionName = sectionName, style, id } = props;
 
   return (
diff --git a/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx b/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx
index d9d71c268b9c4..132c8a28d30df 100644
--- a/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx
+++ b/packages/react-docsite-components/src/components/PageHeader/PageHeader.tsx
@@ -73,7 +73,7 @@ const getStyles: IStyleFunction<IPageHeaderStyleProps, IPageHeaderStyles> = prop
 
 const getClassNames = classNamesFunction<IPageHeaderStyleProps, IPageHeaderStyles>();
 
-const PageHeaderBase: React.FunctionComponent<IPageHeaderProps> = props => {
+const PageHeaderBase: React.FunctionComponent<React.PropsWithChildren<IPageHeaderProps>> = props => {
   const { className, pageTitle = 'Page title', pageSubTitle, theme, versionSwitcherDefinition } = props;
   const styles = getClassNames(getStyles, { className, pageTitle, theme });
 
@@ -105,7 +105,7 @@ const PageHeaderBase: React.FunctionComponent<IPageHeaderProps> = props => {
   );
 };
 
-export const PageHeader: React.FunctionComponent<IPageHeaderProps> = styled<
+export const PageHeader: React.FunctionComponent<React.PropsWithChildren<IPageHeaderProps>> = styled<
   IPageHeaderProps,
   IPageHeaderStyleProps,
   IPageHeaderStyles
diff --git a/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx b/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx
index 890d2ac7f1272..39e522c8e3b5f 100644
--- a/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx
+++ b/packages/react-docsite-components/src/components/PlatformBar/PlatformBar.tsx
@@ -4,7 +4,7 @@ import { PlatformBarBase } from './PlatformBar.base';
 import { IPlatformBarProps, IPlatformBarStyleProps, IPlatformBarStyles } from './PlatformBar.types';
 import { getStyles } from './PlatformBar.styles';
 
-export const PlatformBar: React.FunctionComponent<IPlatformBarProps> = styled<
+export const PlatformBar: React.FunctionComponent<React.PropsWithChildren<IPlatformBarProps>> = styled<
   IPlatformBarProps,
   IPlatformBarStyleProps,
   IPlatformBarStyles
diff --git a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx
index 6e0a25082146b..f1acd87c65b9b 100644
--- a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx
+++ b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTable.tsx
@@ -203,7 +203,7 @@ class PropertiesTableBase extends React.PureComponent<IPropertiesTableProps> {
   }
 }
 
-export const PropertiesTable: React.FunctionComponent<IPropertiesTableProps> = styled<
+export const PropertiesTable: React.FunctionComponent<React.PropsWithChildren<IPropertiesTableProps>> = styled<
   IPropertiesTableProps,
   IPropertiesTableSetStyleProps,
   IPropertiesTableSetStyles
diff --git a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx
index d4c59cf7b3f8d..0b9a71a79a064 100644
--- a/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx
+++ b/packages/react-docsite-components/src/components/PropertiesTable/PropertiesTableSet.tsx
@@ -9,7 +9,7 @@ import {
 import { getStyles } from './PropertiesTableSet.styles';
 import { styled } from '@fluentui/react/lib/Utilities';
 
-const PropertiesTableSetBase: React.FunctionComponent<IPropertiesTableSetProps> = props => {
+const PropertiesTableSetBase: React.FunctionComponent<React.PropsWithChildren<IPropertiesTableSetProps>> = props => {
   const { componentName, componentPath, sources } = props;
   let src: string;
   let properties: IProperty[] = [];
@@ -44,7 +44,7 @@ const PropertiesTableSetBase: React.FunctionComponent<IPropertiesTableSetProps>
   );
 };
 
-export const PropertiesTableSet: React.FunctionComponent<IPropertiesTableSetProps> = styled<
+export const PropertiesTableSet: React.FunctionComponent<React.PropsWithChildren<IPropertiesTableSetProps>> = styled<
   IPropertiesTableSetProps,
   IPropertiesTableSetStyleProps,
   IPropertiesTableSetStyles
diff --git a/packages/react-docsite-components/src/components/SideRail/SideRail.tsx b/packages/react-docsite-components/src/components/SideRail/SideRail.tsx
index 2e41936fcb8c1..0d0412b6b799d 100644
--- a/packages/react-docsite-components/src/components/SideRail/SideRail.tsx
+++ b/packages/react-docsite-components/src/components/SideRail/SideRail.tsx
@@ -165,7 +165,7 @@ function _isElement(x: any): x is JSX.Element {
   return !!(x && (x as JSX.Element).props && (x as JSX.Element).type);
 }
 
-export const SideRail: React.FunctionComponent<ISideRailProps> = styled<
+export const SideRail: React.FunctionComponent<React.PropsWithChildren<ISideRailProps>> = styled<
   ISideRailProps,
   ISideRailStyleProps,
   ISideRailStyles
diff --git a/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx b/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx
index fc63a388a61ba..9f6c3411539ba 100644
--- a/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx
+++ b/packages/react-docsite-components/src/components/TopBanner/TopBanner.tsx
@@ -3,7 +3,7 @@ import * as styles from './TopBanner.module.scss';
 
 import type { ITopBannerProps } from './TopBanner.types';
 
-export const TopBanner: React.FC<ITopBannerProps> = ({ cdnUrl }) => (
+export const TopBanner: React.FC<React.PropsWithChildren<ITopBannerProps>> = ({ cdnUrl }) => (
   <div className={styles.topBanner}>
     <div className={styles.topBannerContent}>
       <span className={styles.topBannerHeader}>
diff --git a/packages/react-docsite-components/src/utilities/PlatformContext.tsx b/packages/react-docsite-components/src/utilities/PlatformContext.tsx
index a2fda64d02b80..368091a544a11 100644
--- a/packages/react-docsite-components/src/utilities/PlatformContext.tsx
+++ b/packages/react-docsite-components/src/utilities/PlatformContext.tsx
@@ -9,8 +9,10 @@ export interface IWithPlatformProps<TPlatforms extends string = string> {
 export function withPlatform<
   TPlatforms extends string = string,
   TProps extends IWithPlatformProps<TPlatforms> = IWithPlatformProps<TPlatforms>,
->(Component: React.ComponentType<TProps>): React.FunctionComponent<TProps> {
-  const ComponentWithPlatform: React.FunctionComponent<TProps> = (props: TProps) => (
+>(
+  Component: React.ComponentType<React.PropsWithChildren<TProps>>,
+): React.FunctionComponent<React.PropsWithChildren<TProps>> {
+  const ComponentWithPlatform: React.FunctionComponent<React.PropsWithChildren<TProps>> = (props: TProps) => (
     <PlatformContext.Consumer>
       {(platform: string) => <Component {...props} platform={platform} />}
     </PlatformContext.Consumer>
diff --git a/packages/react-docsite-components/src/utilities/createApp.tsx b/packages/react-docsite-components/src/utilities/createApp.tsx
index ed64ce781701b..37ef27b6548e7 100644
--- a/packages/react-docsite-components/src/utilities/createApp.tsx
+++ b/packages/react-docsite-components/src/utilities/createApp.tsx
@@ -81,7 +81,7 @@ export function createApp(
   window.onunload = _onUnload;
 }
 
-function _getComponent<TProps extends React.Props<{}>>(props: TProps): JSX.Element {
+function _getComponent<TProps>(props: TProps): JSX.Element {
   return <div {...(props as React.HTMLAttributes<HTMLDivElement>)} />;
 }
 
diff --git a/packages/react-docsite-components/src/utilities/createDemoApp.tsx b/packages/react-docsite-components/src/utilities/createDemoApp.tsx
index 7e8786b3b3f78..b19c9ede988d2 100644
--- a/packages/react-docsite-components/src/utilities/createDemoApp.tsx
+++ b/packages/react-docsite-components/src/utilities/createDemoApp.tsx
@@ -16,7 +16,7 @@ mergeStyles({
   },
 });
 
-export function createDemoApp(appDefinition: IAppDefinition, gettingStartedPage: React.FunctionComponent) {
+export function createDemoApp(appDefinition: IAppDefinition, gettingStartedPage: React.FunctionComponent<React.PropsWithChildren<unknown>>) {
   let rootElement: HTMLElement | null;
 
   function _scrollAnchorLink(): void {
@@ -48,7 +48,7 @@ export function createDemoApp(appDefinition: IAppDefinition, gettingStartedPage:
     // Default route.
     appRoutes.push(<Route key="gettingstarted" component={gettingStartedPage} />);
 
-    const App: React.FunctionComponent<IAppProps> = props => (
+    const App: React.FunctionComponent<React.PropsWithChildren<IAppProps>> = props => (
       <AppBase {...props} appDefinition={props.appDefinition || appDefinition} />
     );
 
diff --git a/packages/react-docsite-components/src/utilities/router/Router.tsx b/packages/react-docsite-components/src/utilities/router/Router.tsx
index 8cdf05fc6650c..84d486a4f0a5d 100644
--- a/packages/react-docsite-components/src/utilities/router/Router.tsx
+++ b/packages/react-docsite-components/src/utilities/router/Router.tsx
@@ -71,15 +71,18 @@ export class Router extends React.Component<IRouterProps, IRouterState> {
         let { component } = route.props;
 
         // The loaded component is stored as a prop on the loader function...because obviously
-        const getComponent: (Required<IRouteProps>['getComponent'] & { component?: React.ComponentType }) | undefined =
-          route.props.getComponent;
+        const getComponent:
+          | (Required<IRouteProps>['getComponent'] & {
+              component?: React.ComponentType<React.PropsWithChildren<unknown>>;
+            })
+          | undefined = route.props.getComponent;
         if (getComponent) {
           let asynchronouslyResolved = false;
 
           if (getComponent.component) {
             component = getComponent.component;
           } else {
-            getComponent((resolved: React.ComponentType) => {
+            getComponent((resolved: React.ComponentType<React.PropsWithChildren<unknown>>) => {
               if (!resolved) {
                 throw new Error(
                   `Router: Calling getComponent for the route with path ${route.props.path} ` +
diff --git a/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx
index 8532b75c0c3b4..400ba2551566e 100644
--- a/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/CalendarInlineMultidayDayView.stories.tsx
@@ -19,7 +19,7 @@ const dayOptions: IDropdownOption[] = [
   { key: '6', text: '6' },
 ];
 
-export const CalendarInlineMultidayDayViewExample: React.FunctionComponent = () => {
+export const CalendarInlineMultidayDayViewExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
   const [daysToSelectInDayView, setDaysToSelectInDayView] = React.useState(4);
diff --git a/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx
index dc55e7df3f57a..3fe5543c8a2b8 100644
--- a/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/ContextMenu.stories.tsx
@@ -6,7 +6,7 @@ export default {
   title: 'Components/ContextualMenu',
 };
 
-export const ContextualMenuDefaultExample: React.FunctionComponent = () => {
+export const ContextualMenuDefaultExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <DefaultButton text="Click for ContextualMenu" menuProps={menuProps} />;
 };
 
diff --git a/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx
index 8233100c23a74..a4d954056e4c6 100644
--- a/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/Pivots.stories.tsx
@@ -11,7 +11,7 @@ const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
   root: { marginTop: 10 },
 };
 
-export const PivotBasicExample: React.FunctionComponent = () => {
+export const PivotBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Pivot aria-label="Basic Pivot Example">
       <PivotItem
diff --git a/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx
index c9a37319c7477..3346441817514 100644
--- a/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/ProgressIndicator.stories.tsx
@@ -8,7 +8,7 @@ export default {
 const intervalDelay = 100;
 const intervalIncrement = 0.01;
 
-export const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
+export const ProgressIndicatorBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [percentComplete, setPercentComplete] = React.useState(0);
 
   React.useEffect(() => {
diff --git a/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx
index d5b03ddf37bde..fbbab74a9b284 100644
--- a/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/SpinButton.stories.tsx
@@ -10,7 +10,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 const iconProps: IIconProps = { iconName: 'IncreaseIndentLegacy' };
-export const SpinButtonBasicExample: React.FunctionComponent = () => {
+export const SpinButtonBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <SpinButton
diff --git a/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx
index 04b0f711b159b..c4e6eef55804d 100644
--- a/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/TeachingBubble.stories.tsx
@@ -11,7 +11,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
+export const TeachingBubbleBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
diff --git a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx
index 74116c8df17de..e8c905b8e8fc1 100644
--- a/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/actionButton.stories.tsx
@@ -14,7 +14,7 @@ export interface IButtonExampleProps {
 
 const addFriendIcon: IIconProps = { iconName: 'AddFriend' };
 
-export const ButtonActionExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonActionExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled } = props;
 
   return (
diff --git a/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx
index 0bb51a70b0315..d56f5ad733283 100644
--- a/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/activityitem.stories.tsx
@@ -14,7 +14,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const ActivityItemBasicExample: React.FunctionComponent = () => {
+export const ActivityItemBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const activityItemExamples = [
     {
       key: 1,
diff --git a/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx
index 08b087a8d6499..1426c7e24bd1d 100644
--- a/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/activityitempersonas.stories.tsx
@@ -15,7 +15,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const ActivityItemPersonaExample: React.FunctionComponent = () => {
+export const ActivityItemPersonaExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
     {
       key: 1,
diff --git a/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx
index 431a717388139..a1f1a9d21b3a4 100644
--- a/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/buttonToggle.stories.tsx
@@ -15,7 +15,7 @@ export interface IButtonExampleProps {
 const volume0Icon: IIconProps = { iconName: 'Volume0' };
 const volume3Icon: IIconProps = { iconName: 'Volume3' };
 
-export const ButtonToggleExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonToggleExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
   const [muted, setMuted] = React.useState<boolean>(false);
   const onClick = () => setMuted(!muted);
diff --git a/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx
index 6cefc564a4fef..014787f6e4e18 100644
--- a/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/choiceGroupWithImagesandIcons.stories.tsx
@@ -28,7 +28,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'week', text: 'Week', iconProps: { iconName: 'CalendarWeek' } },
 ];
 
-export const ChoiceGroupImageExample: React.FunctionComponent = () => {
+export const ChoiceGroupImageExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <ChoiceGroup label="Pick one image" defaultSelectedKey="bar" options={options} />
diff --git a/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx
index 432991bc18e9d..b8862b4813514 100644
--- a/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/choicegroup.stories.tsx
@@ -12,7 +12,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'D', text: 'Option D' },
 ];
 
-export const ChoiceGroupBasicExample: React.FunctionComponent = () => {
+export const ChoiceGroupBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <ChoiceGroup defaultSelectedKey="B" options={options} onChange={_onChange} label="Pick one" required={true} />;
 };
 
diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx
index 0cbe831dc63a3..7213878848f1c 100644
--- a/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/commandBar.stories.tsx
@@ -8,7 +8,7 @@ export default {
 
 const overflowProps: IButtonProps = { ariaLabel: 'More commands' };
 
-export const CommandBarBasicExample: React.FunctionComponent = () => {
+export const CommandBarBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <CommandBar
diff --git a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx
index 2d16935d23f5c..09f5bec956971 100644
--- a/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/commandBarButton.stories.tsx
@@ -8,7 +8,7 @@ export default {
 
 const overflowButtonProps: IButtonProps = { ariaLabel: 'More commands' };
 
-export const CommandBarSplitDisabledExample: React.FunctionComponent = () => {
+export const CommandBarSplitDisabledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <CommandBar items={_items} overflowButtonProps={overflowButtonProps} />
diff --git a/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx
index 1a282900ee74d..fc1addf839107 100644
--- a/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/contextualMenu.stories.tsx
@@ -35,7 +35,7 @@ const menuProps: IContextualMenuProps = {
 };
 const addIcon: IIconProps = { iconName: 'Add' };
 
-export const ButtonContextualMenuExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonContextualMenuExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   const buttonProps = {
diff --git a/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx
index f96c6526a39d5..af949647fbdf1 100644
--- a/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/dateBoundary.stories.tsx
@@ -25,7 +25,7 @@ const controlClass = mergeStyleSets({
   },
 });
 
-export const DatePickerBoundedExample: React.FC = () => (
+export const DatePickerBoundedExample: React.FC<React.PropsWithChildren<unknown>> = () => (
   <div>
     <DatePicker
       className={controlClass.control}
diff --git a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx
index d86fa9adf50ed..a400f0d4854b6 100644
--- a/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/defaultDatePicker.tsx
@@ -7,7 +7,7 @@ export default {
 
 const rootClass = mergeStyles({ minWidth: 170, selectors: { '> *': { marginBottom: 15 } } });
 
-export const DatePickerBasicExample: React.FunctionComponent = () => {
+export const DatePickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday);
 
   return (
diff --git a/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx
index 5839ddd144961..e4213efba710e 100644
--- a/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/dropdown.stories.tsx
@@ -25,7 +25,7 @@ const options: IDropdownOption[] = [
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 
-export const DropdownBasicExample: React.FunctionComponent = () => {
+export const DropdownBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Dropdown
diff --git a/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx
index a465ac958a932..e490fea036732 100644
--- a/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/iconButton.stories.tsx
@@ -30,7 +30,7 @@ const menuProps: IContextualMenuProps = {
   directionalHintFixed: true,
 };
 
-export const ButtonIconExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonIconExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx
index fd42e29f02ce3..16ef0d61d75e0 100644
--- a/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/iconTooltip.stories.tsx
@@ -23,7 +23,7 @@ const calloutProps = { gapSpace: 0 };
 // If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
-export const ButtonIconWithTooltipExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonIconWithTooltipExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx
index 966c665c29f8a..c617fb3e4c7f8 100644
--- a/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/messageBar.stories.tsx
@@ -149,7 +149,7 @@ const choiceOptions = [
   },
 ];
 
-export const MessageBarBasicExample: React.FunctionComponent = () => {
+export const MessageBarBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [choice, setChoice] = React.useState<string | undefined>(undefined);
   const showAll = choice === 'all';
 
diff --git a/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx
index c98f81ffb6248..f1fe37f03e42a 100644
--- a/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/slider.stories.tsx
@@ -10,7 +10,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 const sliderAriaValueText = (value: number) => `${value} percent`;
 const sliderValueFormat = (value: number) => `${value}%`;
 
-export const SliderBasicExample: React.FunctionComponent = () => {
+export const SliderBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [sliderValue, setSliderValue] = React.useState(0);
   const sliderOnChange = (value: number) => setSliderValue(value);
   return (
diff --git a/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx
index d829aef530c3f..c8e3436c7d7cb 100644
--- a/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/spinner.stories.tsx
@@ -7,7 +7,7 @@ export default {
   title: 'Components/Spinner',
 };
 
-export const SpinnerBasicExample: React.FunctionComponent = () => {
+export const SpinnerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
   const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
 
diff --git a/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx
index c969b6b4a9751..0b5a3444e6933 100644
--- a/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/splitButton.stories.tsx
@@ -28,7 +28,7 @@ const menuProps: IContextualMenuProps = {
 // Example formatting
 // const stackTokens: IStackTokens = { childrenGap: 40 };
 
-export const ButtonSplitExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonSplitExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx
index 3cea278ab5e12..f2a0143ce8d36 100644
--- a/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/toggle.stories.tsx
@@ -8,7 +8,7 @@ export default {
 
 const stackTokens: IStackTokens = { childrenGap: 10 };
 
-export const ToggleBasicExample: React.FunctionComponent = () => {
+export const ToggleBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" onChange={_onChange} />
diff --git a/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx b/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx
index f53e650abb18a..88c72cd85aff4 100644
--- a/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx
+++ b/packages/react-examples/src/azure-themes/stories/components/tooltip.stories.tsx
@@ -12,7 +12,7 @@ const calloutProps = { gapSpace: 0 };
 // If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
-export const TooltipBasicExample: React.FunctionComponent = () => {
+export const TooltipBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react-cards/Card/Card.Horizontal.Example.tsx b/packages/react-examples/src/react-cards/Card/Card.Horizontal.Example.tsx
index 4772ebe8231d5..85faf53ab4b8e 100644
--- a/packages/react-examples/src/react-cards/Card/Card.Horizontal.Example.tsx
+++ b/packages/react-examples/src/react-cards/Card/Card.Horizontal.Example.tsx
@@ -43,7 +43,7 @@ const sectionStackTokens: IStackTokens = { childrenGap: 20 };
 const cardTokens: ICardTokens = { childrenMargin: 12 };
 const footerCardSectionTokens: ICardSectionTokens = { padding: '0px 0px 0px 12px' };
 
-export const CardHorizontalExample: React.FunctionComponent = () => {
+export const CardHorizontalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={sectionStackTokens}>
       <Card aria-label="Basic horizontal card" horizontal tokens={cardTokens}>
diff --git a/packages/react-examples/src/react-cards/Card/Card.Vertical.Example.tsx b/packages/react-examples/src/react-cards/Card/Card.Vertical.Example.tsx
index 6b12b903ecbd8..e7adbc0ea6be9 100644
--- a/packages/react-examples/src/react-cards/Card/Card.Vertical.Example.tsx
+++ b/packages/react-examples/src/react-cards/Card/Card.Vertical.Example.tsx
@@ -97,7 +97,7 @@ const backgroundImageCardSectionTokens: ICardSectionTokens = { padding: 12 };
 const agendaCardSectionTokens: ICardSectionTokens = { childrenGap: 0 };
 const attendantsCardSectionTokens: ICardSectionTokens = { childrenGap: 6 };
 
-export const CardVerticalExample: React.FunctionComponent = () => {
+export const CardVerticalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack horizontal tokens={sectionStackTokens}>
       <Card aria-label="Basic vertical card">
diff --git a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
index 6d203c8b42f09..1a18d8495d0fd 100644
--- a/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
+++ b/packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HeatMapChart, IHeatMapChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
 import { Label, ThemeContext } from '@fluentui/react';
 
-export const HeatMapChartBasicExample: React.FunctionComponent<{}> = () => {
+export const HeatMapChartBasicExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const theme = React.useContext(ThemeContext);
   const [width, setWidth] = React.useState<number>(450);
   const [height, setHeight] = React.useState<number>(350);
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
index dbecb7fdfa83b..4df8c2f179fa3 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Benchmark.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
 
-export const HorizontalBarChartBenchmarkExample: React.FunctionComponent<{}> = () => {
+export const HorizontalBarChartBenchmarkExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const hideRatio: boolean[] = [true, false];
 
   const data: IChartProps[] = [
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
index 0d326ac656783..de5a3455a1317 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomAccessibility.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HorizontalBarChart, IChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
 import { ThemeContext } from '@fluentui/react';
 
-export const HorizontalBarChartCustomAccessibilityExample: React.FunctionComponent<{}> = () => {
+export const HorizontalBarChartCustomAccessibilityExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const theme = React.useContext(ThemeContext);
 
   const getData = (isDarkMode: boolean): IChartProps[] => {
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
index 7d7a99ae651c6..47c0fddd4cb4f 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.CustomCallout.Example.tsx
@@ -10,7 +10,7 @@ import {
 import { DirectionalHint, ThemeContext } from '@fluentui/react';
 import * as d3 from 'd3-format';
 
-export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<{}> = () => {
+export const HorizontalBarChartCustomCalloutExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const hideRatio: boolean[] = [true, false];
 
   const theme = React.useContext(ThemeContext);
diff --git a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
index 37b7e2cff15cb..7ec3b083ecc29 100644
--- a/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
+++ b/packages/react-examples/src/react-charting/HorizontalBarChart/HorizontalBarChart.Variant.Example.tsx
@@ -9,7 +9,7 @@ import {
 import { ThemeContext } from '@fluentui/react';
 import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
-export const HorizontalBarChartVariantExample: React.FunctionComponent<{}> = () => {
+export const HorizontalBarChartVariantExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const [hideLabels, setHideLabels] = React.useState<boolean>(false);
   const theme = React.useContext(ThemeContext);
 
diff --git a/packages/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx
index e4eafe10336fb..9e12983ab1c58 100644
--- a/packages/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx
+++ b/packages/react-examples/src/react-charting/Legends/Legends.Controlled.Example.tsx
@@ -24,7 +24,7 @@ const legends: ILegend[] = [
   },
 ];
 
-export const LegendsControlledExample: React.FunctionComponent = () => {
+export const LegendsControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);
 
   const onChange = (keys: string[]) => {
diff --git a/packages/react-examples/src/react-charting/Legends/Legends.OnChange.Example.tsx b/packages/react-examples/src/react-charting/Legends/Legends.OnChange.Example.tsx
index 59b88aa79c12e..69bccff955090 100644
--- a/packages/react-examples/src/react-charting/Legends/Legends.OnChange.Example.tsx
+++ b/packages/react-examples/src/react-charting/Legends/Legends.OnChange.Example.tsx
@@ -24,7 +24,7 @@ const legends: ILegend[] = [
   },
 ];
 
-export const LegendsOnChangeExample: React.FunctionComponent = () => {
+export const LegendsOnChangeExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const defaultSelectedLegends = ['Legend 1', 'Legend 3'];
   const [isMulti, { toggle: toggleIsMulti }] = useBoolean(true);
 
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
index e4f7ca23044dc..6ece7efa0afa4 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChart.Example.tsx
@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-charting';
 import { Toggle } from '@fluentui/react/lib/Toggle';
 
-export const MultiStackedBarChartBasicExample: React.FunctionComponent = () => {
+export const MultiStackedBarChartBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [enableGradient, setEnableGradient] = React.useState(false);
   const [roundCorners, setRoundCorners] = React.useState(false);
 
diff --git a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
index 8847cbc165296..c3c3aab94c21f 100644
--- a/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
+++ b/packages/react-examples/src/react-charting/MultiStackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
@@ -7,7 +7,7 @@ import {
   getColorFromToken,
 } from '@fluentui/react-charting';
 
-export const MultiStackedBarChartWithPlaceholderExample: React.FC = () => {
+export const MultiStackedBarChartWithPlaceholderExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const firstChartPoints: IChartDataPoint[] = [
     { legend: 'Malware', data: 40, color: getColorFromToken(DataVizPalette.color1) },
     { legend: 'Phishing', data: 23, color: getColorFromToken(DataVizPalette.color2) },
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.CustomAccessibility.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.CustomAccessibility.Example.tsx
index 3b46c7fcb3ead..148d49619a5df 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.CustomAccessibility.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.CustomAccessibility.Example.tsx
@@ -7,7 +7,7 @@ import {
   getColorFromToken,
 } from '@fluentui/react-charting';
 
-export const MultiStackedBarChartCustomAccessibilityExample: React.FunctionComponent<{}> = () => {
+export const MultiStackedBarChartCustomAccessibilityExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const firstChartPoints: IChartDataPoint[] = [
     {
       legend: 'Debit card numbers (EU and USA)',
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
index 09975a549bc34..84b34cf83cfef 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChart.Example.tsx
@@ -9,7 +9,7 @@ import {
 } from '@fluentui/react-charting';
 import { Toggle } from '@fluentui/react/lib/Toggle';
 
-export const MultiStackedBarChartExample: React.FunctionComponent<{}> = () => {
+export const MultiStackedBarChartExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const [enableGradient, setEnableGradient] = React.useState(false);
   const [roundCorners, setRoundCorners] = React.useState(false);
 
diff --git a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
index a682e2a106b09..3246bee2464b1 100644
--- a/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
+++ b/packages/react-examples/src/react-charting/StackedBarChart/MultiStackedBarChartWithPlaceHolder.Example.tsx
@@ -7,7 +7,7 @@ import {
   getColorFromToken,
 } from '@fluentui/react-charting';
 
-export const MultiStackedBarChartWithPlaceholderExample: React.FunctionComponent<{}> = () => {
+export const MultiStackedBarChartWithPlaceholderExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const firstChartPoints: IChartDataPoint[] = [
     { legend: 'Malware', data: 40, color: getColorFromToken(DataVizPalette.color1) },
     { legend: 'Phishing', data: 23, color: getColorFromToken(DataVizPalette.color2) },
diff --git a/packages/react-examples/src/react-charting/demo/GettingStartedPage.tsx b/packages/react-examples/src/react-charting/demo/GettingStartedPage.tsx
index 564ccf5b2049d..69e7c5971ead7 100644
--- a/packages/react-examples/src/react-charting/demo/GettingStartedPage.tsx
+++ b/packages/react-examples/src/react-charting/demo/GettingStartedPage.tsx
@@ -7,7 +7,7 @@ const rootClass = mergeStyles({
   padding: 40,
 });
 
-export const GettingStartedPage: React.FunctionComponent = () => {
+export const GettingStartedPage: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={rootClass}>
       <Markdown>{require<string>('!raw-loader?esModule=false!@fluentui/react-charting/README.md')}</Markdown>
diff --git a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Basic.Example.tsx b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Basic.Example.tsx
index 4e5ed463dfcf0..9c1da4b42afb8 100644
--- a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Basic.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Basic.Example.tsx
@@ -3,7 +3,7 @@ import { Chiclet, ChicletSize } from '@fluentui/react-experiments/lib/Chiclet';
 
 const SAMPLE_URL = 'https://contoso.sharepoint.com';
 
-export const ChicletBasicExample: React.FunctionComponent<{}> = () => {
+export const ChicletBasicExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return (
     <Chiclet
       url={SAMPLE_URL}
diff --git a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Footer.Example.tsx b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Footer.Example.tsx
index 879b2c9677a2a..0d26bca90366f 100644
--- a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Footer.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Footer.Example.tsx
@@ -3,6 +3,7 @@ import { Chiclet, ChicletSize } from '@fluentui/react-experiments';
 import { IButtonProps, IconButton } from '@fluentui/react/lib/Button';
 import { Text } from '@fluentui/react/lib/Text';
 import { mergeStyles, FontWeights } from '@fluentui/react/lib/Styling';
+import type { IReactProps } from '@fluentui/utilities';
 
 const SAMPLE_URL = 'https://contoso.sharepoint.com';
 
@@ -44,7 +45,7 @@ const actionStyle = mergeStyles({
   color: '#0078d7',
 });
 
-export const ChicletFooterExample: React.FunctionComponent<{}> = () => {
+export const ChicletFooterExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const footerButtonProps: IButtonProps[] = [
     { iconProps: { iconName: 'More' } },
     { iconProps: { iconName: 'Save' } },
@@ -64,7 +65,7 @@ export const ChicletFooterExample: React.FunctionComponent<{}> = () => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-export interface IFooterComponent extends React.Props<FooterComponent> {
+export interface IFooterComponent extends IReactProps<FooterComponent> {
   buttonProps: IButtonProps[];
   activities: string;
 }
diff --git a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Preview.Example.tsx b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Preview.Example.tsx
index 2a065f154c298..376383c0cf8e6 100644
--- a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Preview.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Preview.Example.tsx
@@ -3,8 +3,8 @@ import { Chiclet, ChicletSize } from '@fluentui/react-experiments/lib/Chiclet';
 
 const SAMPLE_URL = 'https://contoso.sharepoint.com';
 
-export const ChicletPreviewExample: React.FunctionComponent<{}> = () => {
-  const Preview: React.FunctionComponent<{}> = props => {
+export const ChicletPreviewExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
+  const Preview: React.FunctionComponent<React.PropsWithChildren<{}>> = props => {
     return (
       <img
         src="https://res.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/fluent-placeholder.svg"
diff --git a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Example.tsx b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Example.tsx
index 1a3cf023fe8e7..83aec4b5f6ef6 100644
--- a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Example.tsx
@@ -3,7 +3,7 @@ import { Chiclet, ChicletSize } from '@fluentui/react-experiments';
 
 const SAMPLE_URL = 'https://contoso.sharepoint.com';
 
-export const ChicletXsmallExample: React.FunctionComponent<{}> = () => {
+export const ChicletXsmallExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   return (
     <Chiclet
       url={SAMPLE_URL}
diff --git a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Footer.Example.tsx b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Footer.Example.tsx
index 23b5511973720..b752fdeff7f93 100644
--- a/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Footer.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Chiclet/Chiclet.Xsmall.Footer.Example.tsx
@@ -4,6 +4,7 @@ import { IButtonProps, IconButton } from '@fluentui/react/lib/Button';
 import { Icon, IIconProps } from '@fluentui/react/lib/Icon';
 import { Text } from '@fluentui/react/lib/Text';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
+import { IReactProps } from '@fluentui/utilities';
 
 const SAMPLE_URL = 'https://contoso.sharepoint.com';
 
@@ -38,7 +39,7 @@ const sizeStyle = mergeStyles({
   letterSpacing: 'normal',
 });
 
-export const ChicletXsmallFooterExample: React.FunctionComponent<{}> = () => {
+export const ChicletXsmallFooterExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const footerButtonProps: IButtonProps[] = [
     { iconProps: { iconName: 'More' } },
     { iconProps: { iconName: 'CloudUpload' } },
@@ -66,7 +67,7 @@ class FooterComponent extends React.Component<IFooterComponent, {}> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-interface IFooterComponent extends React.Props<FooterComponent> {
+interface IFooterComponent extends IReactProps<FooterComponent> {
   buttonProps: IButtonProps[];
   attachProps: IIconProps;
 }
diff --git a/packages/react-examples/src/react-experiments/CollapsibleSection/CollapsibleSection.Slots.Example.tsx b/packages/react-examples/src/react-experiments/CollapsibleSection/CollapsibleSection.Slots.Example.tsx
index a9029e7e45262..681a7cfb6020a 100644
--- a/packages/react-examples/src/react-experiments/CollapsibleSection/CollapsibleSection.Slots.Example.tsx
+++ b/packages/react-examples/src/react-experiments/CollapsibleSection/CollapsibleSection.Slots.Example.tsx
@@ -10,12 +10,18 @@ import {
 
 // This is our customized component making use of default CollapsibleSectionTitle while using slots
 // to add the tooltip and icon. This would also have to be modified to add a prop for tooltip content (not done here)
-const CustomizedCollapsibleSectionTitle: React.FunctionComponent<ICollapsibleSectionTitleProps> = props => {
+const CustomizedCollapsibleSectionTitle: React.FunctionComponent<
+  React.PropsWithChildren<ICollapsibleSectionTitleProps>
+> = props => {
   const titleText: ICollapsibleSectionTitleProps['slots'] = {
     text: {
-      render: (renderProps, DefaultComponent) => (
+      render: (
+        renderProps: React.PropsWithChildren<ICollapsibleSectionTitleProps>,
+        DefaultComponent: React.ComponentType<React.PropsWithChildren<unknown>>,
+      ) => (
         // Supplement the default title text with an icon. Wrap in a Stack for proper placement.
         <Stack grow horizontal horizontalAlign="space-between">
+          {/* @ts-expect-error TODO */}
           <DefaultComponent {...renderProps}>{props.text}</DefaultComponent>
           <Icon iconName="warning" styles={{ root: { color: 'red' } }} />
         </Stack>
diff --git a/packages/react-examples/src/react-experiments/FolderCover/FolderCover.Basic.Example.tsx b/packages/react-examples/src/react-experiments/FolderCover/FolderCover.Basic.Example.tsx
index 0508972d8a000..81a7584fb36f7 100644
--- a/packages/react-examples/src/react-experiments/FolderCover/FolderCover.Basic.Example.tsx
+++ b/packages/react-examples/src/react-experiments/FolderCover/FolderCover.Basic.Example.tsx
@@ -14,7 +14,7 @@ interface IFolderCoverWithImageProps extends IFolderCoverProps {
   originalImageSize: ISize;
 }
 
-const FolderCoverWithImage: React.FunctionComponent<IFolderCoverWithImageProps> = (
+const FolderCoverWithImage: React.FunctionComponent<React.PropsWithChildren<IFolderCoverWithImageProps>> = (
   props: IFolderCoverWithImageProps,
 ): JSX.Element => {
   const { originalImageSize, ...folderCoverProps } = props;
diff --git a/packages/react-examples/src/react-experiments/Signals/Signals.Basic.Example.tsx b/packages/react-examples/src/react-experiments/Signals/Signals.Basic.Example.tsx
index 5a42c904b0b68..a89c44662b1e4 100644
--- a/packages/react-examples/src/react-experiments/Signals/Signals.Basic.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Signals/Signals.Basic.Example.tsx
@@ -39,7 +39,9 @@ interface ISignalExampleProps {
   text?: string;
 }
 
-const SignalExample: React.FunctionComponent<ISignalExampleProps> = (props: ISignalExampleProps): JSX.Element => {
+const SignalExample: React.FunctionComponent<React.PropsWithChildren<ISignalExampleProps>> = (
+  props: ISignalExampleProps,
+): JSX.Element => {
   const { text = lorem(4) } = props;
 
   return (
diff --git a/packages/react-examples/src/react-experiments/Slider/Slider.Vertical.Example.tsx b/packages/react-examples/src/react-experiments/Slider/Slider.Vertical.Example.tsx
index 55b8ad528e453..0d954d6c9eed8 100644
--- a/packages/react-examples/src/react-experiments/Slider/Slider.Vertical.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Slider/Slider.Vertical.Example.tsx
@@ -11,7 +11,7 @@ export interface ISliderVerticalExampleState {
 }
 const stackTokens: IStackTokens = { childrenGap: 20 };
 /* eslint-disable react/jsx-no-bind */
-export const SliderVerticalExample: React.FunctionComponent = () => {
+export const SliderVerticalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const marks = [
     {
       value: 0,
diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx
index 5da7307c38e01..85fe5862e94bf 100644
--- a/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Tile/Tile.Document.Example.tsx
@@ -44,7 +44,7 @@ interface IDocumentTileWithThumbnailProps {
   item: (typeof ITEMS)[0];
 }
 
-const DocumentTileWithThumbnail: React.FunctionComponent<IDocumentTileWithThumbnailProps> = (
+const DocumentTileWithThumbnail: React.FunctionComponent<React.PropsWithChildren<IDocumentTileWithThumbnailProps>> = (
   props: IDocumentTileWithThumbnailProps,
 ): JSX.Element => {
   const tile = (
diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx
index 95c335e2de634..4f27148b03d4f 100644
--- a/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Tile/Tile.Folder.Example.tsx
@@ -48,7 +48,7 @@ interface IFolderTileWithThumbnailProps {
   item: (typeof ITEMS)[0];
 }
 
-const FolderTileWithThumbnail: React.FunctionComponent<IFolderTileWithThumbnailProps> = (
+const FolderTileWithThumbnail: React.FunctionComponent<React.PropsWithChildren<IFolderTileWithThumbnailProps>> = (
   props: IFolderTileWithThumbnailProps,
 ): JSX.Element => {
   const folderCover = (
diff --git a/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx b/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx
index f7d417493b591..199afad154221 100644
--- a/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx
+++ b/packages/react-examples/src/react-experiments/Tile/Tile.Media.Example.tsx
@@ -108,7 +108,9 @@ interface IImageTileProps {
   item: (typeof ITEMS)[0];
 }
 
-const ImageTile: React.FunctionComponent<IImageTileProps> = (props: IImageTileProps): JSX.Element => {
+const ImageTile: React.FunctionComponent<React.PropsWithChildren<IImageTileProps>> = (
+  props: IImageTileProps,
+): JSX.Element => {
   const tile = (
     <Tile
       contentSize={props.tileSize}
diff --git a/packages/react-examples/src/react-experiments/demo/GettingStartedPage.tsx b/packages/react-examples/src/react-experiments/demo/GettingStartedPage.tsx
index f3af690892547..f9d9c7cf851a2 100644
--- a/packages/react-examples/src/react-experiments/demo/GettingStartedPage.tsx
+++ b/packages/react-examples/src/react-experiments/demo/GettingStartedPage.tsx
@@ -7,7 +7,7 @@ const rootClass = mergeStyles({
   padding: 40,
 });
 
-export const GettingStartedPage: React.FunctionComponent = () => {
+export const GettingStartedPage: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={rootClass}>
       <Markdown>{require<string>('!raw-loader?esModule=false!@fluentui/react-experiments/README.md')}</Markdown>
diff --git a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Disabled.Example.tsx b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Disabled.Example.tsx
index 44e7ddefc93d3..21a87d7e2eef5 100644
--- a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Disabled.Example.tsx
+++ b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Disabled.Example.tsx
@@ -7,7 +7,7 @@ import { Stack } from '@fluentui/react/lib/Stack';
 
 const textFieldStyles: Partial<ITextFieldStyles> = { root: { width: 200 } };
 
-export const FocusZoneDisabledExample: React.FunctionComponent = () => {
+export const FocusZoneDisabledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const tokens = { childrenGap: 20 };
   return (
     <Stack tokens={tokens} horizontalAlign="start">
diff --git a/packages/react-examples/src/react-focus/FocusZone/FocusZone.HorizontalMenu.Example.tsx b/packages/react-examples/src/react-focus/FocusZone/FocusZone.HorizontalMenu.Example.tsx
index 6e9331e73b716..63acc25084139 100644
--- a/packages/react-examples/src/react-focus/FocusZone/FocusZone.HorizontalMenu.Example.tsx
+++ b/packages/react-examples/src/react-focus/FocusZone/FocusZone.HorizontalMenu.Example.tsx
@@ -8,7 +8,7 @@ const ITEMS = createArray(5, index => ({
   name: 'Item-' + index,
 }));
 
-export const FocusZoneHorizontalMenuExample: React.FunctionComponent = () => {
+export const FocusZoneHorizontalMenuExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <FocusZone direction={FocusZoneDirection.domOrder} role="menubar">
       {ITEMS.map(item => (
diff --git a/packages/react-examples/src/react-focus/FocusZone/FocusZone.List.Example.tsx b/packages/react-examples/src/react-focus/FocusZone/FocusZone.List.Example.tsx
index c427bac6bb8fc..2cc8e36c4c595 100644
--- a/packages/react-examples/src/react-focus/FocusZone/FocusZone.List.Example.tsx
+++ b/packages/react-examples/src/react-focus/FocusZone/FocusZone.List.Example.tsx
@@ -44,7 +44,7 @@ const COLUMNS: IColumn[] = [
 
 const detailsRowStyles: Partial<IDetailsRowStyles> = { root: { display: 'block', width: '100%' } };
 
-export const FocusZoneListExample: React.FunctionComponent = () => {
+export const FocusZoneListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   //  Initialize the selection when the component is first rendered (same instance will be reused)
   const selection = useConst(() => {
     const sel = new Selection();
diff --git a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Photos.Example.tsx b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Photos.Example.tsx
index 9a1394d431d72..a5192db8e5e95 100644
--- a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Photos.Example.tsx
+++ b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Photos.Example.tsx
@@ -61,7 +61,7 @@ const getItems = (): IPhoto[] => {
   return items;
 };
 
-export const FocusZonePhotosExample: React.FunctionComponent = () => {
+export const FocusZonePhotosExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   //  Initialize the items when the component is first rendered (same array will be reused)
   const items = useConst(getItems);
   return (
diff --git a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Tabbable.Example.tsx b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Tabbable.Example.tsx
index 4ebdc5ac48f36..4c83e82ccbd17 100644
--- a/packages/react-examples/src/react-focus/FocusZone/FocusZone.Tabbable.Example.tsx
+++ b/packages/react-examples/src/react-focus/FocusZone/FocusZone.Tabbable.Example.tsx
@@ -19,7 +19,7 @@ const menuProps = {
     },
   ],
 };
-export const FocusZoneTabbableExample: React.FunctionComponent = () => {
+export const FocusZoneTabbableExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const tokens = { childrenGap: 20 };
   return (
     <Stack tokens={tokens} horizontalAlign="start">
diff --git a/packages/react-examples/src/react/ActivityItem/ActivityItem.Basic.Example.tsx b/packages/react-examples/src/react/ActivityItem/ActivityItem.Basic.Example.tsx
index a0b5b3e1509f7..fccb96336684b 100644
--- a/packages/react-examples/src/react/ActivityItem/ActivityItem.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ActivityItem/ActivityItem.Basic.Example.tsx
@@ -100,7 +100,7 @@ const activityItemExamples = [
   },
 ];
 
-export const ActivityItemBasicExample: React.FunctionComponent = () => {
+export const ActivityItemBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       {activityItemExamples.map((item: { key: string | number }) => (
diff --git a/packages/react-examples/src/react/ActivityItem/ActivityItem.Compact.Example.tsx b/packages/react-examples/src/react/ActivityItem/ActivityItem.Compact.Example.tsx
index 6d4a54a5303ca..aec82f55448d9 100644
--- a/packages/react-examples/src/react/ActivityItem/ActivityItem.Compact.Example.tsx
+++ b/packages/react-examples/src/react/ActivityItem/ActivityItem.Compact.Example.tsx
@@ -66,7 +66,7 @@ const activityItemExamples: Partial<IActivityItemProps & React.ClassAttributes<{
   },
 ];
 
-export const ActivityItemCompactExample: React.FunctionComponent = () => {
+export const ActivityItemCompactExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       {activityItemExamples.map((item: { key: string | number }) => (
diff --git a/packages/react-examples/src/react/ActivityItem/ActivityItem.Persona.Example.tsx b/packages/react-examples/src/react/ActivityItem/ActivityItem.Persona.Example.tsx
index bd207d583db90..710b4addcc6ed 100644
--- a/packages/react-examples/src/react/ActivityItem/ActivityItem.Persona.Example.tsx
+++ b/packages/react-examples/src/react/ActivityItem/ActivityItem.Persona.Example.tsx
@@ -11,7 +11,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const ActivityItemPersonaExample: React.FunctionComponent = () => {
+export const ActivityItemPersonaExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   /* eslint-disable react/jsx-no-bind */
   const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [
     {
diff --git a/packages/react-examples/src/react/Announced/Announced.BulkOperations.Example.tsx b/packages/react-examples/src/react/Announced/Announced.BulkOperations.Example.tsx
index f402e2b3bc57a..d37178a0988fb 100644
--- a/packages/react-examples/src/react/Announced/Announced.BulkOperations.Example.tsx
+++ b/packages/react-examples/src/react/Announced/Announced.BulkOperations.Example.tsx
@@ -25,7 +25,7 @@ const columns: IColumn[] = [
 
 const stackTokens: IStackTokens = { childrenGap: 10 };
 
-export const AnnouncedBulkOperationsExample: React.FunctionComponent = () => {
+export const AnnouncedBulkOperationsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const selection = useConst(() => new Selection());
   const [items, setItems] = React.useState<IExampleItem[]>(() =>
     createArray(20, i => ({
diff --git a/packages/react-examples/src/react/Announced/Announced.QuickActions.Example.tsx b/packages/react-examples/src/react/Announced/Announced.QuickActions.Example.tsx
index eb4af63776656..9ceebd2d56d9b 100644
--- a/packages/react-examples/src/react/Announced/Announced.QuickActions.Example.tsx
+++ b/packages/react-examples/src/react/Announced/Announced.QuickActions.Example.tsx
@@ -14,7 +14,7 @@ interface IExampleItem {
   name: string;
 }
 
-export const AnnouncedQuickActionsExample: React.FunctionComponent = () => {
+export const AnnouncedQuickActionsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const detailsList = React.useRef<IDetailsList>(null);
   const textField = React.useRef<ITextField>(null);
   const selection = useConst(() => new Selection());
diff --git a/packages/react-examples/src/react/Announced/Announced.SearchResults.Example.tsx b/packages/react-examples/src/react/Announced/Announced.SearchResults.Example.tsx
index b03d06fbe02b6..320e0eddfb605 100644
--- a/packages/react-examples/src/react/Announced/Announced.SearchResults.Example.tsx
+++ b/packages/react-examples/src/react/Announced/Announced.SearchResults.Example.tsx
@@ -42,7 +42,7 @@ const listContainsDocument = (tag: ITag, tagList: ITag[]) => {
   return tagList.filter(compareTag => compareTag.key === tag.key).length > 0;
 };
 
-export const AnnouncedSearchResultsExample: React.FunctionComponent = () => {
+export const AnnouncedSearchResultsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hasFilterText, setHasFilterText] = React.useState(false);
   const [suggestionCount, setSuggestionCount] = React.useState(0);
 
diff --git a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Basic.Example.tsx b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Basic.Example.tsx
index 36155698b9d41..14d5ec2d8dd8c 100644
--- a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Basic.Example.tsx
@@ -40,7 +40,7 @@ const itemsWithHeading: IBreadcrumbItem[] = [
   { text: 'Folder 2', key: 'd2', isCurrentItem: true, as: 'h4' },
 ];
 
-export const BreadcrumbBasicExample: React.FunctionComponent = () => {
+export const BreadcrumbBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <Label styles={labelStyles}>With items rendered as buttons</Label>
diff --git a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Collapsing.Example.tsx b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Collapsing.Example.tsx
index caf2bc96ee120..057b86a22e5b7 100644
--- a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Collapsing.Example.tsx
+++ b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Collapsing.Example.tsx
@@ -15,7 +15,7 @@ const items: IBreadcrumbItem[] = [
   { text: 'This is folder 5', key: 'f5', onClick: _onBreadcrumbItemClicked, isCurrentItem: true },
 ];
 
-export const BreadcrumbCollapsingExample: React.FunctionComponent = () => {
+export const BreadcrumbCollapsingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <Label styles={labelStyles}>With no maxDisplayedItems</Label>
diff --git a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Static.Example.tsx b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Static.Example.tsx
index 2f995e198b4bb..915c88754a6f5 100644
--- a/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Static.Example.tsx
+++ b/packages/react-examples/src/react/Breadcrumb/Breadcrumb.Static.Example.tsx
@@ -10,7 +10,7 @@ const items: IBreadcrumbItem[] = [
   { text: 'This is folder 5', key: 'f5', onClick: _onBreadcrumbItemClicked, isCurrentItem: true },
 ];
 
-export const BreadcrumbStaticExample: React.FunctionComponent = () => {
+export const BreadcrumbStaticExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div style={{ display: 'inline-block' }}>
       <Breadcrumb
diff --git a/packages/react-examples/src/react/Button/Button.Action.Example.tsx b/packages/react-examples/src/react/Button/Button.Action.Example.tsx
index e4793af3e2914..cfaf6034ba640 100644
--- a/packages/react-examples/src/react/Button/Button.Action.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Action.Example.tsx
@@ -10,7 +10,7 @@ export interface IButtonExampleProps {
 
 const addFriendIcon: IIconProps = { iconName: 'AddFriend' };
 
-export const ButtonActionExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonActionExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.Anchor.Example.tsx b/packages/react-examples/src/react/Button/Button.Anchor.Example.tsx
index 09d570afb7aaa..02ad3ba27c2fd 100644
--- a/packages/react-examples/src/react/Button/Button.Anchor.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Anchor.Example.tsx
@@ -7,7 +7,7 @@ export interface IButtonExampleProps {
   checked?: boolean;
 }
 
-export const ButtonAnchorExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonAnchorExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   // The href causes this button to be rendered as an anchor.
diff --git a/packages/react-examples/src/react/Button/Button.Command.Example.tsx b/packages/react-examples/src/react/Button/Button.Command.Example.tsx
index 769cfd136bde9..4e81c50fc7a89 100644
--- a/packages/react-examples/src/react/Button/Button.Command.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Command.Example.tsx
@@ -27,7 +27,7 @@ const menuProps: IContextualMenuProps = {
 
 const addIcon: IIconProps = { iconName: 'Add' };
 
-export const ButtonCommandExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonCommandExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.CommandBar.Example.tsx b/packages/react-examples/src/react/Button/Button.CommandBar.Example.tsx
index 7f2cc0a4805c7..eacd7427e2d0c 100644
--- a/packages/react-examples/src/react/Button/Button.CommandBar.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.CommandBar.Example.tsx
@@ -26,7 +26,7 @@ const addIcon: IIconProps = { iconName: 'Add' };
 const mailIcon: IIconProps = { iconName: 'Mail' };
 const stackStyles: Partial<IStackStyles> = { root: { height: 44 } };
 
-export const ButtonCommandBarExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonCommandBarExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   // Here we use a Stack to simulate a command bar.
diff --git a/packages/react-examples/src/react/Button/Button.Compound.Example.tsx b/packages/react-examples/src/react/Button/Button.Compound.Example.tsx
index 181795b54be41..ceb97fbcabdcb 100644
--- a/packages/react-examples/src/react/Button/Button.Compound.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Compound.Example.tsx
@@ -11,7 +11,7 @@ export interface IButtonExampleProps {
 // Example formatting
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
-export const ButtonCompoundExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonCompoundExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.ContextualMenu.Example.tsx b/packages/react-examples/src/react/Button/Button.ContextualMenu.Example.tsx
index dec72f42817c4..a7ace32b21acb 100644
--- a/packages/react-examples/src/react/Button/Button.ContextualMenu.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.ContextualMenu.Example.tsx
@@ -31,7 +31,7 @@ const menuProps: IContextualMenuProps = {
 };
 const addIcon: IIconProps = { iconName: 'Add' };
 
-export const ButtonContextualMenuExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonContextualMenuExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.CustomSplit.Example.tsx b/packages/react-examples/src/react/Button/Button.CustomSplit.Example.tsx
index a49837db4e219..532c0de9afb91 100644
--- a/packages/react-examples/src/react/Button/Button.CustomSplit.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.CustomSplit.Example.tsx
@@ -36,7 +36,7 @@ const menuProps: IContextualMenuProps = {
 
 const addIcon: IIconProps = { iconName: 'Add' };
 
-export const ButtonSplitCustomExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonSplitCustomExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.Default.Example.tsx b/packages/react-examples/src/react/Button/Button.Default.Example.tsx
index 3f9fd8b2fd100..e66904c94aff0 100644
--- a/packages/react-examples/src/react/Button/Button.Default.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Default.Example.tsx
@@ -11,7 +11,7 @@ export interface IButtonExampleProps {
 // Example formatting
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
-export const ButtonDefaultExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonDefaultExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.Icon.Example.tsx b/packages/react-examples/src/react/Button/Button.Icon.Example.tsx
index d222e2bd5028b..5462435dc9b13 100644
--- a/packages/react-examples/src/react/Button/Button.Icon.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Icon.Example.tsx
@@ -26,7 +26,7 @@ const menuProps: IContextualMenuProps = {
   directionalHintFixed: true,
 };
 
-export const ButtonIconExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonIconExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.IconWithTooltip.Example.tsx b/packages/react-examples/src/react/Button/Button.IconWithTooltip.Example.tsx
index d9c6b90257a6e..be60a1181c0ec 100644
--- a/packages/react-examples/src/react/Button/Button.IconWithTooltip.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.IconWithTooltip.Example.tsx
@@ -19,7 +19,7 @@ const calloutProps = { gapSpace: 0 };
 // If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
-export const ButtonIconWithTooltipExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonIconWithTooltipExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react/Button/Button.Split.Example.tsx b/packages/react-examples/src/react/Button/Button.Split.Example.tsx
index c2a59fb0e7422..66a6ef1efe28b 100644
--- a/packages/react-examples/src/react/Button/Button.Split.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Split.Example.tsx
@@ -25,7 +25,7 @@ const menuProps: IContextualMenuProps = {
 // Example formatting
 const stackTokens: IStackTokens = { childrenGap: 40 };
 
-export const ButtonSplitExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonSplitExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
 
   return (
diff --git a/packages/react-examples/src/react/Button/Button.Toggle.Example.tsx b/packages/react-examples/src/react/Button/Button.Toggle.Example.tsx
index 512b7137f87ee..af63fe4ab5078 100644
--- a/packages/react-examples/src/react/Button/Button.Toggle.Example.tsx
+++ b/packages/react-examples/src/react/Button/Button.Toggle.Example.tsx
@@ -12,7 +12,7 @@ export interface IButtonExampleProps {
 const volume0Icon: IIconProps = { iconName: 'Volume0' };
 const volume3Icon: IIconProps = { iconName: 'Volume3' };
 
-export const ButtonToggleExample: React.FunctionComponent<IButtonExampleProps> = props => {
+export const ButtonToggleExample: React.FunctionComponent<React.PropsWithChildren<IButtonExampleProps>> = props => {
   const { disabled, checked } = props;
   const [muted, { toggle: setMuted }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Button.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Button.Example.tsx
index 3fbbae60cf59c..5983755c306b8 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Button.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Button.Example.tsx
@@ -9,7 +9,7 @@ import {
 } from '@fluentui/react';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const CalendarButtonExample: React.FunctionComponent = () => {
+export const CalendarButtonExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>();
   const [showCalendar, { toggle: toggleShowCalendar, setFalse: hideCalendar }] = useBoolean(false);
   const buttonContainerRef = React.useRef<HTMLDivElement>(null);
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.ContiguousWorkWeekDays.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.ContiguousWorkWeekDays.Example.tsx
index 833a4007e86f8..f54e6ceacfe77 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.ContiguousWorkWeekDays.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.ContiguousWorkWeekDays.Example.tsx
@@ -3,7 +3,7 @@ import { Calendar, DateRangeType, DayOfWeek, defaultCalendarStrings } from '@flu
 
 const workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday];
 
-export const CalendarInlineContiguousWorkWeekDaysExample: React.FunctionComponent = () => {
+export const CalendarInlineContiguousWorkWeekDaysExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.CustomDayCellRef.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.CustomDayCellRef.Example.tsx
index df3e4dd74cef2..0cc873db9cd34 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.CustomDayCellRef.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.CustomDayCellRef.Example.tsx
@@ -13,7 +13,7 @@ const calendarDayProps: Partial<ICalendarDayProps> = {
   },
 };
 
-export const CalendarInlineCustomDayCellRefExample: React.FunctionComponent = () => {
+export const CalendarInlineCustomDayCellRefExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
   const onSelectDate = React.useCallback((date: Date, dateRangeArray: Date[]): void => {
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.DateBoundaries.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.DateBoundaries.Example.tsx
index 65021bf09e741..96508acd886a8 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.DateBoundaries.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.DateBoundaries.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { addMonths, addYears, addDays, Calendar, defaultCalendarStrings } from '@fluentui/react';
 import { useConst } from '@fluentui/react-hooks';
 
-export const CalendarInlineDateBoundariesExample: React.FunctionComponent = () => {
+export const CalendarInlineDateBoundariesExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const today = useConst(new Date());
   const minDate = useConst(addMonths(today, -1));
   const maxDate = useConst(addYears(today, 1));
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.Example.tsx
index eb157493f3354..850c2c0d9e26f 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 
-export const CalendarInlineExample: React.FunctionComponent = () => {
+export const CalendarInlineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>(new Date());
 
   return (
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthOnly.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthOnly.Example.tsx
index 74a32f3c53009..77e51b3890adb 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthOnly.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthOnly.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Calendar, DateRangeType, defaultCalendarStrings } from '@fluentui/react';
 
-export const CalendarInlineMonthOnlyExample: React.FunctionComponent = () => {
+export const CalendarInlineMonthOnlyExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthSelection.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthSelection.Example.tsx
index 3bff9466229af..053a34d506b45 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthSelection.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.MonthSelection.Example.tsx
@@ -17,7 +17,7 @@ const styles = mergeStyleSets({
 const dateRangeType = DateRangeType.Month;
 const firstDayOfWeek = DayOfWeek.Sunday;
 
-export const CalendarInlineMonthSelectionExample: React.FunctionComponent = () => {
+export const CalendarInlineMonthSelectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.MultidayDayView.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.MultidayDayView.Example.tsx
index d071334f781cd..187c4104e1d64 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.MultidayDayView.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.MultidayDayView.Example.tsx
@@ -15,7 +15,7 @@ const dayOptions: IDropdownOption[] = [
   { key: '6', text: '6' },
 ];
 
-export const CalendarInlineMultidayDayViewExample: React.FunctionComponent = () => {
+export const CalendarInlineMultidayDayViewExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
   const [daysToSelectInDayView, setDaysToSelectInDayView] = React.useState(4);
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.NonContiguousWorkWeekDays.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.NonContiguousWorkWeekDays.Example.tsx
index 94cc46dea1090..4bb7577dbe259 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.NonContiguousWorkWeekDays.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.NonContiguousWorkWeekDays.Example.tsx
@@ -3,7 +3,7 @@ import { Calendar, DateRangeType, DayOfWeek, defaultCalendarStrings } from '@flu
 
 const workWeekDays = [DayOfWeek.Tuesday, DayOfWeek.Saturday, DayOfWeek.Wednesday, DayOfWeek.Friday];
 
-export const CalendarInlineNonContiguousWorkWeekDaysExample: React.FunctionComponent = () => {
+export const CalendarInlineNonContiguousWorkWeekDaysExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.OverlaidMonthPicker.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.OverlaidMonthPicker.Example.tsx
index fc4c5060de14a..5361679aa8d52 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.OverlaidMonthPicker.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.OverlaidMonthPicker.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 
-export const CalendarInlineOverlaidMonthExample: React.FunctionComponent = () => {
+export const CalendarInlineOverlaidMonthExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
   const onSelectDate = React.useCallback((date: Date, dateRangeArray: Date[]): void => {
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.SixWeeks.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.SixWeeks.tsx
index 5f7c1108b44f2..bdc71c8610cb6 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.SixWeeks.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.SixWeeks.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 
-export const CalendarInlineSixWeeksExample: React.FunctionComponent = () => {
+export const CalendarInlineSixWeeksExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
   const onSelectDate = React.useCallback((date: Date, dateRangeArray: Date[]): void => {
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekNumbers.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekNumbers.Example.tsx
index 3ae8dc828b06c..2d68f894a816c 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekNumbers.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekNumbers.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 
-export const CalendarInlineWeekNumbersExample: React.FunctionComponent = () => {
+export const CalendarInlineWeekNumbersExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
   const onSelectDate = React.useCallback((date: Date, dateRangeArray: Date[]): void => {
diff --git a/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekSelection.Example.tsx b/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekSelection.Example.tsx
index e33d2df79d66c..038e2703e943c 100644
--- a/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekSelection.Example.tsx
+++ b/packages/react-examples/src/react/Calendar/Calendar.Inline.WeekSelection.Example.tsx
@@ -17,7 +17,7 @@ const styles = mergeStyleSets({
 const dateRangeType = DateRangeType.Week;
 const firstDayOfWeek = DayOfWeek.Sunday;
 
-export const CalendarInlineWeekSelectionExample: React.FunctionComponent = () => {
+export const CalendarInlineWeekSelectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedDateRange, setSelectedDateRange] = React.useState<Date[]>();
   const [selectedDate, setSelectedDate] = React.useState<Date>();
 
diff --git a/packages/react-examples/src/react/Callout/Callout.Basic.Example.tsx b/packages/react-examples/src/react/Callout/Callout.Basic.Example.tsx
index 8c5623fc0c379..6fdc4ddc2ed43 100644
--- a/packages/react-examples/src/react/Callout/Callout.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Callout/Callout.Basic.Example.tsx
@@ -3,7 +3,7 @@ import { Callout, Link, mergeStyleSets, Text, FontWeights } from '@fluentui/reac
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 
-export const CalloutBasicExample: React.FunctionComponent = () => {
+export const CalloutBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
   const buttonId = useId('callout-button');
   const labelId = useId('callout-label');
diff --git a/packages/react-examples/src/react/Callout/Callout.Cover.Example.tsx b/packages/react-examples/src/react/Callout/Callout.Cover.Example.tsx
index c203440eb0f5e..5f72b0815de7c 100644
--- a/packages/react-examples/src/react/Callout/Callout.Cover.Example.tsx
+++ b/packages/react-examples/src/react/Callout/Callout.Cover.Example.tsx
@@ -3,7 +3,7 @@ import { Callout, getTheme, mergeStyleSets, FontWeights, Text } from '@fluentui/
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 
-export const CalloutCoverExample: React.FunctionComponent = () => {
+export const CalloutCoverExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
   const buttonId = useId('callout-button');
   const labelId = useId('callout-label');
diff --git a/packages/react-examples/src/react/Callout/Callout.Directional.Example.tsx b/packages/react-examples/src/react/Callout/Callout.Directional.Example.tsx
index 44ee65f02f8ed..f326a5d2704de 100644
--- a/packages/react-examples/src/react/Callout/Callout.Directional.Example.tsx
+++ b/packages/react-examples/src/react/Callout/Callout.Directional.Example.tsx
@@ -15,7 +15,7 @@ import {
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 
-export const CalloutDirectionalExample: React.FunctionComponent = () => {
+export const CalloutDirectionalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
   const [isBeakVisible, { toggle: toggleIsBeakVisible }] = useBoolean(true);
   const [gapSpace, setGapSpace] = React.useState<number>();
diff --git a/packages/react-examples/src/react/Callout/Callout.FocusTrap.Example.tsx b/packages/react-examples/src/react/Callout/Callout.FocusTrap.Example.tsx
index 279b57355e461..b1e2f63bb5900 100644
--- a/packages/react-examples/src/react/Callout/Callout.FocusTrap.Example.tsx
+++ b/packages/react-examples/src/react/Callout/Callout.FocusTrap.Example.tsx
@@ -11,7 +11,7 @@ import {
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/Button';
 
-export const CalloutFocusTrapExample: React.FunctionComponent = () => {
+export const CalloutFocusTrapExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
   const buttonId = useId('callout-button');
 
diff --git a/packages/react-examples/src/react/Callout/Callout.Status.Example.tsx b/packages/react-examples/src/react/Callout/Callout.Status.Example.tsx
index c6a9333bc2ee7..e1b3f414d01cc 100644
--- a/packages/react-examples/src/react/Callout/Callout.Status.Example.tsx
+++ b/packages/react-examples/src/react/Callout/Callout.Status.Example.tsx
@@ -3,7 +3,7 @@ import { mergeStyleSets, DelayedRender, Callout, Text } from '@fluentui/react';
 import { useBoolean, useId } from '@fluentui/react-hooks';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 
-export const StatusCalloutExample: React.FunctionComponent = () => {
+export const StatusCalloutExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
   const buttonId = useId('callout-button');
 
diff --git a/packages/react-examples/src/react/Checkbox/Checkbox.Basic.Example.tsx b/packages/react-examples/src/react/Checkbox/Checkbox.Basic.Example.tsx
index 07245d7c429f1..44fb9747a3404 100644
--- a/packages/react-examples/src/react/Checkbox/Checkbox.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Checkbox/Checkbox.Basic.Example.tsx
@@ -4,7 +4,7 @@ import { Checkbox, Stack } from '@fluentui/react';
 // Used to add spacing between example checkboxes
 const stackTokens = { childrenGap: 10 };
 
-export const CheckboxBasicExample: React.FunctionComponent = () => {
+export const CheckboxBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // These checkboxes are uncontrolled because they don't set the `checked` prop.
   return (
     <Stack tokens={stackTokens}>
diff --git a/packages/react-examples/src/react/Checkbox/Checkbox.Indeterminate.Example.tsx b/packages/react-examples/src/react/Checkbox/Checkbox.Indeterminate.Example.tsx
index 61980d6fff756..6f98c72206ab7 100644
--- a/packages/react-examples/src/react/Checkbox/Checkbox.Indeterminate.Example.tsx
+++ b/packages/react-examples/src/react/Checkbox/Checkbox.Indeterminate.Example.tsx
@@ -4,7 +4,7 @@ import { Checkbox, Stack } from '@fluentui/react';
 // Used to add spacing between example checkboxes
 const stackTokens = { childrenGap: 10 };
 
-export const CheckboxIndeterminateExample: React.FunctionComponent = () => {
+export const CheckboxIndeterminateExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Only used for the controlled checkbox (the last one)
   const [isIndeterminate, setIsIndeterminate] = React.useState(true);
   const [isChecked, setIsChecked] = React.useState(false);
diff --git a/packages/react-examples/src/react/Checkbox/Checkbox.Other.Example.tsx b/packages/react-examples/src/react/Checkbox/Checkbox.Other.Example.tsx
index 27497a4da3a0c..a574d59527452 100644
--- a/packages/react-examples/src/react/Checkbox/Checkbox.Other.Example.tsx
+++ b/packages/react-examples/src/react/Checkbox/Checkbox.Other.Example.tsx
@@ -13,7 +13,7 @@ const inputProps: ICheckboxProps['inputProps'] = {
 // Used to add spacing between example checkboxes
 const stackTokens = { childrenGap: 10 };
 
-export const CheckboxOtherExample: React.FunctionComponent = () => {
+export const CheckboxOtherExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Only for the first checkbox, which is controlled
   const [isChecked, setIsChecked] = React.useState(true);
   const onChange = React.useCallback(
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Basic.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Basic.Example.tsx
index 5232e20b23940..fa89a53738fe9 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Basic.Example.tsx
@@ -8,7 +8,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'D', text: 'Option D' },
 ];
 
-export const ChoiceGroupBasicExample: React.FunctionComponent = () => {
+export const ChoiceGroupBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <ChoiceGroup defaultSelectedKey="B" options={options} onChange={_onChange} label="Pick one" required={true} />;
 };
 
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Controlled.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Controlled.Example.tsx
index ce69bbfe4887b..b4bea1586047f 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Controlled.Example.tsx
@@ -8,7 +8,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'D', text: 'Option D' },
 ];
 
-export const ChoiceGroupControlledExample: React.FunctionComponent = () => {
+export const ChoiceGroupControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKey, setSelectedKey] = React.useState<string | undefined>('B');
 
   const onChange = React.useCallback((ev: React.SyntheticEvent<HTMLElement>, option: IChoiceGroupOption) => {
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Custom.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Custom.Example.tsx
index 948da6f898e81..2063adf910cba 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Custom.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Custom.Example.tsx
@@ -3,7 +3,7 @@ import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react/lib/ChoiceGroup
 import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { CatIcon } from '@fluentui/react-icons-mdl2';
 
-export const ChoiceGroupCustomExample: React.FunctionComponent = () => {
+export const ChoiceGroupCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <ChoiceGroup defaultSelectedKey="B" options={options} label="Pick one" />;
 };
 
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Icon.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Icon.Example.tsx
index 128d55bce8c45..47f387f489523 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Icon.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Icon.Example.tsx
@@ -7,7 +7,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'month', text: 'Month', iconProps: { iconName: 'Calendar' }, disabled: true },
 ];
 
-export const ChoiceGroupIconExample: React.FunctionComponent = () => {
+export const ChoiceGroupIconExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <ChoiceGroup label="Pick one icon" defaultSelectedKey="day" options={options} />
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
index bc29b48a4a149..6ec3d72a80d4b 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
@@ -21,7 +21,7 @@ const options: IChoiceGroupOption[] = [
   },
 ];
 
-export const ChoiceGroupImageExample: React.FunctionComponent = () => {
+export const ChoiceGroupImageExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <ChoiceGroup label="Pick one image" defaultSelectedKey="bar" options={options} />
diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Label.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Label.Example.tsx
index 0f10fb6e84a31..327656889917a 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Label.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Label.Example.tsx
@@ -12,7 +12,7 @@ const options: IChoiceGroupOption[] = [
   { key: 'D', text: 'Option D' },
 ];
 
-export const ChoiceGroupLabelExample: React.FunctionComponent = () => {
+export const ChoiceGroupLabelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use the useId() hook to ensure that the label ID is unique on the page. Notes:
   // - It's also okay to use a plain string and manually ensure its uniqueness.
   // - In a function component, we get the ID with the useId() hook so that it will stay the same.
diff --git a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx
index 6312fa7d413d5..f1700dc7db7ea 100644
--- a/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Coachmark/Coachmark.Basic.Example.tsx
@@ -45,7 +45,7 @@ const dropdownOptions: IDropdownOption[] = [
   { key: 'N', text: 'Right bottom edge', data: DirectionalHint.rightBottomEdge },
 ];
 
-export const CoachmarkBasicExample: React.FunctionComponent = () => {
+export const CoachmarkBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const targetButton = React.useRef<HTMLDivElement>(null);
   const [isCoachmarkVisible, { setFalse: hideCoachmark, setTrue: showCoachmark }] = useBoolean(false);
   const [coachmarkPosition, setCoachmarkPosition] = React.useState<DirectionalHint>(DirectionalHint.bottomAutoEdge);
diff --git a/packages/react-examples/src/react/ColorPicker/ColorPicker.Basic.Example.tsx b/packages/react-examples/src/react/ColorPicker/ColorPicker.Basic.Example.tsx
index ef58ba8017110..bdae583553b8b 100644
--- a/packages/react-examples/src/react/ColorPicker/ColorPicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ColorPicker/ColorPicker.Basic.Example.tsx
@@ -14,7 +14,7 @@ import {
 
 const white = getColorFromString('#ffffff')!;
 
-export const ColorPickerBasicExample: React.FunctionComponent = () => {
+export const ColorPickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [color, setColor] = React.useState(white);
   const [showPreview, setShowPreview] = React.useState(true);
   const [alphaType, setAlphaType] = React.useState<IColorPickerProps['alphaType']>('alpha');
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.Basic.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.Basic.Example.tsx
index 17ab36b7e5c39..41eedc9d4d8b5 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.Basic.Example.tsx
@@ -28,7 +28,7 @@ const options: IComboBoxOption[] = [
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const buttonStyles: Partial<IButtonStyles> = { root: { display: 'block', margin: '10px 0 20px' } };
 
-export const ComboBoxBasicExample: React.FunctionComponent = () => {
+export const ComboBoxBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const comboBoxRef = React.useRef<IComboBox>(null);
   const onOpenClick = React.useCallback(() => comboBoxRef.current?.focus(true), []);
 
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.Controlled.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.Controlled.Example.tsx
index 4ac86244aead8..87b920ddd0069 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.Controlled.Example.tsx
@@ -31,7 +31,7 @@ let newKey = 1;
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
 
-export const ComboBoxControlledExample: React.FunctionComponent = () => {
+export const ComboBoxControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKey, setSelectedKey] = React.useState<string | number | undefined>('C');
   // Manually updating the options list is only necessary when allowFreeform is true
   const [options, setOptions] = React.useState(INITIAL_OPTIONS);
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.ControlledMulti.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.ControlledMulti.Example.tsx
index ed8a1ad9b9a80..377c103844391 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.ControlledMulti.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.ControlledMulti.Example.tsx
@@ -31,7 +31,7 @@ let newKey = 1;
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
 
-export const ComboBoxControlledMultiExample: React.FunctionComponent = () => {
+export const ComboBoxControlledMultiExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKeys, setSelectedKeys] = React.useState<string[]>(['C', 'D']);
   // Manually updating the options list is only necessary when allowFreeform is true
   const [options, setOptions] = React.useState(INITIAL_OPTIONS);
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.CustomStyled.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.CustomStyled.Example.tsx
index af8e64257ef3a..a5c16ad262741 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.CustomStyled.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.CustomStyled.Example.tsx
@@ -72,7 +72,7 @@ const onRenderOption = (item: IComboBoxOption) => {
         fontFamily = fontMapping[newFontName] = `"${newFontName}","Segoe UI",Tahoma,Sans-Serif`;
       }
 
-      return <span style={{ fontFamily: fontFamily }}>{item.text}</span>;
+      return <span style={{ fontFamily }}>{item.text}</span>;
   }
 };
 
@@ -80,7 +80,7 @@ const onRenderOption = (item: IComboBoxOption) => {
 const basicStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
 
-export const ComboBoxCustomStyledExample: React.FunctionComponent = () => {
+export const ComboBoxCustomStyledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <ComboBox
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.ErrorHandling.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.ErrorHandling.Example.tsx
index 4ba8eb3116950..0cca8b4833989 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.ErrorHandling.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.ErrorHandling.Example.tsx
@@ -28,7 +28,7 @@ const options: IComboBoxOption[] = [
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
 
-export const ComboBoxErrorHandlingExample: React.FunctionComponent = () => {
+export const ComboBoxErrorHandlingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKey, setSelectedKey] = React.useState<string | undefined>('');
   const onChange: IComboBoxProps['onChange'] = (event, option) => setSelectedKey(option!.key as string);
 
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.FreeInput.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.FreeInput.Example.tsx
index d47f7a7d1dd09..d7aa9ff7acc02 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.FreeInput.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.FreeInput.Example.tsx
@@ -22,7 +22,7 @@ const options: IComboBoxOption[] = [
 // Optional styling to make the example look nicer
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 
-export const ComboBoxFreeInputExample: React.FunctionComponent = () => {
+export const ComboBoxFreeInputExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <ComboBox
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.Inline.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.Inline.Example.tsx
index 8e6ee44d90992..e026fbb9484fa 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.Inline.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.Inline.Example.tsx
@@ -10,7 +10,7 @@ const options: IComboBoxOption[] = [
 // Optional styling to make the example look nicer
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 
-export const ComboBoxInlineExample: React.FunctionComponent = () => {
+export const ComboBoxInlineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <ComboBox
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.SelectAll.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.SelectAll.Example.tsx
index 0171057da820a..43c281c22fd85 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.SelectAll.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.SelectAll.Example.tsx
@@ -26,7 +26,7 @@ const selectableOptions = options.filter(
     (option.itemType === SelectableOptionMenuItemType.Normal || option.itemType === undefined) && !option.disabled,
 );
 
-export const ComboBoxSelectAllExample: React.FunctionComponent = () => {
+export const ComboBoxSelectAllExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKeys, setSelectedKeys] = React.useState<string[]>(['A', 'D']);
   const onChange = (
     event: React.FormEvent<IComboBox>,
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.Toggles.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.Toggles.Example.tsx
index 814a4708c3131..ee77a29054d5d 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.Toggles.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.Toggles.Example.tsx
@@ -29,7 +29,7 @@ const options: IComboBoxOption[] = [
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: 300 } };
 const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
 
-export const ComboBoxTogglesExample: React.FunctionComponent = () => {
+export const ComboBoxTogglesExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [autoComplete, { toggle: toggleAutoComplete }] = useBoolean(false);
   const [allowFreeform, { toggle: toggleAllowFreeform }] = useBoolean(true);
 
diff --git a/packages/react-examples/src/react/ComboBox/ComboBox.Virtualized.Example.tsx b/packages/react-examples/src/react/ComboBox/ComboBox.Virtualized.Example.tsx
index aa7ee7ce98b6e..9a3efb1c9bcae 100644
--- a/packages/react-examples/src/react/ComboBox/ComboBox.Virtualized.Example.tsx
+++ b/packages/react-examples/src/react/ComboBox/ComboBox.Virtualized.Example.tsx
@@ -10,7 +10,7 @@ for (let i = 0; i < 1000; i++) {
 }
 const comboBoxStyles: Partial<IComboBoxStyles> = { root: { maxWidth: '300px' } };
 
-export const ComboBoxVirtualizedExample: React.FunctionComponent = () => {
+export const ComboBoxVirtualizedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <VirtualizedComboBox
       defaultSelectedKey="547"
diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.Basic.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.Basic.Example.tsx
index 703ff6acf61d8..8a613fe239a46 100644
--- a/packages/react-examples/src/react/CommandBar/CommandBar.Basic.Example.tsx
+++ b/packages/react-examples/src/react/CommandBar/CommandBar.Basic.Example.tsx
@@ -7,7 +7,7 @@ import { Checkbox } from '@fluentui/react/lib/Checkbox';
 
 const overflowProps: IButtonProps = { ariaLabel: 'More commands' };
 
-export const CommandBarBasicExample: React.FunctionComponent = () => {
+export const CommandBarBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [enableFocusTrap, setEnableFocusTrap] = React.useState(false);
 
   const onChangeEnableFocusTrap = React.useCallback(
diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.ButtonAs.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.ButtonAs.Example.tsx
index 092e427cb246b..c8c0b215534f4 100644
--- a/packages/react-examples/src/react/CommandBar/CommandBar.ButtonAs.Example.tsx
+++ b/packages/react-examples/src/react/CommandBar/CommandBar.ButtonAs.Example.tsx
@@ -34,7 +34,7 @@ const getCommandBarButtonStyles = memoizeFunction(
 );
 
 // Custom renderer for main command bar items
-const CustomButton: React.FunctionComponent<IButtonProps> = props => {
+const CustomButton: React.FunctionComponent<React.PropsWithChildren<IButtonProps>> = props => {
   const buttonOnMouseClick = () => alert(`${props.text} clicked`);
   // eslint-disable-next-line react/jsx-no-bind
   return <CommandBarButton {...props} onClick={buttonOnMouseClick} styles={getCommandBarButtonStyles(props.styles)} />;
@@ -43,7 +43,7 @@ const CustomButton: React.FunctionComponent<IButtonProps> = props => {
 // Custom renderer for menu items (these must have a separate custom renderer because it's unlikely
 // that the same component could be rendered properly as both a command bar item and menu item).
 // It's also okay to custom render only the command bar items without changing the menu items.
-const CustomMenuItem: React.FunctionComponent<IContextualMenuItemProps> = props => {
+const CustomMenuItem: React.FunctionComponent<React.PropsWithChildren<IContextualMenuItemProps>> = props => {
   // Due to ContextualMenu implementation quirks, passing styles or onClick here doesn't work.
   // The onClick handler must be on the ICommandBarItemProps item instead (_overflowItems in this example).
   return <ContextualMenuItem {...props} />;
@@ -63,7 +63,7 @@ const overflowProps: IButtonProps = {
   },
 };
 
-export const CommandBarButtonAsExample: React.FunctionComponent = () => {
+export const CommandBarButtonAsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <CommandBar
       overflowButtonProps={overflowProps}
diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx
index 263f338b2bd38..e7db720bf13c9 100644
--- a/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx
+++ b/packages/react-examples/src/react/CommandBar/CommandBar.CommandBarButtonAs.Example.tsx
@@ -17,7 +17,9 @@ interface ICoachmarkCommandBarButtonProps extends IComponentAsProps<ICommandBarI
 }
 
 /** Command bar button with a coachmark and teaching bubble */
-const CoachmarkCommandBarButton: React.FunctionComponent<ICoachmarkCommandBarButtonProps> = props => {
+const CoachmarkCommandBarButton: React.FunctionComponent<
+  React.PropsWithChildren<ICoachmarkCommandBarButtonProps>
+> = props => {
   const targetButton = React.useRef<HTMLDivElement | null>(null);
   const { defaultRender, isCoachmarkVisible, onDismiss, ...buttonProps } = props;
   const ButtonComponent = defaultRender || CommandBarButton;
@@ -61,7 +63,7 @@ const overflowButtonProps: IButtonProps = {
 /** Command bar which renders the Share button with a coachmark */
 // eslint-disable-next-line @fluentui/max-len
 const IndividualCommandBarButtonAsExample: React.FunctionComponent<
-  IIndividualCommandBarButtonAsExampleProps
+  React.PropsWithChildren<IIndividualCommandBarButtonAsExampleProps>
 > = props => {
   const { onDismissCoachmark, isCoachmarkVisible } = props;
   const items: ICommandBarItemProps[] = React.useMemo(() => {
@@ -94,7 +96,9 @@ const IndividualCommandBarButtonAsExample: React.FunctionComponent<
   return <CommandBar overflowButtonProps={overflowButtonProps} items={items} />;
 };
 
-export const IndividualCommandBarButtonAsExampleWrapper: React.FunctionComponent = () => {
+export const IndividualCommandBarButtonAsExampleWrapper: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = () => {
   const [isCoachmarkVisible, setIsCoachmarkVisible] = React.useState(true);
 
   const onDismissCoachmark = React.useCallback(() => setIsCoachmarkVisible(false), []);
diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.Lazy.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.Lazy.Example.tsx
index 749ed9fd9453a..8ae8dbbf551a8 100644
--- a/packages/react-examples/src/react/CommandBar/CommandBar.Lazy.Example.tsx
+++ b/packages/react-examples/src/react/CommandBar/CommandBar.Lazy.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { CommandBar, ICommandBarItemProps } from '@fluentui/react/lib/CommandBar';
 import { ContextualMenuItemType } from '@fluentui/react/lib/ContextualMenu';
 
-export const CommandBarLazyExample: React.FunctionComponent = () => {
+export const CommandBarLazyExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [menuItems, setMenuItems] = React.useState<ICommandBarItemProps[] | undefined>(undefined);
 
   const timeoutRef = React.useRef<number | null>();
diff --git a/packages/react-examples/src/react/CommandBar/CommandBar.SplitDisabled.Example.tsx b/packages/react-examples/src/react/CommandBar/CommandBar.SplitDisabled.Example.tsx
index e44fe2a7ef78d..51aab72716a2b 100644
--- a/packages/react-examples/src/react/CommandBar/CommandBar.SplitDisabled.Example.tsx
+++ b/packages/react-examples/src/react/CommandBar/CommandBar.SplitDisabled.Example.tsx
@@ -4,7 +4,7 @@ import { IButtonProps } from '@fluentui/react/lib/Button';
 
 const overflowButtonProps: IButtonProps = { ariaLabel: 'More commands' };
 
-export const CommandBarSplitDisabledExample: React.FunctionComponent = () => {
+export const CommandBarSplitDisabledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <CommandBar items={_items} overflowButtonProps={overflowButtonProps} />
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Basic.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Basic.Example.tsx
index 4557791fe66e4..2ff554e7266b2 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Basic.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ContextualMenu, ContextualMenuItemType, IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';
 
-export const ContextualMenuBasicExample: React.FunctionComponent = () => {
+export const ContextualMenuBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const linkRef = React.useRef(null);
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
   const onShowContextualMenu = React.useCallback((ev: React.MouseEvent<HTMLElement>) => {
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Checkmarks.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Checkmarks.Example.tsx
index 68fbe3649efdd..e617cb45bdf3d 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Checkmarks.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Checkmarks.Example.tsx
@@ -25,7 +25,7 @@ const keys: string[] = [
   'disabledPrimarySplit',
 ];
 
-export const ContextualMenuCheckmarksExample: React.FunctionComponent = () => {
+export const ContextualMenuCheckmarksExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selection, setSelection] = React.useState<{ [key: string]: boolean }>({});
 
   const onToggleSelect = React.useCallback(
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuItem.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuItem.Example.tsx
index 384fe26b8f1f6..d788385fd7467 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuItem.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuItem.Example.tsx
@@ -7,7 +7,7 @@ import {
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuWithCustomMenuItemExample: React.FunctionComponent = () => {
+export const ContextualMenuWithCustomMenuItemExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps: IContextualMenuProps = useConst(() => ({
     shouldFocusOnMount: true,
     contextualMenuItemAs: (props: IContextualMenuItemProps) => <div>Custom rendered {props.item.text}</div>,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuList.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuList.Example.tsx
index a741d95ea8ed6..e6d78c2634326 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuList.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomMenuList.Example.tsx
@@ -7,7 +7,7 @@ import { IContextualMenuListProps, IContextualMenuItem } from '@fluentui/react/l
 import { IRenderFunction } from '@fluentui/react/lib/Utilities';
 import { KeyCodes } from '@fluentui/react';
 
-export const ContextualMenuWithCustomMenuListExample: React.FunctionComponent = () => {
+export const ContextualMenuWithCustomMenuListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [items, setItems] = React.useState(menuItems);
 
   const onAbort = React.useCallback(() => {
@@ -22,7 +22,7 @@ export const ContextualMenuWithCustomMenuListExample: React.FunctionComponent =
     if (!filteredItems || !filteredItems.length) {
       filteredItems.push({
         key: 'no_results',
-        onRender: (item, dismissMenu) => (
+        onRender: (item: IContextualMenuItem) => (
           <div key="no_results" style={filteredItemsStyle}>
             <Icon iconName="SearchIssue" title="No actions found" />
             <span>No actions found</span>
@@ -34,13 +34,13 @@ export const ContextualMenuWithCustomMenuListExample: React.FunctionComponent =
     setItems(filteredItems);
   }, []);
 
-  const onKeyDown = React.useCallback((e, ...args) => {
+  const onKeyDown = React.useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
     /* Key Up, but we are not at the beginning of the text: stop event propagation to prevent ContextualMenu to focus */
-    if (e.target.selectionStart > 0 && e.which === KeyCodes.up) {
+    if (e.currentTarget.selectionStart! > 0 && e.which === KeyCodes.up) {
       e.stopPropagation();
     }
     /* Key Down, but we are not at the end of the text: stop event propagation to prevent ContextualMenu to focus */
-    if (e.target.selectionStart !== e.target.value.length && e.which === KeyCodes.down) {
+    if (e.currentTarget.selectionStart !== e.currentTarget.value.length && e.which === KeyCodes.down) {
       e.stopPropagation();
     }
   }, []);
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Customization.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Customization.Example.tsx
index f78a0064207ec..ce76a4e0585ed 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Customization.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Customization.Example.tsx
@@ -11,7 +11,7 @@ import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { css } from '@fluentui/react/lib/Utilities';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuCustomizationExample: React.FunctionComponent = () => {
+export const ContextualMenuCustomizationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     directionalHint: DirectionalHint.bottomLeftEdge,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomizationWithNoWrap.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomizationWithNoWrap.Example.tsx
index b07ca2efb4362..1e6a91bbc1cbd 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomizationWithNoWrap.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.CustomizationWithNoWrap.Example.tsx
@@ -6,7 +6,7 @@ import { mergeStyleSets } from '@fluentui/react/lib/Styling';
 import { css } from '@fluentui/react/lib/Utilities';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuCustomizationWithNoWrapExample: React.FunctionComponent = () => {
+export const ContextualMenuCustomizationWithNoWrapExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     directionalHint: DirectionalHint.bottomLeftEdge,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Default.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Default.Example.tsx
index 6e9569538f292..a47e9e2567498 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Default.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Default.Example.tsx
@@ -3,7 +3,7 @@ import { ContextualMenuItemType, IContextualMenuProps } from '@fluentui/react/li
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuDefaultExample: React.FunctionComponent = () => {
+export const ContextualMenuDefaultExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     items: [
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Directional.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Directional.Example.tsx
index 722894ebf232f..b0943f10a2f93 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Directional.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Directional.Example.tsx
@@ -12,7 +12,7 @@ import { getRTL } from '@fluentui/react/lib/Utilities';
 import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const ContextualMenuDirectionalExample: React.FunctionComponent = () => {
+export const ContextualMenuDirectionalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isBeakVisible, { toggle: toggleIsBeakVisible }] = useBoolean(false);
   const [useDirectionalHintForRTL, { toggle: toggleUseDirectionalHintForRTL }] = useBoolean(false);
   const [directionalHint, setDirectionalHint] = React.useState<DirectionalHint>(DirectionalHint.bottomLeftEdge);
@@ -36,8 +36,8 @@ export const ContextualMenuDirectionalExample: React.FunctionComponent = () => {
 
   const menuProps: IContextualMenuProps = React.useMemo(
     () => ({
-      isBeakVisible: isBeakVisible,
-      directionalHint: directionalHint,
+      isBeakVisible,
+      directionalHint,
       directionalHintForRTL: useDirectionalHintForRTL ? directionalHintForRTL : undefined,
       gapSpace: 0,
       beakWidth: 20,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Header.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Header.Example.tsx
index 9395b5b32e0cc..420369e327778 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Header.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Header.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton } from '@fluentui/react/lib/Button';
 import { ContextualMenuItemType, IContextualMenuProps } from '@fluentui/react/lib/ContextualMenu';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuHeaderExample: React.FunctionComponent = () => {
+export const ContextualMenuHeaderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     items: [
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.CustomLayout.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.CustomLayout.Example.tsx
index 581cfc8d8ca5e..9856735583b7e 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.CustomLayout.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.CustomLayout.Example.tsx
@@ -7,7 +7,7 @@ import {
 } from '@fluentui/react/lib/ContextualMenu';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuIconCustomLayoutExample: React.FunctionComponent = () => {
+export const ContextualMenuIconCustomLayoutExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     styles: {
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.Example.tsx
index be77298d3846d..95fca4d44cf7d 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.Example.tsx
@@ -10,7 +10,7 @@ import {
 import { Icon } from '@fluentui/react/lib/Icon';
 import { mergeStyleSets, getTheme } from '@fluentui/react/lib/Styling';
 
-export const ContextualMenuIconExample: React.FunctionComponent = () => {
+export const ContextualMenuIconExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showCallout, { setTrue: onShowCallout, setFalse: onHideCallout }] = useBoolean(false);
 
   const menuProps: IContextualMenuProps = useConst({
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.SecondaryText.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.SecondaryText.Example.tsx
index 3dd39e2dd25bc..8dd08d98f17b2 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.SecondaryText.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Icon.SecondaryText.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton } from '@fluentui/react/lib/Button';
 import { IContextualMenuProps } from '@fluentui/react/lib/ContextualMenu';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuIconSecondaryTextExample: React.FunctionComponent = () => {
+export const ContextualMenuIconSecondaryTextExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     items: [
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Persisted.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Persisted.Example.tsx
index b2661d1bc9df7..39d67f4fd86b1 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Persisted.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Persisted.Example.tsx
@@ -3,7 +3,7 @@ import { IContextualMenuProps } from '@fluentui/react/lib/ContextualMenu';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuPersistedExample: React.FunctionComponent = () => {
+export const ContextualMenuPersistedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     shouldFocusOnMount: true,
     shouldFocusOnContainer: true,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScreenReader.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScreenReader.Example.tsx
index 23a690f1bed2f..8b216aa3bafed 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScreenReader.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScreenReader.Example.tsx
@@ -3,7 +3,7 @@ import { IContextualMenuItem, IContextualMenuProps } from '@fluentui/react/lib/C
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuScreenReaderExample: React.FunctionComponent = () => {
+export const ContextualMenuScreenReaderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuItems: IContextualMenuItem[] = [
     {
       key: 'newItem',
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScrollBar.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScrollBar.Example.tsx
index ca0f9f9c3b70c..fddba14542ee6 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScrollBar.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.ScrollBar.Example.tsx
@@ -3,7 +3,7 @@ import { DirectionalHint } from '@fluentui/react/lib/ContextualMenu';
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuWithScrollBarExample: React.FunctionComponent = () => {
+export const ContextualMenuWithScrollBarExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst(() => ({
     shouldFocusOnMount: true,
     directionalHint: DirectionalHint.bottomRightEdge,
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Section.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Section.Example.tsx
index 15dc21b784184..60cd6ae45c2ef 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Section.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Section.Example.tsx
@@ -3,7 +3,7 @@ import { ContextualMenuItemType, IContextualMenuProps } from '@fluentui/react/li
 import { DefaultButton } from '@fluentui/react/lib/Button';
 import { useConst } from '@fluentui/react-hooks';
 
-export const ContextualMenuSectionExample: React.FunctionComponent = () => {
+export const ContextualMenuSectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps = useConst<IContextualMenuProps>(() => ({
     items: [
       {
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Submenu.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Submenu.Example.tsx
index e331dab16deed..dc2e7502235fc 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Submenu.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.Submenu.Example.tsx
@@ -15,7 +15,7 @@ export interface IContextualMenuSubmenuExampleState {
   hoverDelay: number;
 }
 
-export const ContextualMenuSubmenuExample: React.FunctionComponent = () => {
+export const ContextualMenuSubmenuExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hoverDelay, setHoverDelay] = React.useState(250);
 
   const onHoverDelayChanged = React.useCallback(
diff --git a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx
index 3800766238c6c..56e85511bf5be 100644
--- a/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx
+++ b/packages/react-examples/src/react/ContextualMenu/ContextualMenu.WrappingMenuItem.Example.tsx
@@ -30,7 +30,7 @@ const menuStyles: Partial<IContextualMenuStyles> = {
   },
 };
 
-export const ContextualMenuWithWrappingMenuItemExample: React.FunctionComponent = () => {
+export const ContextualMenuWithWrappingMenuItemExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const menuProps: IContextualMenuProps = useConst(() => ({
     shouldFocusOnMount: true,
     styles: menuStyles,
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Basic.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Basic.Example.tsx
index 33f3af7c0b0d8..40f9700c77e0f 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Basic.Example.tsx
@@ -19,7 +19,7 @@ const days: IDropdownOption[] = [
 ];
 const rootClass = mergeStyles({ maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } });
 
-export const DatePickerBasicExample: React.FunctionComponent = () => {
+export const DatePickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday);
 
   const onDropdownChange = React.useCallback((event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) => {
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Bounded.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Bounded.Example.tsx
index f29ae2ee848e4..83602df444df2 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Bounded.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Bounded.Example.tsx
@@ -11,7 +11,7 @@ import { useConst } from '@fluentui/react-hooks';
 
 const datePickerStyles: Partial<IDatePickerStyles> = { root: { maxWidth: 300, marginTop: 15 } };
 
-export const DatePickerBoundedExample: React.FunctionComponent = () => {
+export const DatePickerBoundedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const today = useConst(new Date(Date.now()));
   const minDate = useConst(addMonths(today, -1));
   const maxDate = useConst(addYears(today, 1));
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Disabled.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Disabled.Example.tsx
index 7ba15e576eb2e..1c190a0b628f4 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Disabled.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Disabled.Example.tsx
@@ -3,7 +3,7 @@ import { DatePicker, mergeStyles, defaultDatePickerStrings } from '@fluentui/rea
 
 const rootClass = mergeStyles({ maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } });
 
-export const DatePickerDisabledExample: React.FunctionComponent = () => {
+export const DatePickerDisabledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={rootClass}>
       <DatePicker
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Format.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Format.Example.tsx
index bff966376cdd9..03ea422dc83f1 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Format.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Format.Example.tsx
@@ -10,7 +10,7 @@ const onFormatDate = (date?: Date): string => {
   return !date ? '' : date.getDate() + '/' + (date.getMonth() + 1) + '/' + (date.getFullYear() % 100);
 };
 
-export const DatePickerFormatExample: React.FunctionComponent = () => {
+export const DatePickerFormatExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [value, setValue] = React.useState<Date | undefined>();
   const datePickerRef = React.useRef<IDatePicker>(null);
 
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Input.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Input.Example.tsx
index f4ef54c8eadfb..cef14fe97cc7b 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Input.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Input.Example.tsx
@@ -6,7 +6,7 @@ const styles = mergeStyleSets({
   control: { maxWidth: 300, marginBottom: 15 },
 });
 
-export const DatePickerInputExample: React.FunctionComponent = () => {
+export const DatePickerInputExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [value, setValue] = React.useState<Date | undefined>();
   const datePickerRef = React.useRef<IDatePicker>(null);
 
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.Required.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.Required.Example.tsx
index 9a16b9db25c79..75c3aa41ab484 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.Required.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.Required.Example.tsx
@@ -6,7 +6,7 @@ const styles = mergeStyleSets({
   control: { maxWidth: 300, marginBottom: 15 },
 });
 
-export const DatePickerRequiredExample: React.FunctionComponent = () => {
+export const DatePickerRequiredExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={styles.root}>
       <div>Validation will happen when the DatePicker loses focus.</div>
diff --git a/packages/react-examples/src/react/DatePicker/DatePicker.WeekNumbers.Example.tsx b/packages/react-examples/src/react/DatePicker/DatePicker.WeekNumbers.Example.tsx
index f75652e79d900..ab48a9ddeb546 100644
--- a/packages/react-examples/src/react/DatePicker/DatePicker.WeekNumbers.Example.tsx
+++ b/packages/react-examples/src/react/DatePicker/DatePicker.WeekNumbers.Example.tsx
@@ -19,7 +19,7 @@ const days: IDropdownOption[] = [
 ];
 const rootClass = mergeStyles({ maxWidth: 300, selectors: { '> *': { marginBottom: 15 } } });
 
-export const DatePickerWeekNumbersExample: React.FunctionComponent = () => {
+export const DatePickerWeekNumbersExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [firstDayOfWeek, setFirstDayOfWeek] = React.useState(DayOfWeek.Sunday);
 
   const onDropdownChange = React.useCallback((event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) => {
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.ColumnResize.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.ColumnResize.Example.tsx
index 2c1ac9b28f475..29d160a32e96a 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.ColumnResize.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.ColumnResize.Example.tsx
@@ -24,7 +24,7 @@ function createTableData(rows: number, columns: number) {
   return data;
 }
 
-export const DetailsListColumnResizeExample: React.FC<{}> = (props: {}): JSX.Element => {
+export const DetailsListColumnResizeExample: React.FC<React.PropsWithChildren<{}>> = (props: {}): JSX.Element => {
   const [rows, setRowCount] = React.useState<number>(1);
   const [columns, setColumns] = React.useState<number>(4);
 
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Example.tsx
index cdb1ff0dd78af..930ff9d301b1f 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Example.tsx
@@ -51,7 +51,7 @@ const onRenderDetailsHeader = (props: IDetailsHeaderProps, _defaultRender?: IRen
 };
 
 // export class DetailsListGroupedV2Example extends React.Component<{}, IDetailsListGroupedExampleState> {
-export const DetailsListGroupedV2Example: React.FC = () => {
+export const DetailsListGroupedV2Example: React.FC<React.PropsWithChildren<unknown>> = () => {
   const root = React.useRef<IDetailsList>(null);
   const [columns] = React.useState<IColumn[]>([
     { key: 'name', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Large.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Large.Example.tsx
index 1bed1b0ba5d40..3257cd620dac6 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Large.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.Large.Example.tsx
@@ -40,7 +40,7 @@ const onRenderDetailsHeader = (props: IDetailsHeaderProps) => {
   return <DetailsHeader {...props} ariaLabelForToggleAllGroupsButton={'Expand collapse groups'} />;
 };
 
-export const DetailsListGroupedV2LargeExample: React.FC = () => {
+export const DetailsListGroupedV2LargeExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [items] = React.useState<IDetailsListGroupedLargeExampleItem[]>(() => getInitialItems());
   const [groups] = React.useState<IGroup[]>(() => getInitialGroups());
   const [columns] = React.useState<IColumn[]>([
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx
index ffdb46d9932ef..793f1700e106a 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.GroupedV2.ScrollToIndex.Example.tsx
@@ -187,7 +187,7 @@ const measureGroup = (group: IGroup): number => {
   return rowHeaderHeight;
 };
 
-export const DetailsListGroupedV2ScrollToIndexExample: React.FC = () => {
+export const DetailsListGroupedV2ScrollToIndexExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const root = React.useRef<IDetailsList>(null);
 
   const [selectedIndex, setSelectedIndex] = React.useState(0);
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx
index dc5503eeaef2c..1f5df21f18f53 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.KeyboardAccessibleResizeAndReorder.Example.tsx
@@ -47,7 +47,7 @@ function copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: bool
   return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
 }
 
-export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.FunctionComponent = () => {
+export const DetailsListKeyboardAccessibleResizeAndReorderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const handleColumnReorder = (draggedIndex: number, targetIndex: number) => {
     const draggedItems = columns[draggedIndex];
     const newColumns: IColumn[] = [...columns];
diff --git a/packages/react-examples/src/react/DetailsList/DetailsList.OnRender.Example.tsx b/packages/react-examples/src/react/DetailsList/DetailsList.OnRender.Example.tsx
index 17d77a0a5bb6e..29b8d02ccdcd2 100644
--- a/packages/react-examples/src/react/DetailsList/DetailsList.OnRender.Example.tsx
+++ b/packages/react-examples/src/react/DetailsList/DetailsList.OnRender.Example.tsx
@@ -3,7 +3,7 @@ import { createListItems } from '@fluentui/example-data';
 import { DetailsList, buildColumns, IColumn, IDetailsColumnFieldProps } from '@fluentui/react/lib/DetailsList';
 import { IRenderFunction } from '@fluentui/utilities';
 
-export const DetailsListOnRenderExample: React.FC<{}> = (props: {}): JSX.Element => {
+export const DetailsListOnRenderExample: React.FC<React.PropsWithChildren<{}>> = (props: {}): JSX.Element => {
   const [items] = React.useState(() => {
     return createListItems(500);
   });
diff --git a/packages/react-examples/src/react/Dialog/Dialog.Basic.Example.tsx b/packages/react-examples/src/react/Dialog/Dialog.Basic.Example.tsx
index 23fe06beb37ae..d9737bb5e2319 100644
--- a/packages/react-examples/src/react/Dialog/Dialog.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Dialog/Dialog.Basic.Example.tsx
@@ -21,7 +21,7 @@ const dialogContentProps = {
   subText: 'Do you want to send this message without a subject?',
 };
 
-export const DialogBasicExample: React.FunctionComponent = () => {
+export const DialogBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
   const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false);
   const labelId: string = useId('dialogLabel');
diff --git a/packages/react-examples/src/react/Dialog/Dialog.Blocking.Example.tsx b/packages/react-examples/src/react/Dialog/Dialog.Blocking.Example.tsx
index c215c51453ba5..325ba28fade40 100644
--- a/packages/react-examples/src/react/Dialog/Dialog.Blocking.Example.tsx
+++ b/packages/react-examples/src/react/Dialog/Dialog.Blocking.Example.tsx
@@ -17,7 +17,7 @@ const dialogContentProps = {
   subText: 'Do you want to send this message without a subject?',
 };
 
-export const DialogBlockingExample: React.FunctionComponent = () => {
+export const DialogBlockingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
   const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false);
   const modalProps = React.useMemo(
diff --git a/packages/react-examples/src/react/Dialog/Dialog.LargeHeader.Example.tsx b/packages/react-examples/src/react/Dialog/Dialog.LargeHeader.Example.tsx
index 33f343914c325..58e90a9646f67 100644
--- a/packages/react-examples/src/react/Dialog/Dialog.LargeHeader.Example.tsx
+++ b/packages/react-examples/src/react/Dialog/Dialog.LargeHeader.Example.tsx
@@ -19,7 +19,7 @@ const dialogContentProps = {
   subText: 'Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.',
 };
 
-export const DialogLargeHeaderExample: React.FunctionComponent = () => {
+export const DialogLargeHeaderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
 
   return (
diff --git a/packages/react-examples/src/react/Dialog/Dialog.Modeless.Example.tsx b/packages/react-examples/src/react/Dialog/Dialog.Modeless.Example.tsx
index eb33446fa5b87..270d2169674fe 100644
--- a/packages/react-examples/src/react/Dialog/Dialog.Modeless.Example.tsx
+++ b/packages/react-examples/src/react/Dialog/Dialog.Modeless.Example.tsx
@@ -17,7 +17,7 @@ const dialogContentProps = {
   subText: 'Do you want to send this message without a subject?',
 };
 
-export const DialogModelessExample: React.FunctionComponent = () => {
+export const DialogModelessExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
   const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false);
   const modalProps = React.useMemo(
diff --git a/packages/react-examples/src/react/Dialog/Dialog.TopOffsetFixed.Example.tsx b/packages/react-examples/src/react/Dialog/Dialog.TopOffsetFixed.Example.tsx
index 8669be48e6bcb..106ad175213a0 100644
--- a/packages/react-examples/src/react/Dialog/Dialog.TopOffsetFixed.Example.tsx
+++ b/packages/react-examples/src/react/Dialog/Dialog.TopOffsetFixed.Example.tsx
@@ -27,7 +27,7 @@ const options = [
   },
 ];
 
-export const DialogTopOffsetFixedExample: React.FunctionComponent = () => {
+export const DialogTopOffsetFixedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
   const [optionSelected, setOptionSelected] = React.useState('A');
 
diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Basic.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Basic.Example.tsx
index 267be8f7a69d6..74c7cada3e236 100644
--- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Basic.Example.tsx
+++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Basic.Example.tsx
@@ -27,7 +27,7 @@ const previewProps: IDocumentCardPreviewProps = {
 };
 const DocumentCardActivityPeople = [{ name: 'Annie Lindqvist', profileImageSrc: TestImages.personaFemale }];
 
-export const DocumentCardBasicExample: React.FunctionComponent = () => (
+export const DocumentCardBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <DocumentCard
     aria-label="Default Document Card with large file name. Created by Annie Lindqvist a few minutes ago."
     onClickHref="http://bing.com"
diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Compact.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Compact.Example.tsx
index df2575a3d425f..8912b9fad6ba5 100644
--- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Compact.Example.tsx
+++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Compact.Example.tsx
@@ -104,7 +104,7 @@ const previewOutlookUsingIcon: IDocumentCardPreviewProps = {
   },
 };
 
-export const DocumentCardCompactExample: React.FunctionComponent = () => {
+export const DocumentCardCompactExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <DocumentCard
diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx
index 5e760a9b7c6fa..67eeada841556 100644
--- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx
+++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Complete.Example.tsx
@@ -113,7 +113,7 @@ const documentCardActions = [
   },
 ];
 
-export const DocumentCardCompleteExample: React.FunctionComponent = () => (
+export const DocumentCardCompleteExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <DocumentCard
     aria-label="Document Card with multiple items, commands and views. Marketing documents. 6 files were uploaded.
 Created by Annie Lindqvist in February 23, 2016. 432 views."
diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Conversation.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Conversation.Example.tsx
index 70981b4e48e48..7177cc96429a1 100644
--- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Conversation.Example.tsx
+++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Conversation.Example.tsx
@@ -25,7 +25,7 @@ const people: IDocumentCardActivityPerson[] = [
   { name: 'Kat Larrson', profileImageSrc: TestImages.personaFemale },
 ];
 
-export const DocumentCardConversationExample: React.FunctionComponent = () => {
+export const DocumentCardConversationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const logoProps: IDocumentCardLogoProps = {
     logoIcon: 'OutlookLogo',
   };
diff --git a/packages/react-examples/src/react/DocumentCard/DocumentCard.Image.Example.tsx b/packages/react-examples/src/react/DocumentCard/DocumentCard.Image.Example.tsx
index 83a0dc5001f77..c52f9240c5847 100644
--- a/packages/react-examples/src/react/DocumentCard/DocumentCard.Image.Example.tsx
+++ b/packages/react-examples/src/react/DocumentCard/DocumentCard.Image.Example.tsx
@@ -24,7 +24,7 @@ const oneNoteIconProps: IIconProps = {
   styles: { root: { color: '#813a7c', fontSize: '120px', width: '120px', height: '120px' } },
 };
 
-export const DocumentCardImageExample: React.FunctionComponent = () => {
+export const DocumentCardImageExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const cardStyles: IDocumentCardStyles = {
     root: { display: 'inline-block', marginRight: 20, marginBottom: 20, width: 320 },
   };
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Basic.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Basic.Example.tsx
index 19d736f16283b..4daa20456436d 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Basic.Example.tsx
@@ -21,7 +21,7 @@ const options: IDropdownOption[] = [
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 
-export const DropdownBasicExample: React.FunctionComponent = () => {
+export const DropdownBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Dropdown
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Controlled.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Controlled.Example.tsx
index bcf87c1a54dce..e30072f49bcd5 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Controlled.Example.tsx
@@ -16,7 +16,7 @@ const dropdownControlledExampleOptions = [
   { key: 'lettuce', text: 'Lettuce' },
 ];
 
-export const DropdownControlledExample: React.FunctionComponent = () => {
+export const DropdownControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedItem, setSelectedItem] = React.useState<IDropdownOption>();
 
   const onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.ControlledMulti.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.ControlledMulti.Example.tsx
index 727ac05102481..90725f70887f9 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.ControlledMulti.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.ControlledMulti.Example.tsx
@@ -17,7 +17,7 @@ const DropdownControlledMultiExampleOptions = [
   { key: 'lettuce', text: 'Lettuce' },
 ];
 
-export const DropdownControlledMultiExample: React.FunctionComponent = () => {
+export const DropdownControlledMultiExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectedKeys, setSelectedKeys] = React.useState<string[]>([]);
 
   const onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Custom.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Custom.Example.tsx
index c7afb1393ea3b..ebdfb5e9abc75 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Custom.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Custom.Example.tsx
@@ -77,7 +77,7 @@ const onRenderPlaceholder = (props: IDropdownProps): JSX.Element => {
 
 const dropdownStyles = { dropdown: { width: 300 } };
 
-export const DropdownCustomExample: React.FunctionComponent = () => (
+export const DropdownCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <Stack tokens={stackTokens}>
     <Dropdown
       placeholder="Select an option"
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Error.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Error.Example.tsx
index ad4a6ea828cf8..e883c3debecd4 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Error.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Error.Example.tsx
@@ -16,7 +16,7 @@ const DropdownErrorExampleOptions = [
   { key: 'E', text: 'Option e' },
 ];
 
-export const DropdownErrorExample: React.FunctionComponent = () => {
+export const DropdownErrorExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showError, { toggle: toggleShowError }] = useBoolean(false);
   return (
     <Stack horizontal tokens={stackTokens} verticalAlign="start">
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Required.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Required.Example.tsx
index da900bf6cf134..b933fbdaaca50 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Required.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Required.Example.tsx
@@ -5,7 +5,7 @@ import { IStackTokens, Stack } from '@fluentui/react/lib/Stack';
 
 const dropdownStyles = { dropdown: { width: 300 } };
 
-export const DropdownRequiredExample: React.FunctionComponent = () => {
+export const DropdownRequiredExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const dropdownRef = React.createRef<IDropdown>();
   const onSetFocus = () => dropdownRef.current!.focus(true);
 
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.SelectStyle.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.SelectStyle.Example.tsx
index 46463477ba5a6..cd8a58b7de5fe 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.SelectStyle.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.SelectStyle.Example.tsx
@@ -34,7 +34,7 @@ const options: IDropdownOption[] = [
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 
-export const DropdownSelectStyleExample: React.FunctionComponent = () => {
+export const DropdownSelectStyleExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Dropdown placeholder="Select an option" label="Favorite Fruit" options={options} styles={dropdownStyles} />
diff --git a/packages/react-examples/src/react/Dropdown/Dropdown.Wrapping.Example.tsx b/packages/react-examples/src/react/Dropdown/Dropdown.Wrapping.Example.tsx
index c6eb8ec63ae0e..285311528b3ab 100644
--- a/packages/react-examples/src/react/Dropdown/Dropdown.Wrapping.Example.tsx
+++ b/packages/react-examples/src/react/Dropdown/Dropdown.Wrapping.Example.tsx
@@ -34,7 +34,7 @@ const options: IDropdownOption[] = [
 
 const stackTokens: IStackTokens = { childrenGap: 20 };
 
-export const DropdownWrappingExample: React.FunctionComponent = () => {
+export const DropdownWrappingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Dropdown
diff --git a/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Basic.Example.tsx b/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Basic.Example.tsx
index b4b7da07ddcf3..8b919d3eee791 100644
--- a/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ExtendedPeoplePicker/ExtendedPeoplePicker.Basic.Example.tsx
@@ -34,7 +34,7 @@ const focusZoneProps = {
   handleTabKey: FocusZoneTabbableElements.all,
 };
 
-export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
+export const ExtendedPeoplePickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const picker = React.useRef<ExtendedPeoplePicker>(null);
   const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(people);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
@@ -180,11 +180,11 @@ export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
     getTextFromItem: (persona: IPersonaProps) => persona.text || '',
     pickerSuggestionsProps: suggestionProps,
     key: 'normal',
-    onRemoveSuggestion: onRemoveSuggestion,
+    onRemoveSuggestion,
     onValidateInput: validateInput,
     onZeroQuerySuggestion: returnMostRecentlyUsed,
     showForceResolve: shouldShowForceResolve,
-    onInputChanged: onInputChanged,
+    onInputChanged,
     onSuggestionsHidden: () => {
       console.log('FloatingPicker: hidden');
     },
@@ -194,14 +194,14 @@ export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
   };
 
   const selectedItemsListProps = {
-    onCopyItems: onCopyItems,
+    onCopyItems,
     onExpandGroup: onExpandItem,
     removeMenuItemText: 'Remove',
     copyMenuItemText: 'Copy name',
     editMenuItemText: 'Edit',
-    getEditingItemText: getEditingItemText,
+    getEditingItemText,
     onRenderFloatingPicker: FloatingPeoplePicker,
-    floatingPickerProps: floatingPickerProps,
+    floatingPickerProps,
   };
 
   return (
diff --git a/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Basic.Example.tsx b/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Basic.Example.tsx
index c80b46dbfec6f..f2a2fd8fb7ea4 100644
--- a/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ExtendedPicker/ExtendedPeoplePicker.Basic.Example.tsx
@@ -34,7 +34,7 @@ const focusZoneProps = {
   handleTabKey: FocusZoneTabbableElements.all,
 };
 
-export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
+export const ExtendedPeoplePickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const picker = React.useRef<ExtendedPeoplePicker>(null);
   const [peopleList, setPeopleList] = React.useState<IPersonaProps[]>(people);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
@@ -180,11 +180,11 @@ export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
     getTextFromItem: (persona: IPersonaProps) => persona.text || '',
     pickerSuggestionsProps: suggestionProps,
     key: 'normal',
-    onRemoveSuggestion: onRemoveSuggestion,
+    onRemoveSuggestion,
     onValidateInput: validateInput,
     onZeroQuerySuggestion: returnMostRecentlyUsed,
     showForceResolve: shouldShowForceResolve,
-    onInputChanged: onInputChanged,
+    onInputChanged,
     onSuggestionsHidden: () => {
       console.log('FLOATINGPICKER: hidden');
     },
@@ -194,14 +194,14 @@ export const ExtendedPeoplePickerBasicExample: React.FunctionComponent = () => {
   };
 
   const selectedItemsListProps = {
-    onCopyItems: onCopyItems,
+    onCopyItems,
     onExpandGroup: onExpandItem,
     removeMenuItemText: 'Remove',
     copyMenuItemText: 'Copy name',
     editMenuItemText: 'Edit',
-    getEditingItemText: getEditingItemText,
+    getEditingItemText,
     onRenderFloatingPicker: FloatingPeoplePicker,
-    floatingPickerProps: floatingPickerProps,
+    floatingPickerProps,
   };
 
   return (
diff --git a/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx b/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx
index 7a036c0363aff..02cf3b2705858 100644
--- a/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx
+++ b/packages/react-examples/src/react/Facepile/Facepile.AddFace.Example.tsx
@@ -8,7 +8,7 @@ const overflowButtonProps = {
   onClick: (ev: React.MouseEvent<HTMLButtonElement>) => alert('overflow icon clicked'),
 };
 
-export const FacepileAddFaceExample: React.FunctionComponent = () => {
+export const FacepileAddFaceExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [numberOfFaces, setNumberOfFaces] = React.useState(0);
 
   const personas = React.useMemo(() => facepilePersonas.slice(0, numberOfFaces), [numberOfFaces]);
diff --git a/packages/react-examples/src/react/Facepile/Facepile.Basic.Example.tsx b/packages/react-examples/src/react/Facepile/Facepile.Basic.Example.tsx
index cd990614e8658..0dbc203ae3734 100644
--- a/packages/react-examples/src/react/Facepile/Facepile.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Facepile/Facepile.Basic.Example.tsx
@@ -48,7 +48,7 @@ const getPersonaPresence = (personaName: string): PersonaPresence => {
   return presences[personaName.charCodeAt(1) % 5];
 };
 
-export const FacepileBasicExample: React.FunctionComponent = () => {
+export const FacepileBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [imagesFadeIn, { toggle: toggleImagesFadeIn }] = useBoolean(true);
   const [numberOfFaces, setNumberOfFaces] = React.useState(3);
   const [personaSize, setPersonaSize] = React.useState(PersonaSize.size32);
diff --git a/packages/react-examples/src/react/Facepile/Facepile.Overflow.Example.tsx b/packages/react-examples/src/react/Facepile/Facepile.Overflow.Example.tsx
index 14ab4e3f2a206..e4670c40971ae 100644
--- a/packages/react-examples/src/react/Facepile/Facepile.Overflow.Example.tsx
+++ b/packages/react-examples/src/react/Facepile/Facepile.Overflow.Example.tsx
@@ -27,7 +27,7 @@ const dropdownOptions = [
   { key: OverflowButtonType.more, text: OverflowButtonType[OverflowButtonType.more] },
 ];
 
-export const FacepileOverflowExample: React.FunctionComponent = () => {
+export const FacepileOverflowExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [displayedPersonas, setDisplayedPersonas] = React.useState(5);
   const [overflowButtonType, setOverflowButtonType] = React.useState(OverflowButtonType.none);
 
diff --git a/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.Basic.Example.tsx b/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.Basic.Example.tsx
index 5a918602684c4..9b9ef66cafb4e 100644
--- a/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.Basic.Example.tsx
@@ -28,7 +28,7 @@ const startsWith = (text: string, filterText: string): boolean => {
   return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
 };
 
-export const FloatingPeoplePickerTypesExample: React.FunctionComponent = () => {
+export const FloatingPeoplePickerTypesExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const inputElementRef = React.useRef<HTMLInputElement>(null);
   const suggestionsStore = useConst(() => new SuggestionsStore<IPersonaProps>());
   const [peopleList, setPeopleList] = React.useState(people);
diff --git a/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.SelectableFooter.Example.tsx b/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.SelectableFooter.Example.tsx
index db0bdca8119ce..9d58f1f545cf8 100644
--- a/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.SelectableFooter.Example.tsx
+++ b/packages/react-examples/src/react/FloatingPeoplePicker/FloatingPeoplePicker.SelectableFooter.Example.tsx
@@ -28,7 +28,7 @@ const startsWith = (text: string, filterText: string): boolean => {
   return text.toLowerCase().indexOf(filterText.toLowerCase()) === 0;
 };
 
-export const FloatingPeoplePickerTypesSelectableFooterExample: React.FunctionComponent = () => {
+export const FloatingPeoplePickerTypesSelectableFooterExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const inputElementRef = React.useRef<HTMLInputElement>(null);
   const suggestionsStore = useConst(() => new SuggestionsStore<IPersonaProps>());
   const [peopleList, setPeopleList] = React.useState(people);
diff --git a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Click.Example.tsx b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Click.Example.tsx
index fd6291899dbe6..4b86bdd522135 100644
--- a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Click.Example.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Click.Example.tsx
@@ -15,7 +15,7 @@ const getStackStyles = memoizeFunction(
 const textFieldStyles: Partial<ITextFieldStyles> = { root: { width: 300 } };
 const stackTokens = { childrenGap: 15 };
 
-export const FocusTrapZoneBoxClickExample: React.FunctionComponent = () => {
+export const FocusTrapZoneBoxClickExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [useTrapZone, { toggle: toggleUseTrapZone }] = useBoolean(false);
   const toggle = React.useRef<IToggle>(null);
   return (
diff --git a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Example.tsx b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Example.tsx
index f1ce87d357e6e..e3e79d25218df 100644
--- a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Example.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Box.Example.tsx
@@ -18,7 +18,7 @@ const getStackStyles = memoizeFunction(
 const textFieldStyles: Partial<ITextFieldStyles> = { root: { width: 300 } };
 const stackTokens = { childrenGap: 8 };
 
-export const FocusTrapZoneBoxExample: React.FunctionComponent = () => {
+export const FocusTrapZoneBoxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const toggle = React.useRef<IToggle>(null);
   const [useTrapZone, { toggle: toggleUseTrapZone }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.DialogInPanel.Example.tsx b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.DialogInPanel.Example.tsx
index 97fe30d828427..0be8c2441e31c 100644
--- a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.DialogInPanel.Example.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.DialogInPanel.Example.tsx
@@ -17,7 +17,7 @@ const modelProps = {
   styles: { main: { maxWidth: 450 } },
 };
 
-export const FocusTrapZoneDialogInPanelExample: React.FunctionComponent = () => {
+export const FocusTrapZoneDialogInPanelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showPanel, { toggle: toggleShowPanel }] = useBoolean(false);
   const [hideDialog, { toggle: toggleHideDialog }] = useBoolean(true);
   return (
diff --git a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.FocusZone.Example.tsx b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.FocusZone.Example.tsx
index 0e3fb627ed0d5..4b1e247cf307e 100644
--- a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.FocusZone.Example.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.FocusZone.Example.tsx
@@ -20,7 +20,7 @@ const focusZoneStackStyles: Partial<IStackStyles> = {
   },
 };
 
-export const FocusTrapZoneFocusZoneExample: React.FunctionComponent = () => {
+export const FocusTrapZoneFocusZoneExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [useTrapZone, { toggle: toggleUseTrapZone }] = useBoolean(false);
   const toggle = React.useRef<IToggle>(null);
   return (
diff --git a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Nested.Example.tsx b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Nested.Example.tsx
index c76c3cd968eeb..7a938dc937b47 100644
--- a/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Nested.Example.tsx
+++ b/packages/react-examples/src/react/FocusTrapZone/FocusTrapZone.Nested.Example.tsx
@@ -15,7 +15,9 @@ const getStackStyles = memoizeFunction(
 
 const stackTokens = { childrenGap: 10 };
 const fixedWidthToggleStyles: Partial<IToggleStyles> = { root: { width: 200 } };
-const FocusTrapComponent: React.FunctionComponent<React.PropsWithChildren<{ zoneNumber: number }>> = props => {
+const FocusTrapComponent: React.FunctionComponent<
+  React.PropsWithChildren<React.PropsWithChildren<{ zoneNumber: number }>>
+> = props => {
   const [isActive, { toggle: toggleIsActive }] = useBoolean(false);
   const { zoneNumber, children } = props;
   const onStringButtonClicked = (): void => {
diff --git a/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx
index cd34ff0580507..97b23c16ddd51 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedList.Basic.Example.tsx
@@ -14,7 +14,7 @@ const columns = Object.keys(items[0])
   .slice(0, 3)
   .map(
     (key: string): IColumn => ({
-      key: key,
+      key,
       name: key,
       fieldName: key,
       minWidth: 300,
@@ -23,7 +23,7 @@ const columns = Object.keys(items[0])
 
 const groups = createGroups(groupCount, groupDepth, 0, groupCount);
 
-export const GroupedListBasicExample: React.FunctionComponent = () => {
+export const GroupedListBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCompactMode, { toggle: toggleIsCompactMode }] = useBoolean(false);
   const selection = useConst(() => {
     const s = new Selection();
diff --git a/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
index 8ef6e24310168..08a342127a774 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedList.Custom.Example.tsx
@@ -73,6 +73,6 @@ const groupedListProps = {
 const items: IExampleItem[] = createListItems(20);
 const groups: IGroup[] = createGroups(4, 0, 0, 5);
 
-export const GroupedListCustomExample: React.FunctionComponent = () => (
+export const GroupedListCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <GroupedList items={items} onRenderCell={onRenderCell} groupProps={groupedListProps} groups={groups} />
 );
diff --git a/packages/react-examples/src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx
index 63c4b2f4a792c..c29bf1f39ec8b 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedList.CustomCheckbox.Example.tsx
@@ -34,7 +34,7 @@ const onRenderGroupHeaderCheckbox = (props?: IGroupHeaderCheckboxProps) => {
   );
 };
 
-export const GroupedListCustomCheckboxExample: React.FunctionComponent = () => {
+export const GroupedListCustomCheckboxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const items: IObjectWithKey[] = useConst(() => createListItems(Math.pow(groupCount, groupDepth + 1)));
   const groups = useConst(() => createGroups(groupCount, groupDepth, 0, groupCount));
   const columns = useConst(() =>
@@ -42,7 +42,7 @@ export const GroupedListCustomCheckboxExample: React.FunctionComponent = () => {
       .slice(0, 3)
       .map(
         (key: string): IColumn => ({
-          key: key,
+          key,
           name: key,
           fieldName: key,
           minWidth: 300,
diff --git a/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx
index 8528c6e4b0246..54f86d3ef2b64 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedListV2.Basic.Example.tsx
@@ -15,7 +15,7 @@ const columns = Object.keys(items[0])
   .slice(0, 3)
   .map(
     (key: string): IColumn => ({
-      key: key,
+      key,
       name: key,
       fieldName: key,
       minWidth: 300,
@@ -24,7 +24,7 @@ const columns = Object.keys(items[0])
 
 const groups = createGroups(groupCount, groupDepth, 0, groupCount);
 
-export const GroupedListV2BasicExample: React.FunctionComponent = () => {
+export const GroupedListV2BasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isCompactMode, { toggle: toggleIsCompactMode }] = useBoolean(false);
   const selection = useConst(() => {
     const s = new Selection();
diff --git a/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
index 1b9c984041127..632af7e746643 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedListV2.Custom.Example.tsx
@@ -74,7 +74,7 @@ const groupedListProps = {
 const items: IExampleItem[] = createListItems(20);
 const groups: IGroup[] = createGroups(4, 0, 0, 5);
 
-export const GroupedListV2CustomExample: React.FunctionComponent = () => (
+export const GroupedListV2CustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <GroupedListV2 items={items} onRenderCell={onRenderCell} groupProps={groupedListProps} groups={groups} />
 );
 
diff --git a/packages/react-examples/src/react/GroupedList/GroupedListV2.CustomCheckbox.Example.tsx b/packages/react-examples/src/react/GroupedList/GroupedListV2.CustomCheckbox.Example.tsx
index fc71599f6083c..cccdb08c6fe43 100644
--- a/packages/react-examples/src/react/GroupedList/GroupedListV2.CustomCheckbox.Example.tsx
+++ b/packages/react-examples/src/react/GroupedList/GroupedListV2.CustomCheckbox.Example.tsx
@@ -34,7 +34,7 @@ const onRenderGroupHeaderCheckbox = (props?: IGroupHeaderCheckboxProps) => {
   );
 };
 
-export const GroupedListV2CustomCheckboxExample: React.FunctionComponent = () => {
+export const GroupedListV2CustomCheckboxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const items: IObjectWithKey[] = useConst(() => createListItems(Math.pow(groupCount, groupDepth + 1)));
   const groups = useConst(() => createGroups(groupCount, groupDepth, 0, groupCount));
   const columns = useConst(() =>
@@ -42,7 +42,7 @@ export const GroupedListV2CustomCheckboxExample: React.FunctionComponent = () =>
       .slice(0, 3)
       .map(
         (key: string): IColumn => ({
-          key: key,
+          key,
           name: key,
           fieldName: key,
           minWidth: 300,
diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.Basic.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.Basic.Example.tsx
index 1464d33b74a96..b381291d4762f 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.Basic.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.Basic.Example.tsx
@@ -59,8 +59,8 @@ const onRenderExpandedCard = (item: IExampleItem): JSX.Element => {
 
 const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn): JSX.Element | React.ReactText => {
   const expandingCardProps: IExpandingCardProps = {
-    onRenderCompactCard: onRenderCompactCard,
-    onRenderExpandedCard: onRenderExpandedCard,
+    onRenderCompactCard,
+    onRenderExpandedCard,
     renderData: item,
   };
   if (column.key === 'location') {
@@ -73,7 +73,7 @@ const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn):
   return item[column.key as keyof IExampleItem];
 };
 
-export const HoverCardBasicExample: React.FunctionComponent = () => (
+export const HoverCardBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <ThemeProvider>
     <p>
       Hover over the <i>location</i> cell of a row item to see the card or use the keyboard to navigate to it.
diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.EventListenerTarget.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.EventListenerTarget.Example.tsx
index 81467af7487c8..f762e70742366 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.EventListenerTarget.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.EventListenerTarget.Example.tsx
@@ -26,11 +26,11 @@ const onRenderPlainCard = (): JSX.Element => {
   return <div className={classNames.plainCard}>plain card</div>;
 };
 
-export const HoverCardEventListenerTargetExample: React.FunctionComponent = () => {
+export const HoverCardEventListenerTargetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const targetRef = React.useRef<HTMLElement | null>(null);
   const eventListenerTargetRef = React.useRef<HTMLElement | null>(null);
   const plainCardProps: IPlainCardProps = {
-    onRenderPlainCard: onRenderPlainCard,
+    onRenderPlainCard,
     directionalHint: DirectionalHint.rightTopEdge,
   };
   return (
diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.InstantDismiss.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.InstantDismiss.Example.tsx
index b937953140356..9946b23358535 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.InstantDismiss.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.InstantDismiss.Example.tsx
@@ -30,7 +30,7 @@ const onCardHide = (): void => {
   console.log('I am now hidden');
 };
 
-export const HoverCardInstantDismissExample: React.FunctionComponent = () => {
+export const HoverCardInstantDismissExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const hoverCard = React.useRef<IHoverCard>(null);
   const instantDismissCard = (): void => {
     if (hoverCard.current) {
@@ -49,7 +49,7 @@ export const HoverCardInstantDismissExample: React.FunctionComponent = () => {
     );
   };
   const plainCardProps: IPlainCardProps = {
-    onRenderPlainCard: onRenderPlainCard,
+    onRenderPlainCard,
   };
   return (
     <ThemeProvider>
diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.PlainCard.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.PlainCard.Example.tsx
index 9e1a18a497847..e61ff195b38f6 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.PlainCard.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.PlainCard.Example.tsx
@@ -35,7 +35,7 @@ const onRenderPlainCard = (item: IExampleItem): JSX.Element => {
 };
 const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn): JSX.Element | React.ReactText => {
   const plainCardProps: IPlainCardProps = {
-    onRenderPlainCard: onRenderPlainCard,
+    onRenderPlainCard,
     renderData: item,
   };
   if (column.key === 'color') {
@@ -50,7 +50,7 @@ const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn):
   return item[column.key as keyof IExampleItem];
 };
 
-export const HoverCardPlainCardExample: React.FunctionComponent = () => {
+export const HoverCardPlainCardExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <ThemeProvider>
       <p>
diff --git a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
index deedfcc27d09b..fad1b6addfe92 100644
--- a/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
+++ b/packages/react-examples/src/react/HoverCard/HoverCard.Target.Example.tsx
@@ -65,7 +65,7 @@ const onRenderExpandedCard = (item: IExampleItem): JSX.Element => {
  * Used for the hoverable "key" cell. In this case, the implementation uses hooks to control
  * open/closed state, so it must be a function component (not just code within a render callback).
  */
-const KeyCellWithHoverCard: React.FunctionComponent<{ item: IExampleItem }> = ({ item }) => {
+const KeyCellWithHoverCard: React.FunctionComponent<React.PropsWithChildren<{ item: IExampleItem }>> = ({ item }) => {
   const [contentRendered, { toggle: toggleContentRendered }] = useBoolean(false);
   const targetElementRef: React.RefObject<HTMLDivElement> = React.useRef<HTMLDivElement>(null);
   const expandingCardProps: IExpandingCardProps = useConst({
@@ -108,7 +108,7 @@ const onRenderItemColumn = (item: IExampleItem, index: number, column: IColumn):
   return item[column.key as keyof IExampleItem];
 };
 
-export const HoverCardTargetExample: React.FunctionComponent = () => {
+export const HoverCardTargetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <ThemeProvider>
       <p>
diff --git a/packages/react-examples/src/react/Icon/Icon.Basic.Example.tsx b/packages/react-examples/src/react/Icon/Icon.Basic.Example.tsx
index c1532150af0c2..83e150b220a08 100644
--- a/packages/react-examples/src/react/Icon/Icon.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Icon/Icon.Basic.Example.tsx
@@ -9,7 +9,7 @@ const iconClass = mergeStyles({
   margin: '0 25px',
 });
 
-export const IconBasicExample: React.FunctionComponent = () => {
+export const IconBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // FontIcon is an optimized variant of standard Icon.
   // You could also use the standard Icon here.
   // Provide an `aria-label` for screen reader users if the icon is not accompanied by text
diff --git a/packages/react-examples/src/react/Icon/Icon.Color.Example.tsx b/packages/react-examples/src/react/Icon/Icon.Color.Example.tsx
index 1d03e835c0aa1..7b19397a9b8c8 100644
--- a/packages/react-examples/src/react/Icon/Icon.Color.Example.tsx
+++ b/packages/react-examples/src/react/Icon/Icon.Color.Example.tsx
@@ -14,7 +14,7 @@ const classNames = mergeStyleSets({
   salmon: [{ color: 'salmon' }, iconClass],
 });
 
-export const IconColorExample: React.FunctionComponent = () => {
+export const IconColorExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // FontIcon is an optimized variant of standard Icon.
   // You could also use the standard Icon here.
   // Provide an `aria-label` for screen reader users if the icon is not accompanied by text
diff --git a/packages/react-examples/src/react/Icon/Icon.ImageSheet.Example.tsx b/packages/react-examples/src/react/Icon/Icon.ImageSheet.Example.tsx
index 6cc290565014c..d90bdd4d47544 100644
--- a/packages/react-examples/src/react/Icon/Icon.ImageSheet.Example.tsx
+++ b/packages/react-examples/src/react/Icon/Icon.ImageSheet.Example.tsx
@@ -38,7 +38,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const IconImageSheetExample: React.FunctionComponent = () => {
+export const IconImageSheetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // ImageIcon is an optimized variant of standard Icon.
   // You could also use the standard Icon here (adding the prop `iconType={IconType.image}`).
   // Provide an alt attribute using imageProps.alt for screen reader users if the icon is not
diff --git a/packages/react-examples/src/react/Icon/Icon.Svg.Example.tsx b/packages/react-examples/src/react/Icon/Icon.Svg.Example.tsx
index 138696199f3b2..888bc5e5c2381 100644
--- a/packages/react-examples/src/react/Icon/Icon.Svg.Example.tsx
+++ b/packages/react-examples/src/react/Icon/Icon.Svg.Example.tsx
@@ -47,7 +47,9 @@ const iconClass = mergeStyles({
   margin: '0 25px',
 });
 
-const BorderBlindsIcon: React.FunctionComponent<{ color1?: string; color2?: string; color3?: string }> = props => {
+const BorderBlindsIcon: React.FunctionComponent<
+  React.PropsWithChildren<{ color1?: string; color2?: string; color3?: string }>
+> = props => {
   const { color1 = 'red', color2 = 'green', color3 = 'blue' } = props;
 
   // FontIcon is an optimized variant of standard Icon.
@@ -78,7 +80,7 @@ const BorderBlindsIcon: React.FunctionComponent<{ color1?: string; color2?: stri
   );
 };
 
-export const IconSvgExample: React.FunctionComponent = () => {
+export const IconSvgExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // FontIcon is an optimized variant of standard Icon.
   // You could also use the standard Icon here.
   // Provide an `aria-label` for screen reader users if the icon is not accompanied by text
diff --git a/packages/react-examples/src/react/Icon/Icon.SvgFactory.Example.tsx b/packages/react-examples/src/react/Icon/Icon.SvgFactory.Example.tsx
index d230e46e0f6cf..fc962e0523bb1 100644
--- a/packages/react-examples/src/react/Icon/Icon.SvgFactory.Example.tsx
+++ b/packages/react-examples/src/react/Icon/Icon.SvgFactory.Example.tsx
@@ -27,9 +27,9 @@ const classes = mergeStyleSets({
   },
 });
 
-const icons = Object.keys(ReactIcons).reduce((acc: React.FC[], exportName) => {
+const icons = Object.keys(ReactIcons).reduce((acc: React.FC<React.PropsWithChildren<unknown>>[], exportName) => {
   if ((ReactIcons as any)[exportName]?.displayName) {
-    acc.push((ReactIcons as any)[exportName] as React.FunctionComponent);
+    acc.push((ReactIcons as any)[exportName] as React.FunctionComponent<React.PropsWithChildren<unknown>>);
   }
 
   return acc;
@@ -38,7 +38,7 @@ const icons = Object.keys(ReactIcons).reduce((acc: React.FC[], exportName) => {
 const numOfIcons = icons.length;
 const numOfPages = parseInt((numOfIcons / 100).toString(), 10) + (numOfIcons % 100 > 0 ? 1 : 0);
 
-export const IconSvgFactoryExample: React.FunctionComponent = () => {
+export const IconSvgFactoryExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [page, setPage] = React.useState(1);
   const nextPage = () => setPage(page + 1);
   const prevPage = () => setPage(page - 1);
@@ -67,7 +67,7 @@ export const IconSvgFactoryExample: React.FunctionComponent = () => {
       <div>
         {icons
           .slice((page - 1) * 100, (page - 1) * 100 + 100)
-          .map((Icon: React.FunctionComponent<ReactIcons.ISvgIconProps>) => (
+          .map((Icon: React.FunctionComponent<React.PropsWithChildren<ReactIcons.ISvgIconProps>>) => (
             <div key={Icon.displayName} className={classes.cell}>
               {/*
                 Provide an `aria-label` for screen reader users if the icon is not accompanied by
diff --git a/packages/react-examples/src/react/Keytip/Keytips.Basic.Example.tsx b/packages/react-examples/src/react/Keytip/Keytips.Basic.Example.tsx
index 5e022486d7043..062be0ff80aef 100644
--- a/packages/react-examples/src/react/Keytip/Keytips.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Keytip/Keytips.Basic.Example.tsx
@@ -20,7 +20,7 @@ const sampleOptions = [
   { key: 'C', text: 'Option 3' },
 ];
 
-export const KeytipsBasicExample: React.FunctionComponent = () => {
+export const KeytipsBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const checkboxRef = useKeytipRef<HTMLDivElement>({ keytipProps: keytipMap.CheckboxKeytip });
   const linkRef = useKeytipRef<HTMLAnchorElement>({ keytipProps: keytipMap.LinkKeytip });
   const toggleRef = useKeytipRef<HTMLDivElement>({ keytipProps: keytipMap.ToggleKeytip });
diff --git a/packages/react-examples/src/react/Keytip/Keytips.Button.Example.tsx b/packages/react-examples/src/react/Keytip/Keytips.Button.Example.tsx
index d03ebe1f83439..1b661b6e8d01e 100644
--- a/packages/react-examples/src/react/Keytip/Keytips.Button.Example.tsx
+++ b/packages/react-examples/src/react/Keytip/Keytips.Button.Example.tsx
@@ -43,7 +43,7 @@ const log =
   () =>
     console.log(text);
 
-export const KeytipsButtonExample: React.FunctionComponent = () => {
+export const KeytipsButtonExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [btnDisabled, { toggle: toggleBtnDisabled }] = useBoolean(false);
   return (
     <div>
diff --git a/packages/react-examples/src/react/Keytip/Keytips.CommandBar.Example.tsx b/packages/react-examples/src/react/Keytip/Keytips.CommandBar.Example.tsx
index d2c12d5dd77e6..c6bfd466079b4 100644
--- a/packages/react-examples/src/react/Keytip/Keytips.CommandBar.Example.tsx
+++ b/packages/react-examples/src/react/Keytip/Keytips.CommandBar.Example.tsx
@@ -64,7 +64,7 @@ const commandBarFarItemsProps = [
   },
 ];
 
-export const KeytipsCommandBarExample: React.FunctionComponent = () => {
+export const KeytipsCommandBarExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showModal, { toggle: toggleShowModal }] = useBoolean(false);
   const [showMessageBar, { toggle: toggleShowMessageBar }] = useBoolean(false);
   const commandBarItems = useConst(() => [
diff --git a/packages/react-examples/src/react/Keytip/Keytips.Dynamic.Example.tsx b/packages/react-examples/src/react/Keytip/Keytips.Dynamic.Example.tsx
index bb8113d8be81a..782b96898af9b 100644
--- a/packages/react-examples/src/react/Keytip/Keytips.Dynamic.Example.tsx
+++ b/packages/react-examples/src/react/Keytip/Keytips.Dynamic.Example.tsx
@@ -13,7 +13,7 @@ const buttonTwoKeytipProps = {
   hasDynamicChildren: true,
 };
 
-export const KeytipsDynamicExample: React.FunctionComponent = () => {
+export const KeytipsDynamicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [currButton, setCurrButton] = React.useState('Button 1');
   const startSequence = currButton === 'Button 1' ? 'gg1' : 'gg2';
   const onClick = (buttonId: string) => {
diff --git a/packages/react-examples/src/react/Keytip/Keytips.Overflow.Example.tsx b/packages/react-examples/src/react/Keytip/Keytips.Overflow.Example.tsx
index e7ff60a80d9b3..49fb7e6e5101a 100644
--- a/packages/react-examples/src/react/Keytip/Keytips.Overflow.Example.tsx
+++ b/packages/react-examples/src/react/Keytip/Keytips.Overflow.Example.tsx
@@ -85,7 +85,7 @@ const initialOverflowItems = [
   },
 ];
 
-export const KeytipsOverflowExample: React.FunctionComponent = () => {
+export const KeytipsOverflowExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [items, setItems] = React.useState(initialItems);
   const [overflowItems, setOverflowItems] = React.useState<typeof initialItems>(initialOverflowItems);
 
diff --git a/packages/react-examples/src/react/Layer/Layer.Basic.Example.tsx b/packages/react-examples/src/react/Layer/Layer.Basic.Example.tsx
index 1087ee4a8dd92..e4e67388b98c6 100644
--- a/packages/react-examples/src/react/Layer/Layer.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Layer/Layer.Basic.Example.tsx
@@ -4,7 +4,7 @@ import { Layer } from '@fluentui/react/lib/Layer';
 import { Toggle } from '@fluentui/react/lib/Toggle';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const LayerBasicExample: React.FunctionComponent = () => {
+export const LayerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showLayer, { toggle: toggleShowLayer }] = useBoolean(false);
 
   const content = <div className={contentClass}>Hello world</div>;
diff --git a/packages/react-examples/src/react/Layer/Layer.Customized.Example.tsx b/packages/react-examples/src/react/Layer/Layer.Customized.Example.tsx
index 2d45414d55355..6707a31b59b55 100644
--- a/packages/react-examples/src/react/Layer/Layer.Customized.Example.tsx
+++ b/packages/react-examples/src/react/Layer/Layer.Customized.Example.tsx
@@ -7,7 +7,7 @@ import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { Customizer } from '@fluentui/react/lib/Utilities';
 import { useId, useBoolean } from '@fluentui/react-hooks';
 
-export const LayerCustomizedExample: React.FunctionComponent = () => {
+export const LayerCustomizedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isPanelOpen, { setTrue: showPanel, setFalse: dismissPanel }] = useBoolean(false);
   const [trapPanel, { toggle: toggleTrapPanel }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/Layer/Layer.Hosted.Example.tsx b/packages/react-examples/src/react/Layer/Layer.Hosted.Example.tsx
index 7f8c6eea60908..1494689050da8 100644
--- a/packages/react-examples/src/react/Layer/Layer.Hosted.Example.tsx
+++ b/packages/react-examples/src/react/Layer/Layer.Hosted.Example.tsx
@@ -5,7 +5,7 @@ import { AnimationClassNames, mergeStyleSets, getTheme } from '@fluentui/react/l
 import { IToggleStyles } from '@fluentui/react/lib/Toggle';
 import { useId, useBoolean } from '@fluentui/react-hooks';
 
-export const LayerHostedExample: React.FunctionComponent = () => {
+export const LayerHostedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showLayer, { toggle: toggleShowLayer }] = useBoolean(false);
   const [showLayerNoId, { toggle: toggleShowLayerNoId }] = useBoolean(false);
   const [showHost, { toggle: toggleShowHost }] = useBoolean(true);
diff --git a/packages/react-examples/src/react/Layer/Layer.NestedLayers.Example.tsx b/packages/react-examples/src/react/Layer/Layer.NestedLayers.Example.tsx
index 24ba503ac5331..0455a178c8a7c 100644
--- a/packages/react-examples/src/react/Layer/Layer.NestedLayers.Example.tsx
+++ b/packages/react-examples/src/react/Layer/Layer.NestedLayers.Example.tsx
@@ -5,7 +5,7 @@ import { Panel, PanelType } from '@fluentui/react/lib/Panel';
 import { IModalProps } from '@fluentui/react/lib/Modal';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const LayerNestedLayersExample: React.FunctionComponent = () => {
+export const LayerNestedLayersExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isDialogOpen, { setTrue: showDialog, setFalse: hideDialog }] = useBoolean(false);
   const [isPanelOpen, { setTrue: showPanel, setFalse: dismissPanel }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/Link/Link.Basic.Example.tsx b/packages/react-examples/src/react/Link/Link.Basic.Example.tsx
index 071eb4d32f5c3..d04b8f00b026b 100644
--- a/packages/react-examples/src/react/Link/Link.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Link/Link.Basic.Example.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Link, Text } from '@fluentui/react';
 
-export const LinkBasicExample: React.FunctionComponent = () => {
+export const LinkBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <Text>
diff --git a/packages/react-examples/src/react/List/List.Basic.Example.tsx b/packages/react-examples/src/react/List/List.Basic.Example.tsx
index 7c193c951b914..cdf9a0e52ccb4 100644
--- a/packages/react-examples/src/react/List/List.Basic.Example.tsx
+++ b/packages/react-examples/src/react/List/List.Basic.Example.tsx
@@ -57,7 +57,7 @@ const generateStyles = (theme: ITheme) => {
   });
 };
 
-export const ListBasicExample: React.FunctionComponent = () => {
+export const ListBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const originalItems = useConst(() => createListItems(5000));
   const [items, setItems] = React.useState(originalItems);
   const theme = useTheme();
diff --git a/packages/react-examples/src/react/List/List.Ghosting.Example.tsx b/packages/react-examples/src/react/List/List.Ghosting.Example.tsx
index 80e18fc61ced7..756784b84c21b 100644
--- a/packages/react-examples/src/react/List/List.Ghosting.Example.tsx
+++ b/packages/react-examples/src/react/List/List.Ghosting.Example.tsx
@@ -57,7 +57,7 @@ const generateStyles = (theme: ITheme) => {
   });
 };
 
-export const ListGhostingExample: React.FunctionComponent = () => {
+export const ListGhostingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const items = useConst(() => createListItems(5000));
   const theme = useTheme();
   const classNames = React.useMemo(() => generateStyles(theme), [theme]);
diff --git a/packages/react-examples/src/react/List/List.Grid.Example.tsx b/packages/react-examples/src/react/List/List.Grid.Example.tsx
index 87dddd8f63cf0..3bd7c7c77b301 100644
--- a/packages/react-examples/src/react/List/List.Grid.Example.tsx
+++ b/packages/react-examples/src/react/List/List.Grid.Example.tsx
@@ -68,7 +68,7 @@ const generateStyles = (theme: ITheme) => {
   });
 };
 
-export const ListGridExample: React.FunctionComponent = () => {
+export const ListGridExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const columnCount = React.useRef(0);
   const rowHeight = React.useRef(0);
   const theme = useTheme();
diff --git a/packages/react-examples/src/react/List/List.Scrolling.Example.tsx b/packages/react-examples/src/react/List/List.Scrolling.Example.tsx
index 3bbf21146b0a4..a5daa8982aabb 100644
--- a/packages/react-examples/src/react/List/List.Scrolling.Example.tsx
+++ b/packages/react-examples/src/react/List/List.Scrolling.Example.tsx
@@ -52,7 +52,7 @@ const generateStyles = (theme: ITheme) => {
   });
 };
 
-export const ListScrollingExample: React.FunctionComponent = () => {
+export const ListScrollingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const items = useConst(() => createListItems(5000));
   const [selectedIndex, setSelectedIndex] = React.useState(0);
   const [scrollToMode, setScrollToMode] = React.useState<ScrollToMode>(ScrollToMode.auto);
diff --git a/packages/react-examples/src/react/MarqueeSelection/MarqueeSelection.Basic.Example.tsx b/packages/react-examples/src/react/MarqueeSelection/MarqueeSelection.Basic.Example.tsx
index f7a1187c99a32..38a0758fe9383 100644
--- a/packages/react-examples/src/react/MarqueeSelection/MarqueeSelection.Basic.Example.tsx
+++ b/packages/react-examples/src/react/MarqueeSelection/MarqueeSelection.Basic.Example.tsx
@@ -53,7 +53,7 @@ const styles = mergeStyleSets({
   },
 });
 
-export const MarqueeSelectionBasicExample: React.FunctionComponent = () => {
+export const MarqueeSelectionBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isMarqueeEnabled, { toggle: toggleIsMarqueeEnabled }] = useBoolean(true);
   const forceUpdate = useForceUpdate();
 
diff --git a/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx b/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
index da1acb106df6d..6c5601b5903c7 100644
--- a/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
+++ b/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
@@ -202,7 +202,7 @@ const choiceOptions = [
   { key: 'warning2', text: 'Warning - multiline' },
 ];
 
-export const MessageBarBasicExample: React.FunctionComponent = () => {
+export const MessageBarBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [choice, setChoice] = React.useState<string | undefined>(undefined);
   const showAll = choice === 'all';
 
diff --git a/packages/react-examples/src/react/MessageBar/MessageBar.NoDelay.Example.tsx b/packages/react-examples/src/react/MessageBar/MessageBar.NoDelay.Example.tsx
index 145989c543763..f5f0be0516ef1 100644
--- a/packages/react-examples/src/react/MessageBar/MessageBar.NoDelay.Example.tsx
+++ b/packages/react-examples/src/react/MessageBar/MessageBar.NoDelay.Example.tsx
@@ -7,7 +7,7 @@ const wrapperClass = mergeStyles({
   '> * > *:not(:last-child)': { marginBottom: '0.5em' },
 });
 
-export const MessageBarNoDelayExample: React.FunctionComponent = () => {
+export const MessageBarNoDelayExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showAlert, { toggle: toggleShowAlert }] = useBoolean(false);
   const [showStatus, { toggle: toggleShowStatus }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/Modal/Modal.Basic.Example.tsx b/packages/react-examples/src/react/Modal/Modal.Basic.Example.tsx
index 1a50f77aede05..9b847d63231cf 100644
--- a/packages/react-examples/src/react/Modal/Modal.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Modal/Modal.Basic.Example.tsx
@@ -14,7 +14,7 @@ import {
 } from '@fluentui/react';
 import { DefaultButton, IconButton, IButtonStyles } from '@fluentui/react/lib/Button';
 
-export const ModalBasicExample: React.FunctionComponent = () => {
+export const ModalBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
   const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false);
   const [keepInBounds, { toggle: toggleKeepInBounds }] = useBoolean(false);
diff --git a/packages/react-examples/src/react/Modal/Modal.Modeless.Example.tsx b/packages/react-examples/src/react/Modal/Modal.Modeless.Example.tsx
index 503d3d1f23bef..b10624be5941a 100644
--- a/packages/react-examples/src/react/Modal/Modal.Modeless.Example.tsx
+++ b/packages/react-examples/src/react/Modal/Modal.Modeless.Example.tsx
@@ -20,7 +20,7 @@ const dragOptions: IDragOptions = {
 };
 const cancelIcon: IIconProps = { iconName: 'Cancel' };
 
-export const ModalModelessExample: React.FunctionComponent = () => {
+export const ModalModelessExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean(false);
   const [isDraggable, { toggle: toggleIsDraggable }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/Nav/Nav.Basic.Example.tsx b/packages/react-examples/src/react/Nav/Nav.Basic.Example.tsx
index 06127444eebd2..a48ffcb9210f1 100644
--- a/packages/react-examples/src/react/Nav/Nav.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.Basic.Example.tsx
@@ -71,7 +71,7 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavBasicExample: React.FunctionComponent = () => {
+export const NavBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Nav
       onLinkClick={_onLinkClick}
diff --git a/packages/react-examples/src/react/Nav/Nav.CustomGroupHeaders.Example.tsx b/packages/react-examples/src/react/Nav/Nav.CustomGroupHeaders.Example.tsx
index d878642b3c14d..b94d098fc45e1 100644
--- a/packages/react-examples/src/react/Nav/Nav.CustomGroupHeaders.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.CustomGroupHeaders.Example.tsx
@@ -18,7 +18,7 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavCustomGroupHeadersExample: React.FunctionComponent = () => {
+export const NavCustomGroupHeadersExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Nav
       onRenderGroupHeader={_onRenderGroupHeader}
diff --git a/packages/react-examples/src/react/Nav/Nav.FabricDemoApp.Example.tsx b/packages/react-examples/src/react/Nav/Nav.FabricDemoApp.Example.tsx
index 82adaa8298b9c..dc1cec0cd6484 100644
--- a/packages/react-examples/src/react/Nav/Nav.FabricDemoApp.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.FabricDemoApp.Example.tsx
@@ -69,7 +69,7 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavFabricDemoAppExample: React.FunctionComponent = () => {
+export const NavFabricDemoAppExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Nav styles={navStyles} ariaLabel="Nav example similar to one found in this demo page" groups={navLinkGroups} />
   );
diff --git a/packages/react-examples/src/react/Nav/Nav.FocusZone.Example.tsx b/packages/react-examples/src/react/Nav/Nav.FocusZone.Example.tsx
index b5ea6cd70770f..d0d24f939d69d 100644
--- a/packages/react-examples/src/react/Nav/Nav.FocusZone.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.FocusZone.Example.tsx
@@ -26,7 +26,7 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavFocusZoneExample: React.FunctionComponent = () => {
+export const NavFocusZoneExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Nav
       styles={navStyles}
diff --git a/packages/react-examples/src/react/Nav/Nav.Nested.Example.tsx b/packages/react-examples/src/react/Nav/Nav.Nested.Example.tsx
index 6badfb09a1a3d..04dd42b260d8d 100644
--- a/packages/react-examples/src/react/Nav/Nav.Nested.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.Nested.Example.tsx
@@ -57,6 +57,6 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavNestedExample: React.FunctionComponent = () => {
+export const NavNestedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return <Nav ariaLabel="Nav example with nested links" groups={navLinkGroups} />;
 };
diff --git a/packages/react-examples/src/react/Nav/Nav.Wrapped.Example.tsx b/packages/react-examples/src/react/Nav/Nav.Wrapped.Example.tsx
index b5801868869aa..a8b6caeb4adc2 100644
--- a/packages/react-examples/src/react/Nav/Nav.Wrapped.Example.tsx
+++ b/packages/react-examples/src/react/Nav/Nav.Wrapped.Example.tsx
@@ -85,7 +85,7 @@ const navLinkGroups: INavLinkGroup[] = [
   },
 ];
 
-export const NavWrappedExample: React.FunctionComponent = () => {
+export const NavWrappedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Nav selectedKey="key6" ariaLabel="Nav example with wrapped link text" styles={navStyles} groups={navLinkGroups} />
   );
diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx
index 1bebc0cc26cac..593dfbf99e58e 100644
--- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx
+++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx
@@ -32,7 +32,7 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   );
 };
 
-export const OverflowSetBasicExample: React.FunctionComponent = () => (
+export const OverflowSetBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <OverflowSet
     aria-label="Basic Menu Example"
     items={[
diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx
index 1fcd25cdda3d4..1974dfd7c69f2 100644
--- a/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx
+++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx
@@ -32,7 +32,7 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   );
 };
 
-export const OverflowSetBasicReversedExample: React.FunctionComponent = () => (
+export const OverflowSetBasicReversedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <OverflowSet
     aria-label="Basic Menu Example"
     items={[
diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx
index 84423306ad13d..362a5397365bb 100644
--- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx
+++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx
@@ -36,7 +36,7 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   );
 };
 
-export const OverflowSetCustomExample: React.FunctionComponent = () => (
+export const OverflowSetCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <OverflowSet
     aria-label="Custom Example"
     items={[
diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx
index 2aaf0217c3675..a7a9d2ee9f8f7 100644
--- a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx
+++ b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx
@@ -39,7 +39,7 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   );
 };
 
-export const OverflowSetVerticalExample: React.FunctionComponent = () => (
+export const OverflowSetVerticalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <OverflowSet
     aria-label="Vertical Example"
     vertical
diff --git a/packages/react-examples/src/react/Overlay/Overlay.Light.Example.tsx b/packages/react-examples/src/react/Overlay/Overlay.Light.Example.tsx
index 2241ea537f03e..657370cb7cfe1 100644
--- a/packages/react-examples/src/react/Overlay/Overlay.Light.Example.tsx
+++ b/packages/react-examples/src/react/Overlay/Overlay.Light.Example.tsx
@@ -25,7 +25,7 @@ const exampleStyles: IOverlayExampleStyles = {
 const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
 const classNames = getClassNames(exampleStyles, {});
 
-export const OverlayLightExample: React.FunctionComponent = () => {
+export const OverlayLightExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOverlayVisible, { toggle: toggleIsOverlayVisible }] = useBoolean(false);
   return (
     <>
diff --git a/packages/react-examples/src/react/Panel/Panel.Basic.Example.tsx b/packages/react-examples/src/react/Panel/Panel.Basic.Example.tsx
index 2392509046031..b09c0037ae533 100644
--- a/packages/react-examples/src/react/Panel/Panel.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.Basic.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton } from '@fluentui/react/lib/Button';
 import { Panel } from '@fluentui/react/lib/Panel';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const PanelBasicExample: React.FunctionComponent = () => {
+export const PanelBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Panel/Panel.ConfirmDismiss.Example.tsx b/packages/react-examples/src/react/Panel/Panel.ConfirmDismiss.Example.tsx
index e7a4c4e8184ed..7cd1b3e836b47 100644
--- a/packages/react-examples/src/react/Panel/Panel.ConfirmDismiss.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.ConfirmDismiss.Example.tsx
@@ -13,7 +13,7 @@ const dialogModalProps = {
   styles: { main: { maxWidth: 450 } },
 };
 
-export const PanelConfirmDismissExample: React.FunctionComponent = () => {
+export const PanelConfirmDismissExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isPanelOpen, setIsPanelOpen] = React.useState(false);
   const [isDialogVisible, setIsDialogVisible] = React.useState(false);
 
diff --git a/packages/react-examples/src/react/Panel/Panel.Controlled.Example.tsx b/packages/react-examples/src/react/Panel/Panel.Controlled.Example.tsx
index 09cd31affef04..f7527a2f2ea58 100644
--- a/packages/react-examples/src/react/Panel/Panel.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.Controlled.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton } from '@fluentui/react/lib/Button';
 import { Panel } from '@fluentui/react/lib/Panel';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const PanelControlledExample: React.FunctionComponent = () => {
+export const PanelControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Panel/Panel.Footer.Example.tsx b/packages/react-examples/src/react/Panel/Panel.Footer.Example.tsx
index 2475a9539fae7..7c67eff4c4ff9 100644
--- a/packages/react-examples/src/react/Panel/Panel.Footer.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.Footer.Example.tsx
@@ -5,7 +5,7 @@ import { useBoolean } from '@fluentui/react-hooks';
 
 const buttonStyles = { root: { marginRight: 8 } };
 
-export const PanelFooterExample: React.FunctionComponent = () => {
+export const PanelFooterExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   // This panel doesn't actually save anything; the buttons are just an example of what
diff --git a/packages/react-examples/src/react/Panel/Panel.HandleDismissTarget.Example.tsx b/packages/react-examples/src/react/Panel/Panel.HandleDismissTarget.Example.tsx
index caffe1aa46267..505f059895519 100644
--- a/packages/react-examples/src/react/Panel/Panel.HandleDismissTarget.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.HandleDismissTarget.Example.tsx
@@ -7,7 +7,7 @@ const explanation =
   'This example demonstrates detecting whether a panel was dismissed using the close button ' +
   'or using "light dismiss" (a click outside the panel area).';
 
-export const PanelHandleDismissTargetExample: React.FunctionComponent = () => {
+export const PanelHandleDismissTargetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   const onDismiss = React.useCallback(
diff --git a/packages/react-examples/src/react/Panel/Panel.HiddenOnDismiss.Example.tsx b/packages/react-examples/src/react/Panel/Panel.HiddenOnDismiss.Example.tsx
index 89312dbac46ae..db24f70dbb275 100644
--- a/packages/react-examples/src/react/Panel/Panel.HiddenOnDismiss.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.HiddenOnDismiss.Example.tsx
@@ -8,7 +8,7 @@ const contentExplanation =
   'Try typing something in this text field, closing the panel, and re-opening the panel. ' +
   " The text field's contents should still be here when the panel re-opens.";
 
-export const PanelHiddenOnDismissExample: React.FunctionComponent = () => {
+export const PanelHiddenOnDismissExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Panel/Panel.LightDismiss.Example.tsx b/packages/react-examples/src/react/Panel/Panel.LightDismiss.Example.tsx
index df97dd292c2f5..1159c656b62e6 100644
--- a/packages/react-examples/src/react/Panel/Panel.LightDismiss.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.LightDismiss.Example.tsx
@@ -7,7 +7,7 @@ const explanation =
   'This panel uses "light dismiss" behavior: it can be closed by clicking or tapping ' +
   'the area outside the panel (or using the close button as usual).';
 
-export const PanelLightDismissExample: React.FunctionComponent = () => {
+export const PanelLightDismissExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Panel/Panel.LightDismissCustom.Example.tsx b/packages/react-examples/src/react/Panel/Panel.LightDismissCustom.Example.tsx
index 32a3f01674f74..627fdf57adcf9 100644
--- a/packages/react-examples/src/react/Panel/Panel.LightDismissCustom.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.LightDismissCustom.Example.tsx
@@ -15,12 +15,12 @@ const dialogModalProps = {
   styles: { main: { maxWidth: 450 } },
 };
 
-export const PanelLightDismissCustomExample: React.FunctionComponent = () => {
+export const PanelLightDismissCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isPanelOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
   const [isDialogVisible, { setTrue: showDialog, setFalse: hideDialog }] = useBoolean(false);
 
   const onHideDialog = React.useCallback(
-    ev => {
+    (ev: React.MouseEvent<HTMLButtonElement>) => {
       ev.preventDefault();
       hideDialog();
     },
diff --git a/packages/react-examples/src/react/Panel/Panel.Navigation.Example.tsx b/packages/react-examples/src/react/Panel/Panel.Navigation.Example.tsx
index 8f5f54d5c9c32..e90a19f53c4ee 100644
--- a/packages/react-examples/src/react/Panel/Panel.Navigation.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.Navigation.Example.tsx
@@ -11,7 +11,7 @@ const explanation =
   'some other obvious way for users to close the panel.';
 const searchboxStyles = { root: { margin: '5px', height: 'auto', width: '100%' } };
 
-export const PanelNavigationExample: React.FunctionComponent = () => {
+export const PanelNavigationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   const onRenderNavigationContent: IRenderFunction<IPanelProps> = React.useCallback(
diff --git a/packages/react-examples/src/react/Panel/Panel.NonModal.Example.tsx b/packages/react-examples/src/react/Panel/Panel.NonModal.Example.tsx
index 0b6568cd1b6e6..6e6af648c0685 100644
--- a/packages/react-examples/src/react/Panel/Panel.NonModal.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.NonModal.Example.tsx
@@ -6,7 +6,7 @@ import { useBoolean } from '@fluentui/react-hooks';
 const explanation =
   "This panel is non-modal: even when it's open, it allows interacting with content outside the panel.";
 
-export const PanelNonModalExample: React.FunctionComponent = () => {
+export const PanelNonModalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Panel/Panel.Sizes.Example.tsx b/packages/react-examples/src/react/Panel/Panel.Sizes.Example.tsx
index 481bf8c45f832..f9607b3b405d7 100644
--- a/packages/react-examples/src/react/Panel/Panel.Sizes.Example.tsx
+++ b/packages/react-examples/src/react/Panel/Panel.Sizes.Example.tsx
@@ -6,7 +6,9 @@ import { Link } from '@fluentui/react/lib/Link';
 import { useBoolean } from '@fluentui/react-hooks';
 
 // The panel type and description are passed in by the PanelSizesExample component (later in this file)
-const PanelExample: React.FunctionComponent<{ panelType: PanelType; description: string }> = props => {
+const PanelExample: React.FunctionComponent<
+  React.PropsWithChildren<{ panelType: PanelType; description: string }>
+> = props => {
   const { description, panelType } = props;
   const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
@@ -49,7 +51,7 @@ const options: IDropdownOption[] = [
 const dropdownStyles = { root: { maxWidth: 250, marginBottom: 16 } };
 const firstPStyle = { marginTop: 0 };
 
-export const PanelSizesExample: React.FunctionComponent = () => {
+export const PanelSizesExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [option, setOption] = React.useState<IDropdownOption>(options[0]);
   const updateOption = React.useCallback((ev: any, opt: IDropdownOption) => setOption(opt), []);
 
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx
index f2e0dea1b946b..083c7fd258191 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Compact.Example.tsx
@@ -20,7 +20,7 @@ const checkboxStyles = {
   },
 };
 
-export const PeoplePickerCompactExample: React.FunctionComponent = () => {
+export const PeoplePickerCompactExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx
index a7e30c6b21f88..2eea10bc18bf4 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Controlled.Example.tsx
@@ -23,7 +23,7 @@ const checkboxStyles = {
 
 const defaultButtonStyles: Partial<IButtonStyles> = { root: { height: 'auto' } };
 
-export const PeoplePickerControlledExample: React.FunctionComponent = () => {
+export const PeoplePickerControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [currentSelectedItems, setCurrentSelectedItems] = React.useState<IPersonaProps[]>([]);
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx
index 1b33f9d6fbbb5..60bb88fb4775d 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.LimitedSearch.Example.tsx
@@ -28,7 +28,7 @@ const checkboxStyles = {
   },
 };
 
-export const PeoplePickerLimitedSearchExample: React.FunctionComponent = () => {
+export const PeoplePickerLimitedSearchExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
index ee575b0a6fcff..659d3c567209d 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.List.Example.tsx
@@ -40,7 +40,7 @@ const personaStyles: Partial<IPersonaStyles> = {
   },
 };
 
-export const PeoplePickerListExample: React.FunctionComponent = () => {
+export const PeoplePickerListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [pickerLabel, setPickerLabel] = React.useState<string | undefined>('Choose People');
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
index f12398e2db581..bec01d7417bbd 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.Normal.Example.tsx
@@ -27,7 +27,7 @@ const checkboxStyles = {
   },
 };
 
-export const PeoplePickerNormalExample: React.FunctionComponent = () => {
+export const PeoplePickerNormalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [pickerLabel, setPickerLabel] = React.useState<string | undefined>('Choose People');
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx
index e2cdce009be62..5ba67b0d2d8a4 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.PreselectedItems.Example.tsx
@@ -20,7 +20,7 @@ const checkboxStyles = {
   },
 };
 
-export const PeoplePickerPreselectedItemsExample: React.FunctionComponent = () => {
+export const PeoplePickerPreselectedItemsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
diff --git a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx
index 5c5e65aeb2bf2..684ce5f4db1e9 100644
--- a/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx
+++ b/packages/react-examples/src/react/PeoplePicker/PeoplePicker.ProcessSelection.Example.tsx
@@ -20,7 +20,7 @@ const checkboxStyles = {
   },
 };
 
-export const PeoplePickerProcessSelectionExample: React.FunctionComponent = () => {
+export const PeoplePickerProcessSelectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [delayResults, setDelayResults] = React.useState(false);
   const [isPickerDisabled, setIsPickerDisabled] = React.useState(false);
   const [mostRecentlyUsed, setMostRecentlyUsed] = React.useState<IPersonaProps[]>(mru);
diff --git a/packages/react-examples/src/react/Persona/Persona.Alternate.Example.tsx b/packages/react-examples/src/react/Persona/Persona.Alternate.Example.tsx
index 1f626b440e1c3..8b664bc8aacc1 100644
--- a/packages/react-examples/src/react/Persona/Persona.Alternate.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.Alternate.Example.tsx
@@ -3,7 +3,7 @@ import { IPersonaSharedProps, Persona, PersonaSize, PersonaPresence } from '@flu
 import { Stack } from '@fluentui/react/lib/Stack';
 import { TestImages } from '@fluentui/example-data';
 
-export const PersonaAlternateExample: React.FunctionComponent = () => {
+export const PersonaAlternateExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const examplePersona: IPersonaSharedProps = {
     imageUrl: TestImages.personaFemale,
     imageInitials: 'AR',
diff --git a/packages/react-examples/src/react/Persona/Persona.Basic.Example.tsx b/packages/react-examples/src/react/Persona/Persona.Basic.Example.tsx
index 7d8998318fc16..1ce8a5277fd8c 100644
--- a/packages/react-examples/src/react/Persona/Persona.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.Basic.Example.tsx
@@ -5,7 +5,7 @@ import { Label } from '@fluentui/react/lib/Label';
 import { Stack } from '@fluentui/react/lib/Stack';
 import { TestImages } from '@fluentui/example-data';
 
-export const PersonaBasicExample: React.FunctionComponent = () => {
+export const PersonaBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [renderDetails, updateRenderDetails] = React.useState(true);
   const onChange = (ev: unknown, checked: boolean | undefined) => {
     updateRenderDetails(!!checked);
diff --git a/packages/react-examples/src/react/Persona/Persona.Colors.Example.tsx b/packages/react-examples/src/react/Persona/Persona.Colors.Example.tsx
index 52e85319982bb..318100276fef6 100644
--- a/packages/react-examples/src/react/Persona/Persona.Colors.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.Colors.Example.tsx
@@ -12,7 +12,7 @@ const sharedPersonaProps: IPersonaProps = {
   },
 };
 
-export const PersonaColorsExample: React.FunctionComponent = () => {
+export const PersonaColorsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack horizontal wrap>
       <Persona
diff --git a/packages/react-examples/src/react/Persona/Persona.CustomCoinRender.Example.tsx b/packages/react-examples/src/react/Persona/Persona.CustomCoinRender.Example.tsx
index 2ecf5e236b4ca..d99b4c01d3911 100644
--- a/packages/react-examples/src/react/Persona/Persona.CustomCoinRender.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.CustomCoinRender.Example.tsx
@@ -16,7 +16,7 @@ const examplePersona: IPersonaSharedProps = {
   optionalText: 'Available at 4:00pm',
 };
 
-export const PersonaCustomCoinRenderExample: React.FunctionComponent = () => {
+export const PersonaCustomCoinRenderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={{ childrenGap: 10 }}>
       <div>Custom render function in place of persona coin's image</div>
diff --git a/packages/react-examples/src/react/Persona/Persona.CustomRender.Example.tsx b/packages/react-examples/src/react/Persona/Persona.CustomRender.Example.tsx
index ed551f9a48a0a..7e4b18dc69c9d 100644
--- a/packages/react-examples/src/react/Persona/Persona.CustomRender.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.CustomRender.Example.tsx
@@ -14,7 +14,7 @@ import { TestImages } from '@fluentui/example-data';
 const personaStyles: Partial<IPersonaStyles> = { root: { margin: '0 0 10px 0' } };
 const iconStyles: Partial<IIconStyles> = { root: { marginRight: 5 } };
 
-export const PersonaCustomRenderExample: React.FunctionComponent = () => {
+export const PersonaCustomRenderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const examplePersona: IPersonaSharedProps = {
     imageUrl: TestImages.personaFemale,
     imageInitials: 'AL',
diff --git a/packages/react-examples/src/react/Persona/Persona.Initials.Example.tsx b/packages/react-examples/src/react/Persona/Persona.Initials.Example.tsx
index dbed6dfe651db..40422592b7c0a 100644
--- a/packages/react-examples/src/react/Persona/Persona.Initials.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.Initials.Example.tsx
@@ -14,7 +14,7 @@ const personaWithInitials: IPersonaSharedProps = {
   imageInitials: 'MS',
 };
 
-export const PersonaInitialsExample: React.FunctionComponent = () => {
+export const PersonaInitialsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={{ childrenGap: 10 }}>
       <Persona {...examplePersona} text="Kat Larrson" size={PersonaSize.size24} />
diff --git a/packages/react-examples/src/react/Persona/Persona.PresenceColor.Example.tsx b/packages/react-examples/src/react/Persona/Persona.PresenceColor.Example.tsx
index a98cddd0b9081..3a46ea328a19c 100644
--- a/packages/react-examples/src/react/Persona/Persona.PresenceColor.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.PresenceColor.Example.tsx
@@ -33,7 +33,7 @@ const rootClass = mergeStyles({
   },
 });
 
-export const PersonaPresenceColorExample: React.FunctionComponent = () => {
+export const PersonaPresenceColorExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div className={rootClass}>
       <Stack horizontal>
diff --git a/packages/react-examples/src/react/Persona/Persona.UnknownPersona.Example.tsx b/packages/react-examples/src/react/Persona/Persona.UnknownPersona.Example.tsx
index 895f5cc1ed28e..e7987387cd91a 100644
--- a/packages/react-examples/src/react/Persona/Persona.UnknownPersona.Example.tsx
+++ b/packages/react-examples/src/react/Persona/Persona.UnknownPersona.Example.tsx
@@ -3,7 +3,7 @@ import { Persona, PersonaSize } from '@fluentui/react/lib/Persona';
 import { Stack } from '@fluentui/react/lib/Stack';
 import { TestImages } from '@fluentui/example-data';
 
-export const UnknownPersonaExample: React.FunctionComponent = () => {
+export const UnknownPersonaExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={{ childrenGap: 10 }}>
       <Persona
diff --git a/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx b/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx
index 80fa222eb0a51..26b33d69cf665 100644
--- a/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx
+++ b/packages/react-examples/src/react/Pickers/Picker.CustomResult.Example.tsx
@@ -370,7 +370,7 @@ const onFilterChanged = (filterText: string, items?: IFullDocumentCardProps[]):
     : [];
 };
 
-export const PickerCustomResultExample: React.FunctionComponent = () => {
+export const PickerCustomResultExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isPickerDisabled, { toggle: toggleIsPickerDisabled }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx b/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx
index 679aa9ef9ca7c..8d285ea1925d8 100644
--- a/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Pickers/TagPicker.Basic.Example.tsx
@@ -60,7 +60,7 @@ const filterSelectedTags = (filterText: string, tagList: ITag[]): ITag[] => {
 
 const getTextFromItem = (item: ITag) => item.name;
 
-export const TagPickerBasicExample: React.FunctionComponent = () => {
+export const TagPickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // All pickers extend from BasePicker specifying the item type.
   const picker = React.useRef<IBasePicker<ITag>>(null);
   const [tagPicker, { toggle: toggleIsTagPickerVisible }] = useBoolean(false);
diff --git a/packages/react-examples/src/react/Pickers/TagPicker.CustomRemoveIcon.Example.tsx b/packages/react-examples/src/react/Pickers/TagPicker.CustomRemoveIcon.Example.tsx
index a915e45fe1f2a..ad10d733cb809 100644
--- a/packages/react-examples/src/react/Pickers/TagPicker.CustomRemoveIcon.Example.tsx
+++ b/packages/react-examples/src/react/Pickers/TagPicker.CustomRemoveIcon.Example.tsx
@@ -48,7 +48,7 @@ const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
 
 const getTextFromItem = (item: ITag) => item.name;
 
-export const TagPickerCustomRemoveIconExample: React.FunctionComponent = () => {
+export const TagPickerCustomRemoveIconExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const pickerId = useId('custom-icon-picker');
 
   return (
diff --git a/packages/react-examples/src/react/Pickers/TagPicker.Inline.Example.tsx b/packages/react-examples/src/react/Pickers/TagPicker.Inline.Example.tsx
index 3b07c04e37a82..9d567dc683a30 100644
--- a/packages/react-examples/src/react/Pickers/TagPicker.Inline.Example.tsx
+++ b/packages/react-examples/src/react/Pickers/TagPicker.Inline.Example.tsx
@@ -48,7 +48,7 @@ const filterSuggestedTags = (filterText: string, tagList: ITag[]): ITag[] => {
 
 const getTextFromItem = (item: ITag) => item.name;
 
-export const TagPickerInlineExample: React.FunctionComponent = () => {
+export const TagPickerInlineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const pickerId = useId('inline-picker');
 
   return (
diff --git a/packages/react-examples/src/react/Pickers/TagPicker.Wrapped.Example.tsx b/packages/react-examples/src/react/Pickers/TagPicker.Wrapped.Example.tsx
index 0e499f2e6d77e..ea71b3e4e3ea4 100644
--- a/packages/react-examples/src/react/Pickers/TagPicker.Wrapped.Example.tsx
+++ b/packages/react-examples/src/react/Pickers/TagPicker.Wrapped.Example.tsx
@@ -51,7 +51,7 @@ const onRenderSuggestionItem = (props: ITag) => {
   return <TagItemSuggestion styles={tagStyles}>{props.name}</TagItemSuggestion>;
 };
 
-export const TagPickerWrappedExample: React.FunctionComponent = () => {
+export const TagPickerWrappedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const pickerId = useId('wrapped-picker');
   const picker = React.useRef<IBasePicker<ITag>>(null);
 
diff --git a/packages/react-examples/src/react/Pivot/Pivot.AlwaysRender.Example.tsx b/packages/react-examples/src/react/Pivot/Pivot.AlwaysRender.Example.tsx
index 7f7678da15552..8b3546747e738 100644
--- a/packages/react-examples/src/react/Pivot/Pivot.AlwaysRender.Example.tsx
+++ b/packages/react-examples/src/react/Pivot/Pivot.AlwaysRender.Example.tsx
@@ -3,7 +3,7 @@ import { Pivot, PivotItem } from '@fluentui/react/lib/Pivot';
 import { Toggle } from '@fluentui/react/lib/Toggle';
 import { useBoolean } from '@fluentui/react-hooks';
 
-const ExpensiveToMount: React.FC = () => {
+const ExpensiveToMount: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
     setTimeout(() => {
@@ -13,7 +13,7 @@ const ExpensiveToMount: React.FC = () => {
   return <div>{mounted ? 'Rendered' : 'Mounting...'}</div>;
 };
 
-export const PivotRenderActiveOnlyExample: React.FC = () => {
+export const PivotRenderActiveOnlyExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [alwaysRender, { toggle: toggleActiveOnly }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/Pivot/Pivot.Basic.Example.tsx b/packages/react-examples/src/react/Pivot/Pivot.Basic.Example.tsx
index 01c726879abe5..3fe8e817f2f50 100644
--- a/packages/react-examples/src/react/Pivot/Pivot.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Pivot/Pivot.Basic.Example.tsx
@@ -5,7 +5,7 @@ const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
   root: { marginTop: 10 },
 };
 
-export const PivotBasicExample: React.FunctionComponent = () => {
+export const PivotBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Pivot aria-label="Basic Pivot Example">
       <PivotItem
diff --git a/packages/react-examples/src/react/Pivot/Pivot.IconCount.Example.tsx b/packages/react-examples/src/react/Pivot/Pivot.IconCount.Example.tsx
index 9fbaaa4574d16..ce97c3ea2ac57 100644
--- a/packages/react-examples/src/react/Pivot/Pivot.IconCount.Example.tsx
+++ b/packages/react-examples/src/react/Pivot/Pivot.IconCount.Example.tsx
@@ -5,7 +5,7 @@ const labelStyles: Partial<IStyleSet<ILabelStyles>> = {
   root: { marginTop: 10 },
 };
 
-export const PivotIconCountExample: React.FunctionComponent = () => {
+export const PivotIconCountExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       <Pivot aria-label="Count and Icon Pivot Example">
diff --git a/packages/react-examples/src/react/Pivot/Pivot.OverflowMenu.Example.tsx b/packages/react-examples/src/react/Pivot/Pivot.OverflowMenu.Example.tsx
index 006b89f2bd3e7..0bae39a29122a 100644
--- a/packages/react-examples/src/react/Pivot/Pivot.OverflowMenu.Example.tsx
+++ b/packages/react-examples/src/react/Pivot/Pivot.OverflowMenu.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Fabric, Icon, Label, Pivot, IPivotItemProps, PivotItem, Toggle } from '@fluentui/react';
 import { useBoolean } from '@fluentui/react-hooks';
 
-export const PivotOverflowMenuExample: React.FunctionComponent = () => {
+export const PivotOverflowMenuExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [overflow, { toggle: toggleOverflow }] = useBoolean(true);
   const [tabs, { toggle: toggleTabs }] = useBoolean(false);
   const [rtl, { toggle: toggleRtl }] = useBoolean(false);
diff --git a/packages/react-examples/src/react/Popup/Popup.Modal.Example.tsx b/packages/react-examples/src/react/Popup/Popup.Modal.Example.tsx
index 0dc0011801bcf..92151f9a7c876 100644
--- a/packages/react-examples/src/react/Popup/Popup.Modal.Example.tsx
+++ b/packages/react-examples/src/react/Popup/Popup.Modal.Example.tsx
@@ -22,7 +22,7 @@ const popupStyles = mergeStyleSets({
   },
 });
 
-export const PopupModalExample: React.FunctionComponent = () => {
+export const PopupModalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isPopupVisible, { setTrue: showPopup, setFalse: hidePopup }] = useBoolean(false);
   return (
     <>
diff --git a/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Basic.Example.tsx b/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Basic.Example.tsx
index 2a596313f8dc0..dbf0ab03d3134 100644
--- a/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Basic.Example.tsx
@@ -4,7 +4,7 @@ import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator';
 const intervalDelay = 100;
 const intervalIncrement = 0.01;
 
-export const ProgressIndicatorBasicExample: React.FunctionComponent = () => {
+export const ProgressIndicatorBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [percentComplete, setPercentComplete] = React.useState(0);
 
   React.useEffect(() => {
diff --git a/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Indeterminate.Example.tsx b/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Indeterminate.Example.tsx
index fdf4839f6c007..e79b3ee1dda92 100644
--- a/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Indeterminate.Example.tsx
+++ b/packages/react-examples/src/react/ProgressIndicator/ProgressIndicator.Indeterminate.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ProgressIndicator } from '@fluentui/react/lib/ProgressIndicator';
 
-export const ProgressIndicatorIndeterminateExample: React.FunctionComponent = () => (
+export const ProgressIndicatorIndeterminateExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <ProgressIndicator label="Example title" description="Example description" />
 );
diff --git a/packages/react-examples/src/react/Rating/Rating.Basic.Example.tsx b/packages/react-examples/src/react/Rating/Rating.Basic.Example.tsx
index 7c58ac2822f6b..aa6f559c346cd 100644
--- a/packages/react-examples/src/react/Rating/Rating.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Rating/Rating.Basic.Example.tsx
@@ -7,7 +7,7 @@ const getRatingComponentAriaLabel =
     return `${label} rating value is ${rating} of ${maxRating}`;
   };
 
-export const RatingBasicExample: React.FunctionComponent = () => {
+export const RatingBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       Large stars:
diff --git a/packages/react-examples/src/react/Rating/Rating.ButtonControlled.Example.tsx b/packages/react-examples/src/react/Rating/Rating.ButtonControlled.Example.tsx
index 1e1fa8d2c48fe..e8eca4c7345f4 100644
--- a/packages/react-examples/src/react/Rating/Rating.ButtonControlled.Example.tsx
+++ b/packages/react-examples/src/react/Rating/Rating.ButtonControlled.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Rating } from '@fluentui/react';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
 
-export const RatingButtonControlledExample: React.FunctionComponent = () => {
+export const RatingButtonControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [currentRating, setCurrentRating] = React.useState(5);
   const currentRatingToggle = React.useCallback(() => {
     setCurrentRating(oldRating => (oldRating === 0 ? 5 : 0));
diff --git a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.FlexBox.Example.tsx b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.FlexBox.Example.tsx
index fd31f4ad34871..756fcec095a79 100644
--- a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.FlexBox.Example.tsx
+++ b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.FlexBox.Example.tsx
@@ -34,9 +34,9 @@ interface ILeftRightBoxSetProps {
   cacheKey: string;
 }
 
-const BoxWithLabel: React.FunctionComponent<IBoxWithLabelProps> = (props: IBoxWithLabelProps) => (
-  <div className={getNumberedBoxClassName(props.backgroundColor)}>{props.label}</div>
-);
+const BoxWithLabel: React.FunctionComponent<React.PropsWithChildren<IBoxWithLabelProps>> = (
+  props: IBoxWithLabelProps,
+) => <div className={getNumberedBoxClassName(props.backgroundColor)}>{props.label}</div>;
 
 function renderBoxWithLabels(count: number, backgroundColor: string): JSX.Element[] {
   const result: JSX.Element[] = [];
@@ -46,7 +46,9 @@ function renderBoxWithLabels(count: number, backgroundColor: string): JSX.Elemen
   return result;
 }
 
-const LeftRightBoxSet: React.FunctionComponent<ILeftRightBoxSetProps> = (props: ILeftRightBoxSetProps) => (
+const LeftRightBoxSet: React.FunctionComponent<React.PropsWithChildren<ILeftRightBoxSetProps>> = (
+  props: ILeftRightBoxSetProps,
+) => (
   <div className={leftRightBoxClassName}>
     <div>{renderBoxWithLabels(props.leftCount, 'orange')}</div>
     <div>{renderBoxWithLabels(props.rightCount, 'green')}</div>
@@ -69,7 +71,7 @@ function onReduceData(props: ILeftRightBoxSetProps): ILeftRightBoxSetProps | und
   return { ...result, cacheKey: `${result.leftCount + result.rightCount}` };
 }
 
-export const FlexBoxResizeGroupExample: React.FunctionComponent<{}> = () => {
+export const FlexBoxResizeGroupExample: React.FunctionComponent<React.PropsWithChildren<{}>> = () => {
   const data: ILeftRightBoxSetProps = { leftCount: 5, rightCount: 5, cacheKey: '10' };
   return (
     <ResizeGroup
diff --git a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx
index d52b1263c42c9..2c65985706d33 100644
--- a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx
+++ b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx
@@ -45,7 +45,7 @@ const generateData = (count: number, cachingEnabled: boolean, checked: boolean):
       key: `item${index}`,
       name: `Item ${index}`,
       icon: icons[index % icons.length],
-      checked: checked,
+      checked,
     };
     cacheKey = cacheKey + item.key;
     dataItems.push(item);
@@ -73,7 +73,7 @@ const onRenderItem = (item: any) => (
   />
 );
 
-export const ResizeGroupOverflowSetExample: React.FunctionComponent = () => {
+export const ResizeGroupOverflowSetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [numberOfItems, setNumberOfItems] = React.useState(20);
   const [buttonsChecked, { toggle: toggleButtonsChecked }] = useBoolean(false);
   const [cachingEnabled, { toggle: toggleCachingEnabled }] = useBoolean(false);
diff --git a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx
index cecc95315eb2a..899a3659ff1c7 100644
--- a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx
+++ b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx
@@ -24,7 +24,7 @@ const generateData = (count: number, cachingEnabled: boolean, checked: boolean):
       key: `item${index}`,
       name: `Item ${index}`,
       icon: icons[index % icons.length],
-      checked: checked,
+      checked,
     };
   });
   let result: IOverflowData = {
@@ -86,7 +86,7 @@ const onReduceData = (currentData: any): any => {
   return { primary, overflow };
 };
 
-export const ResizeGroupVerticalOverflowSetExample: React.FunctionComponent = () => (
+export const ResizeGroupVerticalOverflowSetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <ResizeGroup
     className={resizeRootClassName}
     role="tabpanel"
diff --git a/packages/react-examples/src/react/ScrollablePane/ScrollablePane.Default.Example.tsx b/packages/react-examples/src/react/ScrollablePane/ScrollablePane.Default.Example.tsx
index 05693eda7ade3..2b6249db0ff92 100644
--- a/packages/react-examples/src/react/ScrollablePane/ScrollablePane.Default.Example.tsx
+++ b/packages/react-examples/src/react/ScrollablePane/ScrollablePane.Default.Example.tsx
@@ -54,7 +54,7 @@ const createContentArea = (item: IScrollablePaneExampleItem) => (
   </div>
 );
 const contentAreas = items.map(createContentArea);
-export const ScrollablePaneDefaultExample: React.FunctionComponent = () => (
+export const ScrollablePaneDefaultExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <div className={classNames.wrapper}>
     <ScrollablePane
       scrollContainerFocus={true}
diff --git a/packages/react-examples/src/react/ScrollablePane/ScrollablePane.DetailsList.Example.tsx b/packages/react-examples/src/react/ScrollablePane/ScrollablePane.DetailsList.Example.tsx
index 9114064edd491..91a5fbf7a03e9 100644
--- a/packages/react-examples/src/react/ScrollablePane/ScrollablePane.DetailsList.Example.tsx
+++ b/packages/react-examples/src/react/ScrollablePane/ScrollablePane.DetailsList.Example.tsx
@@ -135,7 +135,7 @@ const onRenderDetailsFooter: IRenderFunction<IDetailsFooterProps> = (props, defa
   );
 };
 
-export const ScrollablePaneDetailsListExample: React.FunctionComponent = () => {
+export const ScrollablePaneDetailsListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const focusZoneProps = {
     className: classNames.focusZone,
     'data-is-scrollable': 'true',
diff --git a/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx b/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx
index df024117ea942..5a8060fe4df33 100644
--- a/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx
+++ b/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Basic.Example.tsx
@@ -17,7 +17,7 @@ const onCopyItems = (items: IExtendedPersonaProps[]): string => {
   return items.map((item: IExtendedPersonaProps) => item.text).join(', ');
 };
 
-export const SelectedPeopleListBasicExample: React.FunctionComponent = () => {
+export const SelectedPeopleListBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [nextPersonIndex, setNextPersonIndex] = React.useState(0);
   const selectionList = React.useRef<SelectedPeopleList>(null);
   const onExpandItem = (item: IExtendedPersonaProps): void => {
diff --git a/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Controlled.Example.tsx b/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Controlled.Example.tsx
index 5f143745ddfa8..b454fb0bc7926 100644
--- a/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/SelectedPeopleList/SelectedPeopleList.Controlled.Example.tsx
@@ -18,7 +18,7 @@ const onCopyItems = (items: IExtendedPersonaProps[]): string => {
   return items.map((item: IExtendedPersonaProps) => item.text).join(', ');
 };
 
-export const SelectedPeopleListControlledExample: React.FunctionComponent = () => {
+export const SelectedPeopleListControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [nextPersonIndex, setNextPersonIndex] = React.useState(0);
   const [currentSelectedItems, setCurrentSelectedItems] = React.useState<IExtendedPersonaProps[]>([people[40]]);
   const selectionList = React.useRef<SelectedPeopleList>(null);
diff --git a/packages/react-examples/src/react/Selection/Selection.Basic.Example.tsx b/packages/react-examples/src/react/Selection/Selection.Basic.Example.tsx
index 9d83c0571245b..3b8c57c3d655c 100644
--- a/packages/react-examples/src/react/Selection/Selection.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Selection/Selection.Basic.Example.tsx
@@ -62,7 +62,7 @@ const selectableItemTypes = {
 
 const ITEM_COUNT = 100;
 
-const SelectionItemExample: React.FunctionComponent<ISelectionItemExampleProps> = (
+const SelectionItemExample: React.FunctionComponent<React.PropsWithChildren<ISelectionItemExampleProps>> = (
   props: ISelectionItemExampleProps,
 ) => {
   const { item, itemIndex, selection } = props;
@@ -90,7 +90,7 @@ const SelectionItemExample: React.FunctionComponent<ISelectionItemExampleProps>
   );
 };
 
-export const SelectionBasicExample: React.FunctionComponent = () => {
+export const SelectionBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [selectableItemType, setSelectableItemType] = React.useState<'all' | 'vowels'>('all');
   const [selectionMode, setSelectionMode] = React.useState(SelectionMode.multiple);
   const forceUpdate = useForceUpdate();
diff --git a/packages/react-examples/src/react/Separator/Separator.Basic.Example.tsx b/packages/react-examples/src/react/Separator/Separator.Basic.Example.tsx
index 0d1dd7fa9aada..32284bd32eecc 100644
--- a/packages/react-examples/src/react/Separator/Separator.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Separator/Separator.Basic.Example.tsx
@@ -32,7 +32,7 @@ const verticalStyle = mergeStyles({
 
 const content = 'Today';
 
-export const SeparatorBasicExample: React.FC = () => (
+export const SeparatorBasicExample: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Stack tokens={stackTokens}>
     <HorizontalSeparatorStack>
       <>
diff --git a/packages/react-examples/src/react/Separator/Separator.Icon.Example.tsx b/packages/react-examples/src/react/Separator/Separator.Icon.Example.tsx
index c99bc8564f01a..42dfde5664c1c 100644
--- a/packages/react-examples/src/react/Separator/Separator.Icon.Example.tsx
+++ b/packages/react-examples/src/react/Separator/Separator.Icon.Example.tsx
@@ -14,7 +14,7 @@ const iconStyles: IIconStyles = {
 
 const stackTokens: IStackTokens = { childrenGap: 12 };
 
-export const SeparatorIconExample: React.FC = () => (
+export const SeparatorIconExample: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Stack tokens={stackTokens}>
     <Text>Horizontal center aligned with an icon as content</Text>
     <Separator>
diff --git a/packages/react-examples/src/react/Separator/Separator.Theming.Example.tsx b/packages/react-examples/src/react/Separator/Separator.Theming.Example.tsx
index ec2dc8b0ac6a6..7b3d0940e2794 100644
--- a/packages/react-examples/src/react/Separator/Separator.Theming.Example.tsx
+++ b/packages/react-examples/src/react/Separator/Separator.Theming.Example.tsx
@@ -15,7 +15,7 @@ const theme: ITheme = createTheme({
 
 const stackTokens: IStackTokens = { childrenGap: 12 };
 
-export const SeparatorThemingExample: React.FC = () => (
+export const SeparatorThemingExample: React.FC<React.PropsWithChildren<unknown>> = () => (
   <Stack tokens={stackTokens}>
     <Text>Horizontal center aligned with custom theme</Text>
     <Separator theme={theme}>Today</Separator>
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ActivityItem.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ActivityItem.Example.tsx
index d87fa0d2c6741..e32e1b2791c61 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ActivityItem.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ActivityItem.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ActivityItemBasicExample } from '../ActivityItem/ActivityItem.Basic.Example';
 import { Shadow } from './ShadowHelper';
 
-export const ShadowDOMActivityItemExample: React.FunctionComponent = () => {
+export const ShadowDOMActivityItemExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ActivityItemBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Announced.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Announced.Example.tsx
index 004a1088225ed..00e18e8f3c409 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Announced.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Announced.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { AnnouncedLazyLoadingExample } from '../Announced/Announced.LazyLoading.Example';
 
-export const ShadowDOMAnnouncedExample: React.FunctionComponent = () => {
+export const ShadowDOMAnnouncedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <AnnouncedLazyLoadingExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Breadcrumb.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Breadcrumb.Example.tsx
index 3cf96276345dc..8a47e9fc13e07 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Breadcrumb.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Breadcrumb.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { BreadcrumbBasicExample } from '../Breadcrumb/Breadcrumb.Basic.Example';
 
-export const ShadowDOMBreadcrumbExample: React.FunctionComponent = () => {
+export const ShadowDOMBreadcrumbExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <BreadcrumbBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Button.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Button.Example.tsx
index 67fdb03092ad6..d5d95850d46d7 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Button.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Button.Example.tsx
@@ -12,7 +12,7 @@ import { ButtonIconExample } from '../Button/Button.Icon.Example';
 import { ButtonToggleExample } from '../Button/Button.Toggle.Example';
 import { Checkbox } from '@fluentui/react';
 
-export const ShadowDOMButtonExample: React.FunctionComponent = () => {
+export const ShadowDOMButtonExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [disabled, setDisabled] = React.useState(false);
 
   const onChange = () => {
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Calendar.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Calendar.Example.tsx
index 08dc588d483d7..b5bca53d12221 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Calendar.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Calendar.Example.tsx
@@ -3,7 +3,7 @@ import { Shadow } from './ShadowHelper';
 import { CalendarButtonExample } from '../Calendar/Calendar.Button.Example';
 import { CalendarInlineExample } from '../Calendar/Calendar.Inline.Example';
 
-export const ShadowDOMCalendarExample: React.FunctionComponent = () => {
+export const ShadowDOMCalendarExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <CalendarButtonExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Checkbox.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Checkbox.Example.tsx
index f6464b5c2a135..b4431cb1a3173 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Checkbox.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Checkbox.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { CheckboxBasicExample } from '../Checkbox/Checkbox.Basic.Example';
 
-export const ShadowDOMCheckboxExample: React.FunctionComponent = () => {
+export const ShadowDOMCheckboxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <CheckboxBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ChoiceGroup.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ChoiceGroup.Example.tsx
index d19fcd1ee1355..26702b7be69f6 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ChoiceGroup.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ChoiceGroup.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ChoiceGroupBasicExample } from '../ChoiceGroup/ChoiceGroup.Basic.Example';
 
-export const ShadowDOMChoiceGroupExample: React.FunctionComponent = () => {
+export const ShadowDOMChoiceGroupExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ChoiceGroupBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Coachmark.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Coachmark.Example.tsx
index 51843233fdea6..fa184401ed7a3 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Coachmark.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Coachmark.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { CoachmarkBasicExample } from '../Coachmark/Coachmark.Basic.Example';
 
-export const ShadowDOMCoachmarkExample: React.FunctionComponent = () => {
+export const ShadowDOMCoachmarkExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <CoachmarkBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ColorPicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ColorPicker.Example.tsx
index f84d1413d6370..1361c7785dcb2 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ColorPicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ColorPicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ColorPickerBasicExample } from '../ColorPicker/ColorPicker.Basic.Example';
 
-export const ShadowDOMColorPickerExample: React.FunctionComponent = () => {
+export const ShadowDOMColorPickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ColorPickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ComboBox.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ComboBox.Example.tsx
index 4d2e069213042..2c20b6a21a88c 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ComboBox.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ComboBox.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ComboBoxBasicExample } from '../ComboBox/ComboBox.Basic.Example';
 
-export const ShadowDOMComboBoxExample: React.FunctionComponent = () => {
+export const ShadowDOMComboBoxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ComboBoxBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.CommandBar.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.CommandBar.Example.tsx
index 614ac5de3c718..3b8341fff528b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.CommandBar.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.CommandBar.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { CommandBarBasicExample } from '../CommandBar/CommandBar.Basic.Example';
 
-export const ShadowDOMCommandBarExample: React.FunctionComponent = () => {
+export const ShadowDOMCommandBarExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <CommandBarBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ContextualMenu.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ContextualMenu.Example.tsx
index f56480cc8485c..b133380d01fe6 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ContextualMenu.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ContextualMenu.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ContextualMenuBasicExample } from '../ContextualMenu/ContextualMenu.Basic.Example';
 
-export const ShadowDOMContextualMenuExample: React.FunctionComponent = () => {
+export const ShadowDOMContextualMenuExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ContextualMenuBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DatePicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DatePicker.Example.tsx
index 3810fc0fd3fe9..5317c5a9853ae 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DatePicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DatePicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { DatePickerBasicExample } from '../DatePicker/DatePicker.Basic.Example';
 
-export const ShadowDOMDatePickerExample: React.FunctionComponent = () => {
+export const ShadowDOMDatePickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <DatePickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DetailsList.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DetailsList.Example.tsx
index f70b94b7a23d2..c8c6f8c4457d4 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DetailsList.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DetailsList.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { DetailsListBasicExample } from '../DetailsList/DetailsList.Basic.Example';
 
-export const ShadowDOMDetailsListExample: React.FunctionComponent = () => {
+export const ShadowDOMDetailsListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <DetailsListBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dialog.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dialog.Example.tsx
index bdd4b2ed3177d..2dbebe4e1c17a 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dialog.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dialog.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { DialogBasicExample } from '../Dialog/Dialog.Basic.Example';
 
-export const ShadowDOMDialogExample: React.FunctionComponent = () => {
+export const ShadowDOMDialogExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <DialogBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Divider.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Divider.Example.tsx
index 5462a2614530b..f687c89960f25 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Divider.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Divider.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { VerticalDividerBasicExample } from '../Divider/VerticalDivider.Basic.Example';
 
-export const ShadowDOMVerticalDividerExample: React.FunctionComponent = () => {
+export const ShadowDOMVerticalDividerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <VerticalDividerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DocumentCard.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DocumentCard.Example.tsx
index bbca33e226452..26dfe8fa1d9a4 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DocumentCard.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.DocumentCard.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { DocumentCardBasicExample } from '../DocumentCard/DocumentCard.Basic.Example';
 
-export const ShadowDOMDocumentCardExample: React.FunctionComponent = () => {
+export const ShadowDOMDocumentCardExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <DocumentCardBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dropdown.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dropdown.Example.tsx
index bcae3f23bafdf..caea5c1afd1c8 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dropdown.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Dropdown.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { DropdownBasicExample } from '../Dropdown/Dropdown.Basic.Example';
 
-export const ShadowDOMDropdownExample: React.FunctionComponent = () => {
+export const ShadowDOMDropdownExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <DropdownBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ExtendedPeoplePicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ExtendedPeoplePicker.Example.tsx
index f923ff5f3c7ca..f71b62bc42178 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ExtendedPeoplePicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ExtendedPeoplePicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ExtendedPeoplePickerBasicExample } from '../ExtendedPeoplePicker/ExtendedPeoplePicker.Basic.Example';
 
-export const ShadowDOMExtendedPeoplePickerExample: React.FunctionComponent = () => {
+export const ShadowDOMExtendedPeoplePickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ExtendedPeoplePickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Facepile.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Facepile.Example.tsx
index e45cddc53da87..4381197b3410b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Facepile.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Facepile.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FacepileBasicExample } from '../Facepile/Facepile.Basic.Example';
 
-export const ShadowDOMFacepileExample: React.FunctionComponent = () => {
+export const ShadowDOMFacepileExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FacepileBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FloatingPeoplePicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FloatingPeoplePicker.Example.tsx
index d8fb04122c2c2..84e452e0a200b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FloatingPeoplePicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FloatingPeoplePicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FloatingPeoplePickerTypesExample } from '../FloatingPeoplePicker/FloatingPeoplePicker.Basic.Example';
 
-export const ShadowDOMFloatingPeoplePickerExample: React.FunctionComponent = () => {
+export const ShadowDOMFloatingPeoplePickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FloatingPeoplePickerTypesExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Box.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Box.Example.tsx
index 89c5d56a778da..2385aadb06500 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Box.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Box.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneBoxExample } from '../FocusTrapZone/FocusTrapZone.Box.Example';
 
-export const ShadowDOMFocusTrapZoneBoxExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneBoxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneBoxExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.BoxClick.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.BoxClick.Example.tsx
index f2e3b35f1607a..12ea3260c7acb 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.BoxClick.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.BoxClick.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneBoxClickExample } from '../FocusTrapZone/FocusTrapZone.Box.Click.Example';
 
-export const ShadowDOMFocusTrapZoneBoxClickExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneBoxClickExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneBoxClickExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.ChildShadowDom.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.ChildShadowDom.Example.tsx
index 318c88203dd5a..e17f85110b6fa 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.ChildShadowDom.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.ChildShadowDom.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZone, Toggle } from '@fluentui/react';
 
-export const ShadowDOMFocusTrapZoneChildShadowDomExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneChildShadowDomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [disabled, setDisabled] = React.useState(true);
   const buttonsConstructed = React.useRef(false);
 
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.DialogInPanel.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.DialogInPanel.Example.tsx
index 8fec30a225478..861f41026fe77 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.DialogInPanel.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.DialogInPanel.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneDialogInPanelExample } from '../FocusTrapZone/FocusTrapZone.DialogInPanel.Example';
 
-export const ShadowDOMFocusTrapZoneDialogInPanelExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneDialogInPanelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneDialogInPanelExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusOnCustomElement.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusOnCustomElement.Example.tsx
index aede2623a22b2..10bca15d26d6d 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusOnCustomElement.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusOnCustomElement.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneBoxCustomElementExample } from '../FocusTrapZone/FocusTrapZone.Box.FocusOnCustomElement.Example';
 
-export const ShadowDOMFocusTrapZoneBoxCustomElementExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneBoxCustomElementExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneBoxCustomElementExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusZone.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusZone.Example.tsx
index a6336f8f3e87d..13bd7452640b8 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusZone.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.FocusZone.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneFocusZoneExample } from '../FocusTrapZone/FocusTrapZone.FocusZone.Example';
 
-export const ShadowDOMFocusTrapZoneFocusZoneExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneFocusZoneExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneFocusZoneExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Nested.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Nested.Example.tsx
index adba04df00a0e..d0ea6efe2605d 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Nested.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.Nested.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusTrapZoneNestedExample } from '../FocusTrapZone/FocusTrapZone.Nested.Example';
 
-export const ShadowDOMFocusTrapZoneNestedExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneNestedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusTrapZoneNestedExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.NestedChildShadowDom.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.NestedChildShadowDom.Example.tsx
index 6b9b0cdc4771f..20b2404af8cbb 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.NestedChildShadowDom.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusTrapZone.NestedChildShadowDom.Example.tsx
@@ -7,7 +7,11 @@ type ZoneProps = {
   depth: number;
 };
 
-const Zone: React.FC<ZoneProps> = ({ zoneNumber, depth, children }) => {
+const Zone: React.FC<React.PropsWithChildren<React.PropsWithChildren<ZoneProps>>> = ({
+  zoneNumber,
+  depth,
+  children,
+}) => {
   const [disabled, setDisabled] = React.useState(true);
   const buttonsConstructed = React.useRef(false);
 
@@ -58,7 +62,9 @@ const Zone: React.FC<ZoneProps> = ({ zoneNumber, depth, children }) => {
   );
 };
 
-export const ShadowDOMFocusTrapZoneNestedChildShadowDomExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusTrapZoneNestedChildShadowDomExample: React.FunctionComponent<
+  React.PropsWithChildren<unknown>
+> = () => {
   return (
     <Shadow>
       <Zone zoneNumber={1} depth={0}>
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Disabled.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Disabled.Example.tsx
index 75c5a0ceaecea..239bb4da1ea02 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Disabled.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Disabled.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZoneDisabledExample } from '../../react-focus/FocusZone/FocusZone.Disabled.Example';
 
-export const ShadowDOMFocusZoneDisabledExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZoneDisabledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusZoneDisabledExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenu.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenu.Example.tsx
index 447f786efa2cb..b4fec28da78cc 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenu.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenu.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZoneHorizontalMenuExample } from '../../react-focus/FocusZone/FocusZone.HorizontalMenu.Example';
 
-export const ShadowDOMFocusZoneHorizontalMenuExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZoneHorizontalMenuExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusZoneHorizontalMenuExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenuShadowDom.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenuShadowDom.Example.tsx
index bd9b8f5b2b5ba..615284a3cc6df 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenuShadowDom.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.HorizontalMenuShadowDom.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
 
-export const ShadowDOMFocusZoneHorizontalMenuShadowDomExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZoneHorizontalMenuShadowDomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonsConstructed = React.useRef(false);
 
   const setRef = (node: HTMLElement | null) => {
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.List.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.List.Example.tsx
index 5a5463608ec2b..3723a33aed9b8 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.List.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.List.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZoneListExample } from '../../react-focus/FocusZone/FocusZone.List.Example';
 
-export const ShadowDOMFocusZoneListExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZoneListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusZoneListExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Photos.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Photos.Example.tsx
index 08a0647b04e9a..01ce57d137c01 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Photos.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Photos.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZonePhotosExample } from '../../react-focus/FocusZone/FocusZone.Photos.Example';
 
-export const ShadowDOMFocusZonePhotosExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZonePhotosExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusZonePhotosExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Tabbable.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Tabbable.Example.tsx
index f1ddacd6f9dfd..78e5378b49253 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Tabbable.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.FocusZone.Tabbable.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FocusZoneTabbableExample } from '../../react-focus/FocusZone/FocusZone.Tabbable.Example';
 
-export const ShadowDOMFocusZoneTabbableExample: React.FunctionComponent = () => {
+export const ShadowDOMFocusZoneTabbableExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FocusZoneTabbableExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.GroupedList.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.GroupedList.Example.tsx
index 2f7ca8dc61a88..b5139f6474e14 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.GroupedList.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.GroupedList.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { GroupedListBasicExample } from '../GroupedList/GroupedList.Basic.Example';
 
-export const ShadowDOMGroupedListExample: React.FunctionComponent = () => {
+export const ShadowDOMGroupedListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <GroupedListBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.HoverCard.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.HoverCard.Example.tsx
index f6a6ff78d75c7..f9ea0672882f5 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.HoverCard.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.HoverCard.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { HoverCardBasicExample } from '../HoverCard/HoverCard.Basic.Example';
 
-export const ShadowDOMHoverCardExample: React.FunctionComponent = () => {
+export const ShadowDOMHoverCardExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <HoverCardBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Icon.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Icon.Example.tsx
index e3d920e4a9263..7dbcf008307e8 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Icon.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Icon.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { IconBasicExample } from '../Icon/Icon.Basic.Example';
 
-export const ShadowDOMIconExample: React.FunctionComponent = () => {
+export const ShadowDOMIconExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <IconBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Image.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Image.Example.tsx
index 91488a42086ce..0472e73329160 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Image.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Image.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ImageDefaultExample } from '../Image/Image.Default.Example';
 
-export const ShadowDOMImageExample: React.FunctionComponent = () => {
+export const ShadowDOMImageExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ImageDefaultExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Keytip.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Keytip.Example.tsx
index c8379cb54defe..eb82b65d30022 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Keytip.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Keytip.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { KeytipsBasicExample } from '../Keytip/Keytips.Basic.Example';
 
-export const ShadowDOMKeytipExample: React.FunctionComponent = () => {
+export const ShadowDOMKeytipExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <KeytipsBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Label.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Label.Example.tsx
index 2c4b2cfbf4691..6f7d2f626c345 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Label.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Label.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { LabelBasicExample } from '../Label/Label.Basic.Example';
 
-export const ShadowDOMLabelExample: React.FunctionComponent = () => {
+export const ShadowDOMLabelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <LabelBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Layer.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Layer.Example.tsx
index 3f2fa756d7d62..ba883f8c8255a 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Layer.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Layer.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { LayerBasicExample } from '../Layer/Layer.Basic.Example';
 
-export const ShadowDOMLayerExample: React.FunctionComponent = () => {
+export const ShadowDOMLayerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <LayerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Link.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Link.Example.tsx
index fb7428d382fd5..1d50cf4b3f4a7 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Link.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Link.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { LinkBasicExample } from '../Link/Link.Basic.Example';
 
-export const ShadowDOMLinkExample: React.FunctionComponent = () => {
+export const ShadowDOMLinkExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <LinkBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.List.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.List.Example.tsx
index 06acbcdd4adbe..295292608a4f2 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.List.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.List.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ListBasicExample } from '../List/List.Basic.Example';
 
-export const ShadowDOMListExample: React.FunctionComponent = () => {
+export const ShadowDOMListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ListBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MarqueeSelection.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MarqueeSelection.Example.tsx
index c3ad31530dd6a..8b4bcb9af52f9 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MarqueeSelection.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MarqueeSelection.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { MarqueeSelectionBasicExample } from '../MarqueeSelection/MarqueeSelection.Basic.Example';
 
-export const ShadowDOMMarqueeSelectionExample: React.FunctionComponent = () => {
+export const ShadowDOMMarqueeSelectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <MarqueeSelectionBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MessageBar.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MessageBar.Example.tsx
index f0c6dbe9749d0..8a2c458fe37f5 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MessageBar.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.MessageBar.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { MessageBarBasicExample } from '../MessageBar/MessageBar.Basic.Example';
 
-export const ShadowDOMMessageBarExample: React.FunctionComponent = () => {
+export const ShadowDOMMessageBarExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <MessageBarBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Modal.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Modal.Example.tsx
index ad02c6c3040c7..df454e1dab8d3 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Modal.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Modal.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ModalBasicExample } from '../Modal/Modal.Basic.Example';
 
-export const ShadowDOMModalExample: React.FunctionComponent = () => {
+export const ShadowDOMModalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ModalBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Nav.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Nav.Example.tsx
index b9433adc37143..b4b16a1851171 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Nav.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Nav.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { NavBasicExample } from '../Nav/Nav.Basic.Example';
 
-export const ShadowDOMNavExample: React.FunctionComponent = () => {
+export const ShadowDOMNavExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <NavBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.OverflowSet.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.OverflowSet.Example.tsx
index 79d4c055a1e94..4fc69a65b30e9 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.OverflowSet.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.OverflowSet.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { OverflowSetBasicExample } from '../OverflowSet/OverflowSet.Basic.Example';
 
-export const ShadowDOMOverflowSetExample: React.FunctionComponent = () => {
+export const ShadowDOMOverflowSetExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <OverflowSetBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Overlay.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Overlay.Example.tsx
index 812e0e1fc6153..02f7155e67e0d 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Overlay.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Overlay.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { OverlayLightExample } from '../Overlay/Overlay.Light.Example';
 
-export const ShadowDOMOverlayExample: React.FunctionComponent = () => {
+export const ShadowDOMOverlayExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <OverlayLightExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Panel.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Panel.Example.tsx
index 7c39ca7976da5..79215aa492d17 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Panel.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Panel.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { PanelBasicExample } from '../Panel/Panel.Basic.Example';
 
-export const ShadowDOMPanelExample: React.FunctionComponent = () => {
+export const ShadowDOMPanelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <PanelBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.PeoplePicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.PeoplePicker.Example.tsx
index 29b4e5dafd17d..f3ee76f5e0709 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.PeoplePicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.PeoplePicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { PeoplePickerNormalExample } from '../PeoplePicker/PeoplePicker.Normal.Example';
 
-export const ShadowDOMPeoplePickerExample: React.FunctionComponent = () => {
+export const ShadowDOMPeoplePickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <PeoplePickerNormalExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Persona.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Persona.Example.tsx
index f2b79704dfaf7..b8d76d43738e9 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Persona.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Persona.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { PersonaBasicExample } from '../Persona/Persona.Basic.Example';
 
-export const ShadowDOMPersonaExample: React.FunctionComponent = () => {
+export const ShadowDOMPersonaExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <PersonaBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pickers.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pickers.Example.tsx
index c7e3a5043755c..9c58d21d3c734 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pickers.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pickers.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TagPickerBasicExample } from '../Pickers/TagPicker.Basic.Example';
 
-export const ShadowDOMPickersExample: React.FunctionComponent = () => {
+export const ShadowDOMPickersExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TagPickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pivot.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pivot.Example.tsx
index c58d03b99f49a..c501eb7b30310 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pivot.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Pivot.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { PivotBasicExample } from '../Pivot/Pivot.Basic.Example';
 
-export const ShadowDOMPivotExample: React.FunctionComponent = () => {
+export const ShadowDOMPivotExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <PivotBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Popup.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Popup.Example.tsx
index 5412501114ea1..4dcffe1d296f7 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Popup.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Popup.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { PopupBasicExample } from '../Popup/Popup.Basic.Example';
 
-export const ShadowDOMPopupExample: React.FunctionComponent = () => {
+export const ShadowDOMPopupExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <PopupBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ProgressIndicator.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ProgressIndicator.Example.tsx
index 68e8683aad5f0..444e048a5d6f1 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ProgressIndicator.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ProgressIndicator.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ProgressIndicatorBasicExample } from '../ProgressIndicator/ProgressIndicator.Basic.Example';
 
-export const ShadowDOMProgressIndicatorExample: React.FunctionComponent = () => {
+export const ShadowDOMProgressIndicatorExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ProgressIndicatorBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Rating.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Rating.Example.tsx
index 4ae43b6deb883..4d093aa811d3a 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Rating.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Rating.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { RatingBasicExample } from '../Rating/Rating.Basic.Example';
 
-export const ShadowDOMRatingExample: React.FunctionComponent = () => {
+export const ShadowDOMRatingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <RatingBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ResizeGroup.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ResizeGroup.Example.tsx
index 032cece45d513..1235cc57701c4 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ResizeGroup.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ResizeGroup.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { FlexBoxResizeGroupExample } from '../ResizeGroup/ResizeGroup.FlexBox.Example';
 
-export const ShadowDOMResizeGroupExample: React.FunctionComponent = () => {
+export const ShadowDOMResizeGroupExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <FlexBoxResizeGroupExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ScrollablePane.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ScrollablePane.Example.tsx
index e4cf0d3a97686..bb8da6f873025 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ScrollablePane.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.ScrollablePane.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ScrollablePaneDefaultExample } from '../ScrollablePane/ScrollablePane.Default.Example';
 
-export const ShadowDOMScrollablePaneExample: React.FunctionComponent = () => {
+export const ShadowDOMScrollablePaneExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ScrollablePaneDefaultExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SearchBox.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SearchBox.Example.tsx
index 856ffe1ef3713..934f88e402a26 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SearchBox.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SearchBox.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SearchBoxFullSizeExample } from '../SearchBox/SearchBox.FullSize.Example';
 
-export const ShadowDOMSearchBoxExample: React.FunctionComponent = () => {
+export const ShadowDOMSearchBoxExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SearchBoxFullSizeExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SelectedPeopleList.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SelectedPeopleList.Example.tsx
index 08a4a8bb2958d..8b06d5dae182b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SelectedPeopleList.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SelectedPeopleList.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SelectedPeopleListBasicExample } from '../SelectedPeopleList/SelectedPeopleList.Basic.Example';
 
-export const ShadowDOMSelectedPeopleListExample: React.FunctionComponent = () => {
+export const ShadowDOMSelectedPeopleListExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SelectedPeopleListBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Selection.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Selection.Example.tsx
index afcaff18ef420..5be81522362c1 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Selection.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Selection.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SelectionBasicExample } from '../Selection/Selection.Basic.Example';
 
-export const ShadowDOMSelectionExample: React.FunctionComponent = () => {
+export const ShadowDOMSelectionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SelectionBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Separator.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Separator.Example.tsx
index 1d344a17d9172..fed4796575f70 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Separator.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Separator.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SeparatorBasicExample } from '../Separator/Separator.Basic.Example';
 
-export const ShadowDOMSeparatorExample: React.FunctionComponent = () => {
+export const ShadowDOMSeparatorExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SeparatorBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Shimmer.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Shimmer.Example.tsx
index ba3943731dde3..35a5483ff1f4b 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Shimmer.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Shimmer.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ShimmerBasicExample } from '../Shimmer/Shimmer.Basic.Example';
 
-export const ShadowDOMShimmerExample: React.FunctionComponent = () => {
+export const ShadowDOMShimmerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ShimmerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Slider.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Slider.Example.tsx
index 588aa14f84e8c..648195a021a23 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Slider.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Slider.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SliderBasicExample } from '../Slider/Slider.Basic.Example';
 
-export const ShadowDOMSliderExample: React.FunctionComponent = () => {
+export const ShadowDOMSliderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SliderBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SpinButton.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SpinButton.Example.tsx
index cabb4817f52db..b12b7760439ca 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SpinButton.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SpinButton.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SpinButtonBasicExample } from '../SpinButton/SpinButton.Basic.Example';
 
-export const ShadowDOMSpinButtonExample: React.FunctionComponent = () => {
+export const ShadowDOMSpinButtonExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SpinButtonBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Spinner.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Spinner.Example.tsx
index cd6b153c7c0d7..9b0cea21c6dde 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Spinner.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Spinner.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SpinnerBasicExample } from '../Spinner/Spinner.Basic.Example';
 
-export const ShadowDOMSpinnerExample: React.FunctionComponent = () => {
+export const ShadowDOMSpinnerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SpinnerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Stack.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Stack.Example.tsx
index 006bb77e7baf5..1e6e8819496dd 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Stack.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Stack.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { VerticalStackBasicExample } from '../Stack/Stack.Vertical.Basic.Example';
 
-export const ShadowDOMStackExample: React.FunctionComponent = () => {
+export const ShadowDOMStackExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <VerticalStackBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SwatchColorPicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SwatchColorPicker.Example.tsx
index aa78ab3a04efd..769c5015dec26 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SwatchColorPicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.SwatchColorPicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { SwatchColorPickerBasicExample } from '../SwatchColorPicker/SwatchColorPicker.Basic.Example';
 
-export const ShadowDOMSwatchColorPickerExample: React.FunctionComponent = () => {
+export const ShadowDOMSwatchColorPickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <SwatchColorPickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx
index 7de3eddadbeab..a70e1887dd84a 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.ButtonOrder.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleButtonOrderExample } from '../TeachingBubble/TeachingBubble.ButtonOrder.Example';
 
-export const ShadowDOMTeachingBubbleButtonOrderExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleButtonOrderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleButtonOrderExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx
index c18733f9fa47b..33c8a1282b668 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Condensed.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleCondensedExample } from '../TeachingBubble/TeachingBubble.Condensed.Example';
 
-export const ShadowDOMTeachingBubbleCondensedExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleCondensedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleCondensedExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Example.tsx
index 8c109812efc18..4f8a673ea328c 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleBasicExample } from '../TeachingBubble/TeachingBubble.Basic.Example';
 
-export const ShadowDOMTeachingBubbleExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx
index 02e00913b81d6..e8f6d3cbf1858 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Illustration.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleIllustrationExample } from '../TeachingBubble/TeachingBubble.Illustration.Example';
 
-export const ShadowDOMTeachingBubbleIllustrationExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleIllustrationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleIllustrationExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx
index 02563f559ba77..ce9d76a30689d 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.MultiStep.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleMultiStepExample } from '../TeachingBubble/TeachingBubble.MultiStep.Example';
 
-export const ShadowDOMTeachingBubbleMultiStepExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleMultiStepExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleMultiStepExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx
index aab31133a2e27..e18eabe804f10 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.SmallHeadline.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleSmallHeadlineExample } from '../TeachingBubble/TeachingBubble.SmallHeadline.Example';
 
-export const ShadowDOMTeachingBubbleSmallHeadlineExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleSmallHeadlineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleSmallHeadlineExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx
index 46aba3387b370..e84ff777b46ef 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.Wide.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleWideExample } from '../TeachingBubble/TeachingBubble.Wide.Example';
 
-export const ShadowDOMTeachingBubbleWideExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleWideExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleWideExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx
index 262d81a154e2f..54b8a91d624c6 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TeachingBubble.WideIllustration.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TeachingBubbleWideIllustrationExample } from '../TeachingBubble/TeachingBubble.WideIllustration.Example';
 
-export const ShadowDOMTeachingBubbleWideIllustrationExample: React.FunctionComponent = () => {
+export const ShadowDOMTeachingBubbleWideIllustrationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TeachingBubbleWideIllustrationExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Text.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Text.Example.tsx
index fdb44ddf404db..7110938c289aa 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Text.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Text.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TextRampExample } from '../Text/Text.Weights.Example';
 
-export const ShadowDOMTextExample: React.FunctionComponent = () => {
+export const ShadowDOMTextExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TextRampExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TextField.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TextField.Example.tsx
index 15eaeb6b5f8fd..10dad356cd5b8 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TextField.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TextField.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TextFieldBasicExample } from '../TextField/TextField.Basic.Example';
 
-export const ShadowDOMTextFieldExample: React.FunctionComponent = () => {
+export const ShadowDOMTextFieldExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TextFieldBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TimePicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TimePicker.Example.tsx
index 3cd1dc47be4b3..f1c61c137ad88 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TimePicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.TimePicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TimePickerBasicExample } from '../TimePicker/TimePicker.Basic.Example';
 
-export const ShadowDOMTimePickerExample: React.FunctionComponent = () => {
+export const ShadowDOMTimePickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TimePickerBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Toggle.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Toggle.Example.tsx
index b55bec7accef4..12e1d226e84de 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Toggle.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Toggle.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { ToggleBasicExample } from '../Toggle/Toggle.Basic.Example';
 
-export const ShadowDOMToggleExample: React.FunctionComponent = () => {
+export const ShadowDOMToggleExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <ToggleBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Tooltip.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Tooltip.Example.tsx
index 94533d2d31c3c..65d191c870d4c 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Tooltip.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.Tooltip.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { TooltipBasicExample } from '../Tooltip/Tooltip.Basic.Example';
 
-export const ShadowDOMTooltipExample: React.FunctionComponent = () => {
+export const ShadowDOMTooltipExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <TooltipBasicExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.WeeklyDayPicker.Example.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.WeeklyDayPicker.Example.tsx
index 8397cc36b5b46..e0e739c8762e9 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowDOM.WeeklyDayPicker.Example.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowDOM.WeeklyDayPicker.Example.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Shadow } from './ShadowHelper';
 import { WeeklyDayPickerInlineExample } from '../WeeklyDayPicker/WeeklyDayPicker.Inline.Example';
 
-export const ShadowDOMWeeklyDayPickerExample: React.FunctionComponent = () => {
+export const ShadowDOMWeeklyDayPickerExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Shadow>
       <WeeklyDayPickerInlineExample />
diff --git a/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx b/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx
index e47cf461569d5..5ede6fbffc985 100644
--- a/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx
+++ b/packages/react-examples/src/react/ShadowDOM/ShadowHelper.tsx
@@ -6,7 +6,7 @@ export type ShadowProps = {
   window?: Window;
 };
 
-export const Shadow: React.FC<ShadowProps> = ({ window, children }) => {
+export const Shadow: React.FC<React.PropsWithChildren<ShadowProps>> = ({ window, children }) => {
   // This is a ref but we're using state to manage it so we can force
   // a re-render.
   const [shadowRootEl, setShadowRootEl] = React.useState<HTMLElement | null>(null);
diff --git a/packages/react-examples/src/react/Shimmer/Shimmer.Application.Example.tsx b/packages/react-examples/src/react/Shimmer/Shimmer.Application.Example.tsx
index 586e9c2b0754a..29746db85499e 100644
--- a/packages/react-examples/src/react/Shimmer/Shimmer.Application.Example.tsx
+++ b/packages/react-examples/src/react/Shimmer/Shimmer.Application.Example.tsx
@@ -66,7 +66,7 @@ const exampleItems: IExampleItem[] = createListItems(ITEMS_COUNT).map((item: IEx
   return { ...item, thumbnail: randomFileType.url };
 });
 
-export const ShimmerApplicationExample: React.FunctionComponent = () => {
+export const ShimmerApplicationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const { current: state } = React.useRef<IShimmerApplicationExampleState>({
     lastIntervalId: 0,
     visibleCount: 0,
diff --git a/packages/react-examples/src/react/Shimmer/Shimmer.Basic.Example.tsx b/packages/react-examples/src/react/Shimmer/Shimmer.Basic.Example.tsx
index c93b4c2312189..ecb8ebb4d4cbf 100644
--- a/packages/react-examples/src/react/Shimmer/Shimmer.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Shimmer/Shimmer.Basic.Example.tsx
@@ -50,7 +50,7 @@ const shimmerVerticalElement: IShimmerElement[] = [
   { type: ShimmerElementType.line, height: 10, verticalAlign: 'bottom' },
 ];
 
-export const ShimmerBasicExample: React.FunctionComponent = () => {
+export const ShimmerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <ThemeProvider className={wrapperClass}>
       Basic Shimmer with no elements provided. It defaults to a line of 16px height.
diff --git a/packages/react-examples/src/react/Shimmer/Shimmer.CustomElements.Example.tsx b/packages/react-examples/src/react/Shimmer/Shimmer.CustomElements.Example.tsx
index 198c3925b6f64..8ddac7b48fd67 100644
--- a/packages/react-examples/src/react/Shimmer/Shimmer.CustomElements.Example.tsx
+++ b/packages/react-examples/src/react/Shimmer/Shimmer.CustomElements.Example.tsx
@@ -94,7 +94,7 @@ const getCustomElementsExampleThree = (): JSX.Element => {
   );
 };
 
-export const ShimmerCustomElementsExample: React.FunctionComponent = () => (
+export const ShimmerCustomElementsExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <ThemeProvider className={wrapperClass}>
     Using ShimmerElementsGroup component to build complex structures of the placeholder you need.
     <Shimmer customElementsGroup={getCustomElementsExampleOne()} width="350" />
diff --git a/packages/react-examples/src/react/Shimmer/Shimmer.LoadData.Example.tsx b/packages/react-examples/src/react/Shimmer/Shimmer.LoadData.Example.tsx
index 7e74a0b296d2c..06c9590dc2aa9 100644
--- a/packages/react-examples/src/react/Shimmer/Shimmer.LoadData.Example.tsx
+++ b/packages/react-examples/src/react/Shimmer/Shimmer.LoadData.Example.tsx
@@ -37,7 +37,7 @@ const getCustomElements = (): JSX.Element => {
   );
 };
 
-export const ShimmerLoadDataExample: React.FunctionComponent = () => {
+export const ShimmerLoadDataExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [examplePersona, setExamplePersona] = React.useState({});
   const [contentOne, setContentOne] = React.useState('');
   const [isDataLoadedOne, { toggle: toggleIsDataLoadedOne }] = useBoolean(false);
diff --git a/packages/react-examples/src/react/Shimmer/Shimmer.Styling.Example.tsx b/packages/react-examples/src/react/Shimmer/Shimmer.Styling.Example.tsx
index 604f0ef446fb1..5f0f0a2bb2e33 100644
--- a/packages/react-examples/src/react/Shimmer/Shimmer.Styling.Example.tsx
+++ b/packages/react-examples/src/react/Shimmer/Shimmer.Styling.Example.tsx
@@ -116,7 +116,7 @@ const getShimmerStyles = (props: IShimmerStyleProps): IShimmerStyles => {
   };
 };
 
-export const ShimmerStylingExample: React.FunctionComponent = () => {
+export const ShimmerStylingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <>
       <div>
diff --git a/packages/react-examples/src/react/Slider/Slider.Basic.Example.tsx b/packages/react-examples/src/react/Slider/Slider.Basic.Example.tsx
index e8a21f04cb484..251e5c58e11db 100644
--- a/packages/react-examples/src/react/Slider/Slider.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Slider/Slider.Basic.Example.tsx
@@ -6,7 +6,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 const sliderAriaValueText = (value: number) => `${value} percent`;
 const sliderValueFormat = (value: number) => `${value}%`;
 
-export const SliderBasicExample: React.FunctionComponent = () => {
+export const SliderBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [sliderValue, setSliderValue] = React.useState(0);
   const sliderOnChange = (value: number) => setSliderValue(value);
   return (
diff --git a/packages/react-examples/src/react/Slider/Slider.Ranged.Example.tsx b/packages/react-examples/src/react/Slider/Slider.Ranged.Example.tsx
index a330608a49fd8..eb19cec7598b9 100644
--- a/packages/react-examples/src/react/Slider/Slider.Ranged.Example.tsx
+++ b/packages/react-examples/src/react/Slider/Slider.Ranged.Example.tsx
@@ -6,7 +6,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 const sliderAriaValueText = (value: number) => `${value} percent`;
 const sliderValueFormat = (value: number) => `${value}%`;
 
-export const SliderRangedExample: React.FunctionComponent = () => {
+export const SliderRangedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [sliderValue, setSliderValue] = React.useState(0);
   const [sliderLowerValue, setSliderLowerValue] = React.useState(0);
   const onChange = (_: unknown, range: [number, number]) => {
diff --git a/packages/react-examples/src/react/Slider/Slider.Vertical.Example.tsx b/packages/react-examples/src/react/Slider/Slider.Vertical.Example.tsx
index b767027fbe218..df532c376d9a5 100644
--- a/packages/react-examples/src/react/Slider/Slider.Vertical.Example.tsx
+++ b/packages/react-examples/src/react/Slider/Slider.Vertical.Example.tsx
@@ -6,7 +6,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 
 const valueFormat = (value: number) => `${value}%`;
 
-export const SliderVerticalExample: React.FunctionComponent = () => {
+export const SliderVerticalExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack horizontal tokens={stackTokens} styles={stackStyles}>
       <Slider // prettier-ignore
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.Basic.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.Basic.Example.tsx
index 99c3e0e76830f..232378e8ea304 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.Basic.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.Basic.Example.tsx
@@ -6,7 +6,7 @@ const stackTokens: IStackTokens = { childrenGap: 20 };
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 
-export const SpinButtonBasicExample: React.FunctionComponent = () => {
+export const SpinButtonBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <SpinButton
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.Controlled.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.Controlled.Example.tsx
index 9a8963406aaa9..754383509d94e 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.Controlled.Example.tsx
@@ -4,7 +4,7 @@ import { SpinButton, ISpinButtonStyles } from '@fluentui/react/lib/SpinButton';
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 
-export const SpinButtonControlledExample: React.FunctionComponent = () => {
+export const SpinButtonControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [value, setValue] = React.useState('5');
 
   const onChange = React.useCallback((event: React.SyntheticEvent<HTMLElement>, newValue?: string) => {
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.CustomStyled.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.CustomStyled.Example.tsx
index dfe5005af1f19..3c76a38db0fd3 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.CustomStyled.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.CustomStyled.Example.tsx
@@ -34,7 +34,7 @@ const downArrowButtonStyles: Partial<IButtonStyles> = {
   },
 };
 
-export const SpinButtonCustomStyledExample: React.FunctionComponent = () => {
+export const SpinButtonCustomStyledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <SpinButton
       styles={styles}
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.Icon.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.Icon.Example.tsx
index 85d5e078b0134..d81e8e6d2e2b8 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.Icon.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.Icon.Example.tsx
@@ -6,7 +6,7 @@ const iconProps: IIconProps = { iconName: 'IncreaseIndentLegacy' };
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 
-export const SpinButtonIconExample: React.FunctionComponent = () => {
+export const SpinButtonIconExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <SpinButton
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.Suffix.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.Suffix.Example.tsx
index cae539bf1fe1a..085fd6d2d14e7 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.Suffix.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.Suffix.Example.tsx
@@ -51,7 +51,7 @@ const onChange = (event: React.SyntheticEvent<HTMLElement>, value?: string): voi
   console.log('Value changed to ' + value);
 };
 
-export const SpinButtonSuffixExample: React.FunctionComponent = () => {
+export const SpinButtonSuffixExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <div>
       This SpinButton includes a suffix in the value and defines custom <code>onIncrement</code>,{' '}
diff --git a/packages/react-examples/src/react/SpinButton/SpinButton.TopPosition.Example.tsx b/packages/react-examples/src/react/SpinButton/SpinButton.TopPosition.Example.tsx
index 1656977cca887..c574a0ff41ec5 100644
--- a/packages/react-examples/src/react/SpinButton/SpinButton.TopPosition.Example.tsx
+++ b/packages/react-examples/src/react/SpinButton/SpinButton.TopPosition.Example.tsx
@@ -4,7 +4,7 @@ import { SpinButton, ISpinButtonStyles, Position } from '@fluentui/react';
 // By default the field grows to fit available width. Constrain the width instead.
 const styles: Partial<ISpinButtonStyles> = { spinButtonWrapper: { width: 75 } };
 
-export const SpinButtonTopPositionExample: React.FunctionComponent = () => {
+export const SpinButtonTopPositionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <SpinButton
       label="With label above"
diff --git a/packages/react-examples/src/react/Spinner/Spinner.Basic.Example.tsx b/packages/react-examples/src/react/Spinner/Spinner.Basic.Example.tsx
index e52a6803f41d3..9f4a6e84b7de9 100644
--- a/packages/react-examples/src/react/Spinner/Spinner.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Spinner/Spinner.Basic.Example.tsx
@@ -3,7 +3,7 @@ import { Spinner, SpinnerSize } from '@fluentui/react/lib/Spinner';
 import { Label } from '@fluentui/react/lib/Label';
 import { IStackProps, Stack } from '@fluentui/react/lib/Stack';
 
-export const SpinnerBasicExample: React.FunctionComponent = () => {
+export const SpinnerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
   const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };
 
diff --git a/packages/react-examples/src/react/Spinner/Spinner.Labeled.Example.tsx b/packages/react-examples/src/react/Spinner/Spinner.Labeled.Example.tsx
index 988bc2aeaef65..62ba153593e45 100644
--- a/packages/react-examples/src/react/Spinner/Spinner.Labeled.Example.tsx
+++ b/packages/react-examples/src/react/Spinner/Spinner.Labeled.Example.tsx
@@ -3,7 +3,7 @@ import { Spinner } from '@fluentui/react/lib/Spinner';
 import { IStackTokens, Stack } from '@fluentui/react/lib/Stack';
 import { Label } from '@fluentui/react/lib/Label';
 
-export const SpinnerLabeledExample: React.FunctionComponent = () => {
+export const SpinnerLabeledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const stackTokens: IStackTokens = {
     childrenGap: 20,
     maxWidth: 250,
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Basic.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Basic.Example.tsx
index 0df6a7a22544c..ba9f14a65e94d 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Basic.Example.tsx
@@ -35,7 +35,7 @@ const clickableStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const HorizontalStackBasicExample: React.FunctionComponent = () => {
+export const HorizontalStackBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={containerStackTokens}>
       <span>Default horizontal stack</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Configure.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Configure.Example.tsx
index b825f4bfffd15..d25075e695fe2 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Configure.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Configure.Example.tsx
@@ -55,7 +55,9 @@ const configureStackTokens: IStackTokens = { childrenGap: 20 };
 const shadowItemCheckboxStyles: Partial<ICheckboxStyles> = { root: { marginRight: 10 } };
 const wrapItemCheckboxStyles: Partial<ICheckboxStyles> = { root: { marginBottom: 10 } };
 
-const HorizontalStackConfigureExampleContent: React.FunctionComponent<IExampleOptions> = props => {
+const HorizontalStackConfigureExampleContent: React.FunctionComponent<
+  React.PropsWithChildren<IExampleOptions>
+> = props => {
   const {
     numItems,
     showBoxShadow,
@@ -143,7 +145,7 @@ const HorizontalStackConfigureExampleContent: React.FunctionComponent<IExampleOp
   );
 };
 
-export const HorizontalStackConfigureExample: React.FunctionComponent = () => {
+export const HorizontalStackConfigureExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [numItems, setNumItems] = React.useState<number>(5);
   const [showBoxShadow, { toggle: toggleShowBoxShadow }] = useBoolean(false);
   const [wrap, { toggle: toggleWrap }] = useBoolean(false);
@@ -201,7 +203,6 @@ export const HorizontalStackConfigureExample: React.FunctionComponent = () => {
           </Stack>
         </Stack.Item>
       </Stack>
-
       <Stack enableScopedSelectors horizontal disableShrink tokens={configureStackTokens}>
         <Stack.Item grow>
           <Stack enableScopedSelectors>
@@ -270,7 +271,6 @@ export const HorizontalStackConfigureExample: React.FunctionComponent = () => {
           </Stack>
         </Stack.Item>
       </Stack>
-
       <Stack enableScopedSelectors horizontal disableShrink verticalAlign="end" tokens={configureStackTokens}>
         <Stack.Item grow>
           <Dropdown
@@ -312,7 +312,6 @@ export const HorizontalStackConfigureExample: React.FunctionComponent = () => {
           />
         </Stack.Item>
       </Stack>
-
       <HorizontalStackConfigureExampleContent
         {...{
           numItems,
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Grow.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Grow.Example.tsx
index 47acf84bc951b..b3d9ade9cead8 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Grow.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Grow.Example.tsx
@@ -24,7 +24,7 @@ const stackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const HorizontalStackGrowExample: React.FunctionComponent = () => {
+export const HorizontalStackGrowExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors horizontal styles={stackStyles} tokens={stackTokens}>
       <Stack.Item grow={3} styles={stackItemStyles}>
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.HorizontalAlign.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.HorizontalAlign.Example.tsx
index 2b0b9300af956..b68f3f79ee763 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.HorizontalAlign.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.HorizontalAlign.Example.tsx
@@ -20,7 +20,7 @@ const itemStyles: React.CSSProperties = {
 // Tokens definition
 const stackTokens: IStackTokens = { childrenGap: 5 };
 
-export const HorizontalStackHorizontalAlignExample: React.FunctionComponent = () => {
+export const HorizontalStackHorizontalAlignExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={stackTokens}>
       <span>Left-aligned</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Reversed.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Reversed.Example.tsx
index 47083c101bcd8..8fd752ab52cd2 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Reversed.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Reversed.Example.tsx
@@ -35,7 +35,7 @@ const clickableStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const HorizontalStackReversedExample: React.FunctionComponent = () => {
+export const HorizontalStackReversedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={containerStackTokens}>
       <span>Default horizontal stack</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Shrink.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Shrink.Example.tsx
index 526bbdbaee9be..90fa1000ab698 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Shrink.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Shrink.Example.tsx
@@ -33,7 +33,7 @@ const innerStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const HorizontalStackShrinkExample: React.FunctionComponent = () => {
+export const HorizontalStackShrinkExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackWidth, setStackWidth] = React.useState<number>(100);
 
   // Mutating styles definition
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Spacing.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Spacing.Example.tsx
index 762227bfd52d1..a7c76b59f70c7 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Spacing.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Spacing.Example.tsx
@@ -49,7 +49,7 @@ const themedExtraLargeStackTokens: IStackTokens = {
   padding: 'l2',
 };
 
-export const HorizontalStackSpacingExample: React.FunctionComponent = () => {
+export const HorizontalStackSpacingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={sectionStackTokens}>
       <Stack enableScopedSelectors horizontal disableShrink horizontalAlign="space-between">
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.VerticalAlign.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.VerticalAlign.Example.tsx
index fe1e976bbf1ea..948178ef53398 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.VerticalAlign.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.VerticalAlign.Example.tsx
@@ -21,7 +21,7 @@ const itemStyles: React.CSSProperties = {
 // Tokens definition
 const stackTokens: IStackTokens = { childrenGap: 5 };
 
-export const HorizontalStackVerticalAlignExample: React.FunctionComponent = () => {
+export const HorizontalStackVerticalAlignExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={stackTokens}>
       <span>Top-aligned</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.Wrap.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.Wrap.Example.tsx
index f0ea51d87797c..3ef80289b4bcc 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.Wrap.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.Wrap.Example.tsx
@@ -16,7 +16,7 @@ const itemStyles: React.CSSProperties = {
 const sectionStackTokens: IStackTokens = { childrenGap: 10 };
 const wrapStackTokens: IStackTokens = { childrenGap: 30 };
 
-export const HorizontalStackWrapExample: React.FunctionComponent = () => {
+export const HorizontalStackWrapExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackWidth, setStackWidth] = React.useState<number>(100);
   // Mutating styles definition
   const stackStyles: IStackStyles = {
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapAdvanced.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapAdvanced.Example.tsx
index d3777b3004c30..b0bca400d0b37 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapAdvanced.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapAdvanced.Example.tsx
@@ -51,7 +51,9 @@ const sectionStackTokens: IStackTokens = { childrenGap: 10 };
 const configureStackTokens: IStackTokens = { childrenGap: 20 };
 const wrapStackTokens: IStackTokens = { childrenGap: 30 };
 
-const HorizontalStackWrapAdvancedExampleContent: React.FunctionComponent<IExampleOptions> = props => {
+const HorizontalStackWrapAdvancedExampleContent: React.FunctionComponent<
+  React.PropsWithChildren<IExampleOptions>
+> = props => {
   const { stackWidth, containerHeight, overflow, horizontalAlignment, verticalAlignment } = props;
 
   // Mutating styles definition
@@ -86,7 +88,7 @@ const HorizontalStackWrapAdvancedExampleContent: React.FunctionComponent<IExampl
   );
 };
 
-export const HorizontalStackWrapAdvancedExample: React.FunctionComponent = () => {
+export const HorizontalStackWrapAdvancedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackWidth, setStackWidth] = React.useState<number>(100);
   const [containerHeight, setContainerHeight] = React.useState<number>(150);
   const [horizontalAlignment, setHorizontalAlignment] = React.useState<IStackProps['horizontalAlign']>('start');
diff --git a/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapNested.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapNested.Example.tsx
index 1adf490b2925f..49dc61403a5cf 100644
--- a/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapNested.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Horizontal.WrapNested.Example.tsx
@@ -44,7 +44,7 @@ const wrapStackTokens: IStackTokens = { childrenGap: '30 40' };
 const firstStackTokens: IStackTokens = { childrenGap: '10 30' };
 const secondStackTokens: IStackTokens = { childrenGap: '20 50' };
 
-export const HorizontalStackWrapNestedExample: React.FunctionComponent = () => {
+export const HorizontalStackWrapNestedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackWidth, setStackWidth] = React.useState<number>(100);
 
   // Mutating styles definition
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Basic.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Basic.Example.tsx
index a2d034aabcedb..0f39eceb06514 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Basic.Example.tsx
@@ -30,7 +30,7 @@ const clickableStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const VerticalStackBasicExample: React.FunctionComponent = () => {
+export const VerticalStackBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={containerStackTokens}>
       <span>Default vertical stack</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Configure.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Configure.Example.tsx
index 7bfe73b5abf1a..b4b69db480b29 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Configure.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Configure.Example.tsx
@@ -47,7 +47,9 @@ const horizontalAlignmentOptions: IDropdownOption[] = [
 const sectionStackTokens: IStackTokens = { childrenGap: 10 };
 const configureStackTokens: IStackTokens = { childrenGap: 20 };
 
-const VerticalStackConfigureExampleContent: React.FunctionComponent<IExampleOptions> = props => {
+const VerticalStackConfigureExampleContent: React.FunctionComponent<
+  React.PropsWithChildren<IExampleOptions>
+> = props => {
   const {
     numItems,
     showBoxShadow,
@@ -129,7 +131,7 @@ const VerticalStackConfigureExampleContent: React.FunctionComponent<IExampleOpti
   );
 };
 
-export const VerticalStackConfigureExample: React.FunctionComponent = () => {
+export const VerticalStackConfigureExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [numItems, setNumItems] = React.useState<number>(5);
   const [showBoxShadow, { toggle: toggleShowBoxShadow }] = useBoolean(false);
   const [preventOverflow, { toggle: togglePreventOverflow }] = useBoolean(false);
@@ -177,7 +179,6 @@ export const VerticalStackConfigureExample: React.FunctionComponent = () => {
           </Stack>
         </Stack.Item>
       </Stack>
-
       <Stack enableScopedSelectors horizontal tokens={configureStackTokens}>
         <Stack.Item grow>
           <Stack enableScopedSelectors>
@@ -278,7 +279,6 @@ export const VerticalStackConfigureExample: React.FunctionComponent = () => {
           </Stack>
         </Stack.Item>
       </Stack>
-
       <VerticalStackConfigureExampleContent
         {...{
           numItems,
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Grow.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Grow.Example.tsx
index d0ba67c6feebe..2287ff11a2484 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Grow.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Grow.Example.tsx
@@ -26,7 +26,7 @@ const innerStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const VerticalStackGrowExample: React.FunctionComponent = () => {
+export const VerticalStackGrowExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={outerStackTokens}>
       <Stack enableScopedSelectors styles={stackStyles} tokens={innerStackTokens}>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.HorizontalAlign.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.HorizontalAlign.Example.tsx
index 5c33de1a386d6..563ae56b56f3f 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.HorizontalAlign.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.HorizontalAlign.Example.tsx
@@ -21,7 +21,7 @@ const itemStyles: React.CSSProperties = {
 // Tokens definition
 const stackTokens: IStackTokens = { childrenGap: 5 };
 
-export const VerticalStackHorizontalAlignExample: React.FunctionComponent = () => {
+export const VerticalStackHorizontalAlignExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={stackTokens}>
       <span>Left-aligned</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Reversed.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Reversed.Example.tsx
index 7e9b28328d707..1dd3c15c3af18 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Reversed.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Reversed.Example.tsx
@@ -30,7 +30,7 @@ const clickableStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const VerticalStackReversedExample: React.FunctionComponent = () => {
+export const VerticalStackReversedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={containerStackTokens}>
       <span>Default vertical stack</span>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Shrink.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Shrink.Example.tsx
index 5fa2c704556bc..983e6952e936b 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Shrink.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Shrink.Example.tsx
@@ -36,7 +36,7 @@ const innerStackTokens: IStackTokens = {
   padding: 10,
 };
 
-export const VerticalStackShrinkExample: React.FunctionComponent = () => {
+export const VerticalStackShrinkExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackHeight, setStackHeight] = React.useState<number>(100);
 
   // Mutating styles definition
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Spacing.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Spacing.Example.tsx
index 67d967e489947..b6afb651ef0a4 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Spacing.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Spacing.Example.tsx
@@ -50,7 +50,7 @@ const themedExtraLargeStackTokens: IStackTokens = {
   padding: 'l2',
 };
 
-export const VerticalStackSpacingExample: React.FunctionComponent = () => {
+export const VerticalStackSpacingExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={sectionStackTokens}>
       <Stack enableScopedSelectors horizontal disableShrink tokens={headingStackTokens}>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.VerticalAlign.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.VerticalAlign.Example.tsx
index 7e76f7f78183f..b96ddb6fa11a3 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.VerticalAlign.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.VerticalAlign.Example.tsx
@@ -23,7 +23,7 @@ const itemStyles: React.CSSProperties = {
 const sectionStackTokens: IStackTokens = { childrenGap: 10 };
 const headingStackTokens: IStackTokens = { childrenGap: 30 };
 
-export const VerticalStackVerticalAlignExample: React.FunctionComponent = () => {
+export const VerticalStackVerticalAlignExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack enableScopedSelectors tokens={sectionStackTokens}>
       <Stack enableScopedSelectors horizontal disableShrink horizontalAlign="space-between" tokens={headingStackTokens}>
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.Wrap.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.Wrap.Example.tsx
index 7778fa32bef0f..ce10b9ff8f8af 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.Wrap.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.Wrap.Example.tsx
@@ -18,7 +18,7 @@ const itemStyles: React.CSSProperties = {
 const sectionStackTokens: IStackTokens = { childrenGap: 10 };
 const wrapStackTokens: IStackTokens = { childrenGap: 20 };
 
-export const VerticalStackWrapExample: React.FunctionComponent = () => {
+export const VerticalStackWrapExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackHeight, setStackHeight] = React.useState<number>(420);
 
   // Mutating styles definition
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.WrapAdvanced.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.WrapAdvanced.Example.tsx
index 4eb6bf22b5885..d667dbcd72840 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.WrapAdvanced.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.WrapAdvanced.Example.tsx
@@ -25,7 +25,9 @@ const itemStyles: React.CSSProperties = {
   width: 50,
 };
 
-const VerticalStackWrapAdvancedExampleContent: React.FunctionComponent<IExampleOptions> = props => {
+const VerticalStackWrapAdvancedExampleContent: React.FunctionComponent<
+  React.PropsWithChildren<IExampleOptions>
+> = props => {
   const { stackWidth, containerHeight, overflow, horizontalAlignment, verticalAlignment } = props;
 
   // Mutating styles definition
@@ -82,7 +84,7 @@ const overflowOptions: IDropdownOption[] = [
   { key: 'hidden', text: 'Hidden' },
 ];
 
-export const VerticalStackWrapAdvancedExample: React.FunctionComponent = () => {
+export const VerticalStackWrapAdvancedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackWidth, setStackWidth] = React.useState<number>(100);
   const [containerHeight, setContainerHeight] = React.useState<number>(420);
   const [horizontalAlignment, setHorizontalAlignment] = React.useState<IStackProps['horizontalAlign']>('start');
diff --git a/packages/react-examples/src/react/Stack/Stack.Vertical.WrapNested.Example.tsx b/packages/react-examples/src/react/Stack/Stack.Vertical.WrapNested.Example.tsx
index a8fab4970e563..feba97f1791df 100644
--- a/packages/react-examples/src/react/Stack/Stack.Vertical.WrapNested.Example.tsx
+++ b/packages/react-examples/src/react/Stack/Stack.Vertical.WrapNested.Example.tsx
@@ -46,7 +46,7 @@ const wrapStackTokens: IStackTokens = { childrenGap: '30 40' };
 const firstStackTokens: IStackTokens = { childrenGap: '10 30' };
 const secondStackTokens: IStackTokens = { childrenGap: '20 50' };
 
-export const VerticalStackWrapNestedExample: React.FunctionComponent = () => {
+export const VerticalStackWrapNestedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [stackHeight, setStackHeight] = React.useState<number>(420);
 
   // Mutating styles definition
diff --git a/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx b/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx
index 5859dc63b1997..7c0209122d435 100644
--- a/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/SwatchColorPicker/SwatchColorPicker.Basic.Example.tsx
@@ -35,7 +35,7 @@ const colorCellsExample3 = [
   { id: 'h', label: 'gray', color: '#7a7574' },
 ];
 
-export const SwatchColorPickerBasicExample: React.FunctionComponent = () => {
+export const SwatchColorPickerBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [previewColor, setPreviewColor] = React.useState<string>();
   const baseId = useId('colorpicker');
 
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx
index 9e04ee29ee061..75f0ab9a39e7f 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Basic.Example.tsx
@@ -7,7 +7,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleBasicExample: React.FunctionComponent = () => {
+export const TeachingBubbleBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.ButtonOrder.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.ButtonOrder.Example.tsx
index d1c79d9867b46..b60f9f0ec3df1 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.ButtonOrder.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.ButtonOrder.Example.tsx
@@ -7,7 +7,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleButtonOrderExample: React.FunctionComponent = () => {
+export const TeachingBubbleButtonOrderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx
index 9c85129146c35..adc067af6edaf 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Condensed.Example.tsx
@@ -7,7 +7,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleCondensedExample: React.FunctionComponent = () => {
+export const TeachingBubbleCondensedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx
index db7472f0607dd..745303ee9b2b7 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Illustration.Example.tsx
@@ -13,7 +13,7 @@ const examplePrimaryButtonProps: IButtonProps = {
   children: 'Try it out',
 };
 
-export const TeachingBubbleIllustrationExample: React.FunctionComponent = () => {
+export const TeachingBubbleIllustrationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx
index dadfe31f6435e..ae775a839a727 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.MultiStep.Example.tsx
@@ -6,7 +6,7 @@ import { useBoolean, useId } from '@fluentui/react-hooks';
 const examplePrimaryButtonProps: IButtonProps = {
   children: 'Next',
 };
-export const TeachingBubbleMultiStepExample: React.FunctionComponent = () => {
+export const TeachingBubbleMultiStepExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx
index d20217382f76a..7fed889da6eaf 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.SmallHeadline.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton, IButtonProps } from '@fluentui/react/lib/Button';
 import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
 import { useBoolean, useId } from '@fluentui/react-hooks';
 
-export const TeachingBubbleSmallHeadlineExample: React.FunctionComponent = () => {
+export const TeachingBubbleSmallHeadlineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const examplePrimaryButtonProps: IButtonProps = {
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx
index f7a4e89a2b486..2431e0ccba81e 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.Wide.Example.tsx
@@ -4,7 +4,7 @@ import { TeachingBubble } from '@fluentui/react/lib/TeachingBubble';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { useBoolean, useId } from '@fluentui/react-hooks';
 
-export const TeachingBubbleWideExample: React.FunctionComponent = () => {
+export const TeachingBubbleWideExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx
index 8e661af76e385..c05722c77bc38 100644
--- a/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx
+++ b/packages/react-examples/src/react/TeachingBubble/TeachingBubble.WideIllustration.Example.tsx
@@ -16,7 +16,7 @@ const exampleImageProps: IImageProps = {
 
 const CalloutProps = { directionalHint: DirectionalHint.bottomCenter };
 
-export const TeachingBubbleWideIllustrationExample: React.FunctionComponent = () => {
+export const TeachingBubbleWideIllustrationExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const buttonId = useId('targetButton');
   const [teachingBubbleVisible, { toggle: toggleTeachingBubbleVisible }] = useBoolean(false);
   const exampleSecondaryButtonProps: IButtonProps = React.useMemo(
diff --git a/packages/react-examples/src/react/Text/Text.Ramp.Example.tsx b/packages/react-examples/src/react/Text/Text.Ramp.Example.tsx
index 430a6426361cd..c8ab573b826a2 100644
--- a/packages/react-examples/src/react/Text/Text.Ramp.Example.tsx
+++ b/packages/react-examples/src/react/Text/Text.Ramp.Example.tsx
@@ -45,7 +45,7 @@ const columns = [
   { key: 'column2', name: 'Example', fieldName: 'example', minWidth: 200, maxWidth: 1600, isResizable: true },
 ];
 
-export const TextRampExample: React.FunctionComponent = () => (
+export const TextRampExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => (
   <DetailsList
     items={allItems}
     columns={columns}
diff --git a/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx
index c125bd80461d2..7253090698e36 100644
--- a/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Basic.Example.tsx
@@ -10,7 +10,7 @@ const columnProps: Partial<IStackProps> = {
   styles: { root: { width: 300 } },
 };
 
-export const TextFieldBasicExample: React.FunctionComponent = () => {
+export const TextFieldBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <form noValidate autoComplete="off">
       <Stack horizontal tokens={stackTokens} styles={stackStyles}>
diff --git a/packages/react-examples/src/react/TextField/TextField.Borderless.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Borderless.Example.tsx
index 970645054aee2..40d6252701694 100644
--- a/packages/react-examples/src/react/TextField/TextField.Borderless.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Borderless.Example.tsx
@@ -9,7 +9,7 @@ const columnProps: Partial<IStackProps> = {
   styles: { root: { width: 300 } },
 };
 
-export const TextFieldBorderlessExample: React.FunctionComponent = () => {
+export const TextFieldBorderlessExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack horizontal tokens={stackTokens} styles={stackStyles}>
       <Stack {...columnProps}>
diff --git a/packages/react-examples/src/react/TextField/TextField.Controlled.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Controlled.Example.tsx
index 0b73eee37da94..89e12fe1aa3e6 100644
--- a/packages/react-examples/src/react/TextField/TextField.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Controlled.Example.tsx
@@ -6,7 +6,7 @@ const textFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 300 }
 const narrowTextFieldStyles: Partial<ITextFieldStyles> = { fieldGroup: { width: 100 } };
 const stackTokens = { childrenGap: 15 };
 
-export const TextFieldControlledExample: React.FunctionComponent = () => {
+export const TextFieldControlledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [firstTextFieldValue, setFirstTextFieldValue] = React.useState('');
   const [secondTextFieldValue, setSecondTextFieldValue] = React.useState('');
   const onChangeFirstTextFieldValue = React.useCallback(
diff --git a/packages/react-examples/src/react/TextField/TextField.CustomRender.Example.tsx b/packages/react-examples/src/react/TextField/TextField.CustomRender.Example.tsx
index cd18c670eb718..9dff0145fb998 100644
--- a/packages/react-examples/src/react/TextField/TextField.CustomRender.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.CustomRender.Example.tsx
@@ -86,7 +86,7 @@ const CustomLabel = (props: ITextFieldProps): JSX.Element => {
   );
 };
 
-export const TextFieldCustomRenderExample: React.FunctionComponent = () => {
+export const TextFieldCustomRenderExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const labelId: string = useId('label');
   const onRenderLabel = (props: ITextFieldProps) => <CustomLabel id={labelId} {...props} />;
 
diff --git a/packages/react-examples/src/react/TextField/TextField.ErrorMessage.Example.tsx b/packages/react-examples/src/react/TextField/TextField.ErrorMessage.Example.tsx
index f2f7c6eb53096..5a626e39641e2 100644
--- a/packages/react-examples/src/react/TextField/TextField.ErrorMessage.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.ErrorMessage.Example.tsx
@@ -36,7 +36,7 @@ const getRichErrorMessage = (value: string) => {
   );
 };
 
-export const TextFieldErrorMessageExample: React.FunctionComponent = () => {
+export const TextFieldErrorMessageExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showFields, { toggle: toggleShowFields }] = useBoolean(false);
 
   return (
diff --git a/packages/react-examples/src/react/TextField/TextField.Masked.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Masked.Example.tsx
index e9b610f9e16ee..70d77272c40ba 100644
--- a/packages/react-examples/src/react/TextField/TextField.Masked.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Masked.Example.tsx
@@ -6,7 +6,7 @@ const maskFormat: { [key: string]: RegExp } = {
 };
 const stackTokens = { maxWidth: 300 };
 
-export const TextFieldMaskedExample: React.FunctionComponent = () => {
+export const TextFieldMaskedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <p>The mask has been modified here to allow "_"</p>
diff --git a/packages/react-examples/src/react/TextField/TextField.Multiline.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Multiline.Example.tsx
index aaab181d9de7e..f8bb883f905ec 100644
--- a/packages/react-examples/src/react/TextField/TextField.Multiline.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Multiline.Example.tsx
@@ -12,7 +12,7 @@ const columnProps: Partial<IStackProps> = {
   styles: { root: { width: 300 } },
 };
 
-export const TextFieldMultilineExample: React.FunctionComponent = () => {
+export const TextFieldMultilineExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [multiline, { toggle: toggleMultiline }] = useBoolean(false);
 
diff --git a/packages/react-examples/src/react/TextField/TextField.PrefixAndSuffix.Example.tsx b/packages/react-examples/src/react/TextField/TextField.PrefixAndSuffix.Example.tsx
index 89ffd6c3b445e..79d5b59619750 100644
--- a/packages/react-examples/src/react/TextField/TextField.PrefixAndSuffix.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.PrefixAndSuffix.Example.tsx
@@ -5,7 +5,7 @@ import { Stack, IStackProps, IStackStyles } from '@fluentui/react/lib/Stack';
 const stackStyles: Partial<IStackStyles> = { root: { width: 650 } };
 const stackTokens = { childrenGap: 50 };
 
-export const TextFieldPrefixAndSuffixExample: React.FunctionComponent = () => {
+export const TextFieldPrefixAndSuffixExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const columnProps: Partial<IStackProps> = {
     tokens: { childrenGap: 15 },
     styles: { root: { width: 300 } },
diff --git a/packages/react-examples/src/react/TextField/TextField.Styled.Example.tsx b/packages/react-examples/src/react/TextField/TextField.Styled.Example.tsx
index 6e83a79298bbf..2021cdfa0b16b 100644
--- a/packages/react-examples/src/react/TextField/TextField.Styled.Example.tsx
+++ b/packages/react-examples/src/react/TextField/TextField.Styled.Example.tsx
@@ -6,7 +6,7 @@ import { Stack } from '@fluentui/react/lib/Stack';
 
 const textStyles: Partial<ITextStyles> = { root: { maxWidth: 600 } };
 
-export const TextFieldStyledExample: React.FunctionComponent = () => {
+export const TextFieldStyledExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={{ childrenGap: 15 }}>
       <Text styles={textStyles}>
diff --git a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Basic.Example.tsx b/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Basic.Example.tsx
index e895381911800..6890e75c6b77c 100644
--- a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Basic.Example.tsx
+++ b/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Basic.Example.tsx
@@ -13,7 +13,7 @@ const App = () => {
   return <Checkbox defaultChecked={true} label="My Checkbox" />;
 };
 
-export const ThemeProviderBasicExample: React.FunctionComponent = () => {
+export const ThemeProviderBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <ThemeProvider theme={myTheme}>
       <App />
diff --git a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Nested.Example.tsx b/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Nested.Example.tsx
index be378c26aa380..61a474a455d4c 100644
--- a/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Nested.Example.tsx
+++ b/packages/react-examples/src/react/ThemeProvider/ThemeProvider.Nested.Example.tsx
@@ -16,7 +16,7 @@ const darkTheme: PartialTheme = {
   },
 };
 
-export const ThemeProviderNestedExample: React.FunctionComponent = () => {
+export const ThemeProviderNestedExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [isLight, setIsLight] = React.useState(true);
 
   return (
diff --git a/packages/react-examples/src/react/TimePicker/TimePicker.Basic.Example.tsx b/packages/react-examples/src/react/TimePicker/TimePicker.Basic.Example.tsx
index 77e60dae88f0c..56d3a75a80a46 100644
--- a/packages/react-examples/src/react/TimePicker/TimePicker.Basic.Example.tsx
+++ b/packages/react-examples/src/react/TimePicker/TimePicker.Basic.Example.tsx
@@ -22,7 +22,7 @@ const timePickerStyles: Partial<IComboBoxStyles> = {
   },
 };
 
-export const TimePickerBasicExample: React.FC = () => {
+export const TimePickerBasicExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [basicExampleTimeString, setBasicExampleTimeString] = React.useState<string>('');
   const [nonDefaultOptionsExampleTimeString, setNonDefaultOptionsExampleTimeString] = React.useState<string>('');
   const basicDateAnchor = new Date('November 25, 2021 09:00:00');
@@ -32,9 +32,12 @@ export const TimePickerBasicExample: React.FC = () => {
     setBasicExampleTimeString(basicExampleTime.toString());
   }, []);
 
-  const onNonDefaultOptionsExampleChange = React.useCallback((_, nonDefaultOptionsExampleTime: Date) => {
-    setNonDefaultOptionsExampleTimeString(nonDefaultOptionsExampleTime?.toString());
-  }, []);
+  const onNonDefaultOptionsExampleChange = React.useCallback(
+    (_: React.FormEvent<IComboBox>, nonDefaultOptionsExampleTime: Date) => {
+      setNonDefaultOptionsExampleTimeString(nonDefaultOptionsExampleTime?.toString());
+    },
+    [],
+  );
 
   const timeRange: ITimeRange = {
     start: 8,
diff --git a/packages/react-examples/src/react/TimePicker/TimePicker.Controlled.Example.tsx b/packages/react-examples/src/react/TimePicker/TimePicker.Controlled.Example.tsx
index 5bd608cee1cfa..5cd7e1e71a7ed 100644
--- a/packages/react-examples/src/react/TimePicker/TimePicker.Controlled.Example.tsx
+++ b/packages/react-examples/src/react/TimePicker/TimePicker.Controlled.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TimePicker, Text, IStackTokens, Stack, IStackStyles, IComboBoxStyles } from '@fluentui/react';
+import { TimePicker, Text, IStackTokens, Stack, IStackStyles, IComboBoxStyles, type IComboBox } from '@fluentui/react';
 
 const stackStyles: Partial<IStackStyles> = { root: { width: 500 } };
 const stackTokens: IStackTokens = { childrenGap: 20 };
@@ -13,11 +13,11 @@ const timePickerStyles: Partial<IComboBoxStyles> = {
   },
 };
 
-export const TimePickerControlledExample: React.FC = () => {
+export const TimePickerControlledExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const dateAnchor = new Date('February 27, 2023 08:00:00');
   const [time, setTime] = React.useState<Date>(new Date('February 27, 2023 10:00:00'));
 
-  const onControlledExampleChange = React.useCallback((_, newTime: Date) => {
+  const onControlledExampleChange = React.useCallback((_: React.FormEvent<IComboBox>, newTime: Date) => {
     setTime(newTime);
   }, []);
 
diff --git a/packages/react-examples/src/react/TimePicker/TimePicker.CustomTimeStrings.Example.tsx b/packages/react-examples/src/react/TimePicker/TimePicker.CustomTimeStrings.Example.tsx
index 7bbd110a9360a..a9c284afdd2c9 100644
--- a/packages/react-examples/src/react/TimePicker/TimePicker.CustomTimeStrings.Example.tsx
+++ b/packages/react-examples/src/react/TimePicker/TimePicker.CustomTimeStrings.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TimePicker, Text, IStackTokens, Stack, IStackStyles, IComboBoxStyles } from '@fluentui/react';
+import { TimePicker, Text, IStackTokens, Stack, IStackStyles, IComboBoxStyles, type IComboBox } from '@fluentui/react';
 
 const stackStyles: Partial<IStackStyles> = { root: { width: 500 } };
 const stackTokens: IStackTokens = { childrenGap: 20 };
@@ -13,7 +13,7 @@ const timePickerStyles: Partial<IComboBoxStyles> = {
   },
 };
 
-export const TimePickerCustomTimeStringsExample: React.FC = () => {
+export const TimePickerCustomTimeStringsExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const [customTimeString, setCustomTimeString] = React.useState<string>('');
   const dateAnchor = new Date('February 27, 2023 08:00:00');
   const onFormatDate = React.useCallback((date: Date) => `Custom prefix + ${date.toLocaleTimeString()}`, []);
@@ -24,7 +24,7 @@ export const TimePickerCustomTimeStringsExample: React.FC = () => {
     return '';
   }, []);
 
-  const onChange = React.useCallback((_, time: Date) => {
+  const onChange = React.useCallback((_: React.FormEvent<IComboBox>, time: Date) => {
     console.log('Selected time: ', time);
     setCustomTimeString(time.toString());
   }, []);
diff --git a/packages/react-examples/src/react/TimePicker/TimePicker.DateTimePicker.Example.tsx b/packages/react-examples/src/react/TimePicker/TimePicker.DateTimePicker.Example.tsx
index f0de3550fbc91..f458394f91264 100644
--- a/packages/react-examples/src/react/TimePicker/TimePicker.DateTimePicker.Example.tsx
+++ b/packages/react-examples/src/react/TimePicker/TimePicker.DateTimePicker.Example.tsx
@@ -23,7 +23,7 @@ const snapTimeToUpdatedDateAnchor = (datePickerDate: Date, currentTime: Date) =>
   return snappedTime;
 };
 
-export const TimePickerDateTimePickerExample: React.FC = () => {
+export const TimePickerDateTimePickerExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const currentDate = new Date('2023-02-01 05:00:00');
   const [datePickerDate, setDatePickerDate] = React.useState<Date>(currentDate);
   const [currentTime, setCurrentTime] = React.useState<Date>();
diff --git a/packages/react-examples/src/react/TimePicker/TimePicker.ValidationResult.Example.tsx b/packages/react-examples/src/react/TimePicker/TimePicker.ValidationResult.Example.tsx
index 2d6e78b81b6c1..6214873ca0a8f 100644
--- a/packages/react-examples/src/react/TimePicker/TimePicker.ValidationResult.Example.tsx
+++ b/packages/react-examples/src/react/TimePicker/TimePicker.ValidationResult.Example.tsx
@@ -10,6 +10,7 @@ import {
   IComboBoxStyles,
   PrimaryButton,
   Label,
+  type IComboBox,
 } from '@fluentui/react';
 
 const stackStyles: Partial<IStackStyles> = { root: { width: 500 } };
@@ -29,21 +30,24 @@ const timeRange: ITimeRange = {
   end: 17,
 };
 
-export const TimePickerValidationResultExample: React.FC = () => {
+export const TimePickerValidationResultExample: React.FC<React.PropsWithChildren<unknown>> = () => {
   const dateAnchor = new Date('February 27, 2023 08:00:00');
   const [time, setTime] = React.useState<Date>(new Date('January 1, 2023 08:00:00'));
   const [disableButton, setDisableButton] = React.useState<boolean>(false);
 
-  const onControlledExampleChange = React.useCallback((_, newTime: Date) => {
+  const onControlledExampleChange = React.useCallback((_: React.FormEvent<IComboBox>, newTime: Date) => {
     setTime(newTime);
   }, []);
 
-  const onValidationResult = React.useCallback((_, timePickerValidationResultData: TimePickerValidationResultData) => {
-    if (timePickerValidationResultData.errorMessage !== undefined) {
-      console.log('Validation error message received: ', timePickerValidationResultData.errorMessage);
-      setDisableButton(timePickerValidationResultData.errorMessage.length > 0);
-    }
-  }, []);
+  const onValidationResult = React.useCallback(
+    (_: React.FormEvent<IComboBox>, timePickerValidationResultData: TimePickerValidationResultData) => {
+      if (timePickerValidationResultData.errorMessage !== undefined) {
+        console.log('Validation error message received: ', timePickerValidationResultData.errorMessage);
+        setDisableButton(timePickerValidationResultData.errorMessage.length > 0);
+      }
+    },
+    [],
+  );
 
   return (
     <Stack tokens={stackTokens} styles={stackStyles}>
diff --git a/packages/react-examples/src/react/Toggle/Toggle.Basic.Example.tsx b/packages/react-examples/src/react/Toggle/Toggle.Basic.Example.tsx
index dba82f5b66969..349dead230a82 100644
--- a/packages/react-examples/src/react/Toggle/Toggle.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Toggle/Toggle.Basic.Example.tsx
@@ -4,7 +4,7 @@ import { Toggle } from '@fluentui/react/lib/Toggle';
 
 const stackTokens: IStackTokens = { childrenGap: 10 };
 
-export const ToggleBasicExample: React.FunctionComponent = () => {
+export const ToggleBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   return (
     <Stack tokens={stackTokens}>
       <Toggle label="Enabled and checked" defaultChecked onText="On" offText="Off" onChange={_onChange} />
diff --git a/packages/react-examples/src/react/Toggle/Toggle.CustomLabel.Example.tsx b/packages/react-examples/src/react/Toggle/Toggle.CustomLabel.Example.tsx
index f76e2157b57e1..0c80d2ee5f97d 100644
--- a/packages/react-examples/src/react/Toggle/Toggle.CustomLabel.Example.tsx
+++ b/packages/react-examples/src/react/Toggle/Toggle.CustomLabel.Example.tsx
@@ -16,7 +16,7 @@ const buttonStyles = {
   },
 };
 
-export const ToggleCustomLabelExample: React.FunctionComponent = () => {
+export const ToggleCustomLabelExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const [showTooltip, setShowTooltip] = React.useState(false);
   const tooltipId = useId('tooltipId');
 
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.AbsolutePosition.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.AbsolutePosition.Example.tsx
index 668bbb29c806b..0a869093bb7a3 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.AbsolutePosition.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.AbsolutePosition.Example.tsx
@@ -8,7 +8,7 @@ const buttonStyles: Partial<IButtonStyles> = {
   root: { position: 'absolute', left: 200 },
 };
 
-export const TooltipAbsolutePositionExample: React.FunctionComponent = () => {
+export const TooltipAbsolutePositionExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Basic.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Basic.Example.tsx
index d48284d649e72..02ee0d4a66b54 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.Basic.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.Basic.Example.tsx
@@ -8,7 +8,7 @@ const calloutProps = { gapSpace: 0 };
 // If that's causing sizing issues or tooltip positioning issues, try overriding to inline-block.
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
-export const TooltipBasicExample: React.FunctionComponent = () => {
+export const TooltipBasicExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Custom.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Custom.Example.tsx
index 6c01ac15f6629..a3d45e610b552 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.Custom.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.Custom.Example.tsx
@@ -13,7 +13,7 @@ const tooltipProps: ITooltipProps = {
 };
 const hostStyles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 
-export const TooltipCustomExample: React.FunctionComponent = () => {
+export const TooltipCustomExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Display.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Display.Example.tsx
index 64cee6bb1569d..875c455bb0155 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.Display.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.Display.Example.tsx
@@ -18,7 +18,7 @@ const inlineBlockStyle: Partial<ITooltipHostStyles> = {
   root: { display: 'inline-block' },
 };
 
-export const TooltipDisplayExample: React.FunctionComponent = () => {
+export const TooltipDisplayExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltip1Id = useId('tooltip1');
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Interactive.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Interactive.Example.tsx
index 2393bc50580c4..7e6e929963a59 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.Interactive.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.Interactive.Example.tsx
@@ -6,7 +6,7 @@ import { useId } from '@fluentui/react-hooks';
 const styles: Partial<ITooltipHostStyles> = { root: { display: 'inline-block' } };
 const calloutProps = { gapSpace: 0 };
 
-export const TooltipInteractiveExample: React.FunctionComponent = () => {
+export const TooltipInteractiveExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   // Use useId() to ensure that the ID is unique on the page.
   // (It's also okay to use a plain string and manually ensure uniqueness.)
   const tooltipId = useId('tooltip');
diff --git a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx
index d4866ddfa8ed0..768d0f8aad567 100644
--- a/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx
+++ b/packages/react-examples/src/react/Tooltip/Tooltip.Overflow.Example.tsx
@@ -34,7 +34,7 @@ const classNames = mergeStyleSets({
   },
 });
 
-export const TooltipOverflowExample: React.FunctionComponent = () => {
+export const TooltipOverflowExample: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
   const parentTooltipId = useId('text-tooltip');
   const [shouldOverflow, setShouldOverflow] = React.useState(false);
   const [isParentTooltipVisible, setIsParentTooltipVisible] = React.useState(false);
diff --git a/packages/react-experiments/src/components/Accordion/Accordion.tsx b/packages/react-experiments/src/components/Accordion/Accordion.tsx
index 9fd644bb578df..754b4acdb5597 100644
--- a/packages/react-experiments/src/components/Accordion/Accordion.tsx
+++ b/packages/react-experiments/src/components/Accordion/Accordion.tsx
@@ -42,8 +42,8 @@ const AccordionStatics = {
   defaultProps: {},
 };
 
-export const Accordion: React.FunctionComponent<IAccordionProps> & {
-  Item: React.FunctionComponent<ICollapsibleSectionProps>;
+export const Accordion: React.FunctionComponent<React.PropsWithChildren<IAccordionProps>> & {
+  Item: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>>;
 } = createComponent(AccordionView, {
   displayName: 'Accordion',
   styles,
diff --git a/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts b/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts
index 00869492a178b..01c380877caf9 100644
--- a/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts
+++ b/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts
@@ -5,20 +5,16 @@ import { collapsibleSectionStyles } from './CollapsibleSection.styles';
 import { createComponent } from '@fluentui/foundation-legacy';
 import type { ICollapsibleSectionProps } from './CollapsibleSection.types';
 
-export const CollapsibleSection: React.FunctionComponent<ICollapsibleSectionProps> = createComponent(
-  CollapsibleSectionView,
-  {
+export const CollapsibleSection: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>> =
+  createComponent(CollapsibleSectionView, {
     displayName: 'CollapsibleSection',
     state: useCollapsibleSectionState,
     styles: collapsibleSectionStyles,
-  },
-);
+  });
 
 // TODO: This is only here for testing createComponent and should be removed before promoting to production
-export const CollapsibleSectionStateless: React.FunctionComponent<ICollapsibleSectionProps> = createComponent(
-  CollapsibleSectionView,
-  {
+export const CollapsibleSectionStateless: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>> =
+  createComponent(CollapsibleSectionView, {
     displayName: 'CollapsibleSection',
     styles: collapsibleSectionStyles,
-  },
-);
+  });
diff --git a/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts b/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts
index 15272a3f24734..d7f22da6f367f 100644
--- a/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts
+++ b/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts
@@ -9,7 +9,7 @@ export interface IFolderCoverChildrenProps {
   contentSize: ISize;
 }
 
-export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IFolderCoverProps extends IBaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   /**
    * The breakpoint size of the folder cover.
    */
@@ -39,5 +39,5 @@ export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTML
    * The children to pass into the content area of the folder cover.
    */
   // eslint-disable-next-line @typescript-eslint/no-deprecated
-  children?: React.Props<{}>['children'] | ((childrenProps: IFolderCoverChildrenProps) => JSX.Element | null);
+  children?: React.ReactNode | ((childrenProps: IFolderCoverChildrenProps) => JSX.Element | null);
 }
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx
index 119fedcd7636e..0b3c08096ce2f 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx
+++ b/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx
@@ -17,7 +17,7 @@ export const CopyableItem = <T extends any>(
 ): CopyableItemWrappedComponent<T> => {
   return React.memo((selectedItemProps: ISelectedItemProps<T>) => {
     const onCopy = React.useCallback(
-      item => {
+      (item: T) => {
         const copyText = copyableItemProps.getCopyItemText([item]);
         const copyInput = document.createElement('input') as HTMLInputElement;
         document.body.appendChild(copyInput);
@@ -44,7 +44,7 @@ export const CopyableItem = <T extends any>(
       //   doesn't re-render the component."
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [copyableItemProps.getCopyItemText],
-    );
+    ) as React.ClipboardEventHandler<HTMLElement>;
 
     const ItemComponent = copyableItemProps.itemComponent;
     return <ItemComponent {...selectedItemProps} onCopy={onCopy} />;
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts
index 60acdfa5ef924..3fde5d13949ca 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts
+++ b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { ISelectedItemProps } from '../SelectedItemsList.types';
 
 export type TriggerProps<T> = ISelectedItemProps<T> & {
+  item: T;
   onTrigger?: () => void;
 };
 
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx
index 6374173fe7864..abee185bf36ef 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx
+++ b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx
@@ -21,7 +21,7 @@ export const ItemWithContextMenu = <T extends any>(
       setIsContextMenuOpen(true);
     }, [setIsContextMenuOpen]);
     const closeContextMenu = React.useCallback(
-      e => {
+      (e: React.MouseEvent) => {
         e.preventDefault();
         setIsContextMenuOpen(false);
       },
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx
index 99f5fac7c9df7..346f530696c61 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx
+++ b/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx
@@ -8,7 +8,7 @@ export const TriggerOnContextMenu = <T extends any>(ItemComponent: React.Compone
     const { onTrigger } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks -- this is a component
     const trigger = React.useCallback(
-      e => {
+      (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
         e.stopPropagation();
         onTrigger?.();
diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx
index 2f05428a019fc..fdb836374778f 100644
--- a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx
+++ b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx
@@ -81,7 +81,7 @@ const SelectedPersonaInner = React.memo(
         const dragDropOptions: IDragDropOptions = {
           eventMap: eventsToRegister,
           selectionIndex: index,
-          context: { data: item, index: index },
+          context: { data: item, index },
           ...dragDropEvents,
           updateDropState: _updateDroppingState,
         };
@@ -110,7 +110,7 @@ const SelectedPersonaInner = React.memo(
     );
 
     const onExpandClicked = React.useCallback(
-      ev => {
+      (ev: React.MouseEvent<HTMLElement>) => {
         ev.stopPropagation();
         ev.preventDefault();
         if (onItemChange && getExpandedItems) {
@@ -127,7 +127,7 @@ const SelectedPersonaInner = React.memo(
     );
 
     const onRemoveClicked = React.useCallback(
-      ev => {
+      (ev: React.MouseEvent<HTMLElement>) => {
         ev.stopPropagation();
         ev.preventDefault();
         onRemoveItem && onRemoveItem();
diff --git a/packages/react-experiments/src/components/Tile/Tile.tsx b/packages/react-experiments/src/components/Tile/Tile.tsx
index e27730089aed1..3f107e1f0fcca 100644
--- a/packages/react-experiments/src/components/Tile/Tile.tsx
+++ b/packages/react-experiments/src/components/Tile/Tile.tsx
@@ -94,8 +94,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
     const isModal = !!selection && !!selection.isModal && selection.isModal();
 
     this.state = {
-      isSelected: isSelected,
-      isModal: isModal,
+      isSelected,
+      isModal,
     };
 
     this._events = new EventGroup(this);
@@ -112,8 +112,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
       const isModal = !!nextSelection && nextSelection.isModal && nextSelection.isModal();
 
       this.setState({
-        isSelected: isSelected,
-        isModal: isModal,
+        isSelected,
+        isModal,
       });
     }
   }
@@ -191,8 +191,13 @@ export class Tile extends React.Component<ITileProps, ITileState> {
 
     const tileLayout = getTileLayoutFromProps(this.props);
 
-    const background = typeof propsBackground === 'function' ? propsBackground(tileLayout) : propsBackground;
-    const foreground = typeof propsForeground === 'function' ? propsForeground(tileLayout) : propsForeground;
+    const background = (
+      typeof propsBackground === 'function' ? propsBackground(tileLayout) : propsBackground
+    ) as React.JSX.Element;
+
+    const foreground = (
+      typeof propsForeground === 'function' ? propsForeground(tileLayout) : propsForeground
+    ) as React.JSX.Element;
 
     const onRenderBackground = propsOnRenderBackground
       ? composeRenderFunction(propsOnRenderBackground, this._onRenderBackground)
@@ -290,7 +295,7 @@ export class Tile extends React.Component<ITileProps, ITileState> {
         ) : null}
         {isSelectable
           ? this._onRenderCheck({
-              isSelected: isSelected,
+              isSelected,
             })
           : null}
       </div>
@@ -406,8 +411,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
     const isModal = !!selection && !!selection.isModal && selection.isModal();
 
     this.setState({
-      isSelected: isSelected,
-      isModal: isModal,
+      isSelected,
+      isModal,
     });
   };
 }
diff --git a/packages/react-experiments/src/components/TilesList/TilesList.types.ts b/packages/react-experiments/src/components/TilesList/TilesList.types.ts
index 0e51d4bcd6074..91c3896335cb2 100644
--- a/packages/react-experiments/src/components/TilesList/TilesList.types.ts
+++ b/packages/react-experiments/src/components/TilesList/TilesList.types.ts
@@ -3,7 +3,7 @@ import { TilesList } from './TilesList';
 import type { IRefObject, IBaseProps, ISize } from '@fluentui/react/lib/Utilities';
 import type { IFocusZone } from '@fluentui/react/lib/FocusZone';
 import type { IListProps } from '@fluentui/react/lib/List';
-import type { IRenderFunction } from '@fluentui/utilities';
+import type { IRenderFunction, IReactProps } from '@fluentui/utilities';
 
 export interface ITilesGridItemCellProps<TItem> {
   item: TItem;
@@ -135,7 +135,7 @@ export interface ITilesGridSegment<TItem> {
 
 export interface ITilesListProps<TItem>
   extends IBaseProps,
-    React.Props<TilesList<TItem>>, // eslint-disable-line @typescript-eslint/no-deprecated
+    IReactProps<TilesList<TItem>>, // eslint-disable-line @typescript-eslint/no-deprecated
     React.HTMLAttributes<HTMLDivElement> {
   /**
    * An array of items to assign to the list.
diff --git a/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx b/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx
index cd00b28b98126..951169369fa80 100644
--- a/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx
+++ b/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx
@@ -25,7 +25,7 @@ export const ScrollContainerContextTypes = {
   scrollContainer: PropTypes.object.isRequired,
 };
 
-export class ScrollContainer extends React.Component<IScrollContainerProps> implements IScrollContainer {
+export class ScrollContainer extends React.Component<React.PropsWithChildren<IScrollContainerProps>> implements IScrollContainer {
   public static childContextTypes: typeof ScrollContainerContextTypes = ScrollContainerContextTypes;
 
   private _observer: IntersectionObserver;
diff --git a/packages/react-focus/etc/react-focus.api.md b/packages/react-focus/etc/react-focus.api.md
index 16d37c28fc2ce..bf8f9848a7446 100644
--- a/packages/react-focus/etc/react-focus.api.md
+++ b/packages/react-focus/etc/react-focus.api.md
@@ -5,6 +5,7 @@
 ```ts
 
 import type { IRefObject } from '@fluentui/utilities';
+import { MergeStylesShadowRootContext } from '@fluentui/utilities';
 import { MergeStylesShadowRootContextValue } from '@fluentui/utilities';
 import type { Point } from '@fluentui/utilities';
 import * as React_2 from 'react';
@@ -21,6 +22,8 @@ export class FocusZone extends React_2.Component<IFocusZoneProps> implements IFo
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof MergeStylesShadowRootContext>;
+    // (undocumented)
     static contextType: React_2.Context<MergeStylesShadowRootContextValue | undefined>;
     // (undocumented)
     get defaultFocusElement(): HTMLElement | null;
diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
index 7d83edd178e8d..6227e6a32d1af 100644
--- a/packages/react-focus/src/components/FocusZone/FocusZone.tsx
+++ b/packages/react-focus/src/components/FocusZone/FocusZone.tsx
@@ -127,6 +127,8 @@ export class FocusZone extends React.Component<IFocusZoneProps> implements IFocu
     'data-tabster': '{"uncontrolled": {}}',
   } as IFocusZonePropsWithTabster;
 
+  public declare context: React.ContextType<typeof MergeStylesShadowRootContext>;
+
   private _root: React.RefObject<HTMLElement> = React.createRef();
   private _mergedRef = createMergedRef<HTMLElement>();
 
diff --git a/packages/react-monaco-editor/src/components/EditorErrorHandler.tsx b/packages/react-monaco-editor/src/components/EditorErrorHandler.tsx
index bb326cf6d8dec..00d5a83453b7c 100644
--- a/packages/react-monaco-editor/src/components/EditorErrorHandler.tsx
+++ b/packages/react-monaco-editor/src/components/EditorErrorHandler.tsx
@@ -22,7 +22,10 @@ interface IEditorErrorBoundaryState {
  * The example preview should be rendered as a child of this component. (This component can't just
  * render the preview directly because error boundaries only catch errors in passed-in children.)
  */
-export class EditorErrorBoundary extends React.Component<IEditorErrorBoundaryProps, IEditorErrorBoundaryState> {
+export class EditorErrorBoundary extends React.Component<
+  React.PropsWithChildren<IEditorErrorBoundaryProps>,
+  IEditorErrorBoundaryState
+> {
   public state: IEditorErrorBoundaryState = {};
   private _lastGoodChildren: React.ReactNode;
   private _lastErrorTime: number | undefined;
diff --git a/packages/react-monaco-editor/src/components/EditorWrapper.tsx b/packages/react-monaco-editor/src/components/EditorWrapper.tsx
index d0f3e4bc1f240..9174577b809e6 100644
--- a/packages/react-monaco-editor/src/components/EditorWrapper.tsx
+++ b/packages/react-monaco-editor/src/components/EditorWrapper.tsx
@@ -79,6 +79,6 @@ export const EditorWrapper: React.FunctionComponent<IEditorWrapperProps> = props
   );
 };
 
-const EditorPreview: React.FunctionComponent<{}> = props => {
-  return <div {...props} />;
+const EditorPreview: React.FunctionComponent<React.PropsWithChildren<unknown>> = props => {
+  return <div {...props}>{props.children}</div>;
 };
diff --git a/packages/react-monaco-editor/src/components/EditorWrapper.types.ts b/packages/react-monaco-editor/src/components/EditorWrapper.types.ts
index 4644f7a25c6e2..134a49ab9c817 100644
--- a/packages/react-monaco-editor/src/components/EditorWrapper.types.ts
+++ b/packages/react-monaco-editor/src/components/EditorWrapper.types.ts
@@ -12,7 +12,7 @@ export interface IEditorWrapperProps {
   editorClassName?: string;
 
   /** Custom component for the preview. It **must** render the children passed in. */
-  previewAs?: React.ComponentType<{}>;
+  previewAs?: React.ComponentType<React.PropsWithChildren>;
 
   /** Props to use on the wrapper for the rendered example. */
   previewProps?: {};
diff --git a/packages/react-monaco-editor/src/components/TypeScriptSnippet.tsx b/packages/react-monaco-editor/src/components/TypeScriptSnippet.tsx
index b5b6c267ae9c3..1cffef3d9c337 100644
--- a/packages/react-monaco-editor/src/components/TypeScriptSnippet.tsx
+++ b/packages/react-monaco-editor/src/components/TypeScriptSnippet.tsx
@@ -73,7 +73,7 @@ export interface ITypeScriptSnippetProps {
 }
 
 /** TypeScript code snippet with a theme similar to Monaco's VS light. */
-export const TypeScriptSnippet: React.FunctionComponent<ITypeScriptSnippetProps> = props => {
+export const TypeScriptSnippet: React.FunctionComponent<React.PropsWithChildren<ITypeScriptSnippetProps>> = props => {
   return (
     <SyntaxHighlighter className={css(rootClass, props.className)} language="tsx" style={style}>
       {props.children}
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
index 6ad1107c0ee84..7137fb79bfe5c 100644
--- a/packages/react/etc/react.api.md
+++ b/packages/react/etc/react.api.md
@@ -481,6 +481,8 @@ export class Autofill extends React_2.Component<IAutofillProps, IAutofillState>
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     get cursorLocation(): number | null;
@@ -701,6 +703,8 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends Rea
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     protected currentPromise: PromiseLike<any> | undefined;
@@ -719,7 +723,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends Rea
     // (undocumented)
     protected _getDescribedBy: (items: T[], hasError: boolean) => string;
     // @deprecated (undocumented)
-    protected getSuggestionsAlert(suggestionAlertClassName?: string): JSX.Element | undefined;
+    protected getSuggestionsAlert(suggestionAlertClassName?: string): React_2.JSX.Element | undefined;
     // (undocumented)
     protected input: React_2.RefObject<IAutofill>;
     // (undocumented)
@@ -764,7 +768,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>> extends Rea
     // (undocumented)
     render(): JSX.Element;
     // (undocumented)
-    protected renderCustomAlert(alertClassName?: string): JSX.Element;
+    protected renderCustomAlert(alertClassName?: string): React_2.JSX.Element;
     // (undocumented)
     protected renderError(className?: string): JSX.Element | null;
     // (undocumented)
@@ -815,6 +819,8 @@ export class BaseSelectedItemsList<T extends {}, P extends IBaseSelectedItemsLis
     // (undocumented)
     componentDidUpdate(oldProps: P, oldState: IBaseSelectedItemsListState<IObjectWithKey>): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     protected copyItems(items: T[]): void;
@@ -914,7 +920,7 @@ export const ButtonGlobalClassNames: {
 export const ButtonGrid: React_2.FunctionComponent<IButtonGridProps>;
 
 // @public (undocumented)
-export const ButtonGridCell: <T, P extends IButtonGridCellProps<T>>(props: IButtonGridCellProps<T>) => JSX.Element;
+export const ButtonGridCell: <T, P extends IButtonGridCellProps<T>>(props: IButtonGridCellProps<T>) => React_2.JSX.Element;
 
 export { buttonProperties }
 
@@ -945,10 +951,10 @@ export const Calendar: React_2.FunctionComponent<ICalendarProps>;
 export const Callout: React_2.FunctionComponent<ICalloutProps>;
 
 // @public (undocumented)
-export const CalloutContent: React_2.FunctionComponent<ICalloutProps>;
+export const CalloutContent: React_2.FunctionComponent<React_2.PropsWithChildren<ICalloutProps>>;
 
 // @public (undocumented)
-export const CalloutContentBase: React_2.FunctionComponent<ICalloutProps>;
+export const CalloutContentBase: React_2.FunctionComponent<React_2.PropsWithChildren<ICalloutProps>>;
 
 // @public
 export function canAnyMenuItemsCheck(items: IContextualMenuItem[]): boolean;
@@ -1016,7 +1022,7 @@ export enum CollapseAllVisibility {
 export { ColorClassNames }
 
 // @public (undocumented)
-export const ColorPicker: React_2.FunctionComponent<IColorPickerProps>;
+export const ColorPicker: React_2.FunctionComponent<React_2.PropsWithChildren<IColorPickerProps>>;
 
 // @public (undocumented)
 export class ColorPickerBase extends React_2.Component<IColorPickerProps, IColorPickerState> implements IColorPicker {
@@ -1054,7 +1060,7 @@ export enum ColumnDragEndLocation {
 }
 
 // @public (undocumented)
-export const ComboBox: React_2.FunctionComponent<IComboBoxProps>;
+export const ComboBox: React_2.FunctionComponent<React_2.PropsWithChildren<IComboBoxProps>>;
 
 // @public (undocumented)
 export const CommandBar: React_2.FunctionComponent<ICommandBarProps>;
@@ -1084,13 +1090,13 @@ export const CommandButton: typeof ActionButton;
 export { CommunicationColors }
 
 // @public (undocumented)
-export const CompactPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
+export const CompactPeoplePicker: React_2.FunctionComponent<React_2.PropsWithChildren<IPeoplePickerProps>>;
 
 // @public
 export class CompactPeoplePickerBase extends BasePeoplePicker {
     static defaultProps: {
-        onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
+        onRenderItem: (props: IPeoplePickerItemSelectedProps) => React_2.JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => React_2.JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -1127,13 +1133,13 @@ export enum ConstrainMode {
 export function constructKeytip(configMap: IKeytipConfigMap, parentSequence: string[], keytip: IKeytipConfigItem): void;
 
 // @public
-export const ContextualMenu: React_2.FunctionComponent<IContextualMenuProps>;
+export const ContextualMenu: React_2.FunctionComponent<React_2.PropsWithChildren<IContextualMenuProps>>;
 
 // @public (undocumented)
-export const ContextualMenuBase: React_2.FunctionComponent<IContextualMenuProps>;
+export const ContextualMenuBase: React_2.FunctionComponent<React_2.PropsWithChildren<IContextualMenuProps>>;
 
 // @public
-export const ContextualMenuItem: React_2.FunctionComponent<IContextualMenuItemProps>;
+export const ContextualMenuItem: React_2.FunctionComponent<React_2.PropsWithChildren<IContextualMenuItemProps>>;
 
 // @public (undocumented)
 export class ContextualMenuItemBase extends React_2.Component<IContextualMenuItemProps, {}> {
@@ -1145,7 +1151,7 @@ export class ContextualMenuItemBase extends React_2.Component<IContextualMenuIte
     // (undocumented)
     openSubMenu: () => void;
     // (undocumented)
-    render(): JSX.Element;
+    render(): React_2.JSX.Element;
 }
 
 // @public (undocumented)
@@ -1277,7 +1283,7 @@ export { DelayedRender }
 export { Depths }
 
 // @public (undocumented)
-export const DetailsColumn: React_2.FunctionComponent<IDetailsColumnProps>;
+export const DetailsColumn: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsColumnProps>>;
 
 // @public
 export class DetailsColumnBase extends React_2.Component<IDetailsColumnProps> {
@@ -1293,7 +1299,7 @@ export class DetailsColumnBase extends React_2.Component<IDetailsColumnProps> {
 }
 
 // @public (undocumented)
-export const DetailsHeader: React_2.FunctionComponent<IDetailsHeaderBaseProps>;
+export const DetailsHeader: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsHeaderBaseProps>>;
 
 // @public (undocumented)
 export class DetailsHeaderBase extends React_2.Component<IDetailsHeaderBaseProps, IDetailsHeaderState> implements IDetailsHeader {
@@ -1316,7 +1322,7 @@ export class DetailsHeaderBase extends React_2.Component<IDetailsHeaderBaseProps
 }
 
 // @public (undocumented)
-export const DetailsList: React_2.FunctionComponent<IDetailsListProps>;
+export const DetailsList: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsListProps>>;
 
 // @public (undocumented)
 export class DetailsListBase extends React_2.Component<IDetailsListProps, IDetailsListState> implements IDetailsList {
@@ -1326,6 +1332,8 @@ export class DetailsListBase extends React_2.Component<IDetailsListProps, IDetai
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: {
@@ -1365,7 +1373,7 @@ export enum DetailsListLayoutMode {
 }
 
 // @public (undocumented)
-export const DetailsRow: React_2.FunctionComponent<IDetailsRowBaseProps>;
+export const DetailsRow: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsRowBaseProps>>;
 
 // @public (undocumented)
 export class DetailsRowBase extends React_2.Component<IDetailsRowBaseProps, IDetailsRowState> {
@@ -1382,7 +1390,7 @@ export class DetailsRowBase extends React_2.Component<IDetailsRowBaseProps, IDet
     static getDerivedStateFromProps(nextProps: IDetailsRowBaseProps, previousState: IDetailsRowState): IDetailsRowState;
     measureCell(index: number, onMeasureDone: (width: number) => void): void;
     // (undocumented)
-    protected _onRenderCheck(props: IDetailsRowCheckProps): JSX.Element;
+    protected _onRenderCheck(props: IDetailsRowCheckProps): React_2.JSX.Element;
     // (undocumented)
     render(): JSX.Element;
     // (undocumented)
@@ -1390,10 +1398,10 @@ export class DetailsRowBase extends React_2.Component<IDetailsRowBaseProps, IDet
 }
 
 // @public (undocumented)
-export const DetailsRowCheck: React_2.FunctionComponent<IDetailsRowCheckProps>;
+export const DetailsRowCheck: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsRowCheckProps>>;
 
 // @public
-export const DetailsRowFields: React_2.FunctionComponent<IDetailsRowFieldsProps>;
+export const DetailsRowFields: React_2.FunctionComponent<React_2.PropsWithChildren<IDetailsRowFieldsProps>>;
 
 // @public (undocumented)
 export const DetailsRowGlobalClassNames: {
@@ -1482,31 +1490,31 @@ export { divProperties }
 export const DocumentCard: React_2.FunctionComponent<IDocumentCardProps>;
 
 // @public (undocumented)
-export const DocumentCardActions: React_2.FunctionComponent<IDocumentCardActionsProps>;
+export const DocumentCardActions: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardActionsProps>>;
 
 // @public (undocumented)
-export const DocumentCardActivity: React_2.FunctionComponent<IDocumentCardActivityProps>;
+export const DocumentCardActivity: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardActivityProps>>;
 
 // @public (undocumented)
-export const DocumentCardDetails: React_2.FunctionComponent<IDocumentCardDetailsProps>;
+export const DocumentCardDetails: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardDetailsProps>>;
 
 // @public (undocumented)
-export const DocumentCardImage: React_2.FunctionComponent<IDocumentCardImageProps>;
+export const DocumentCardImage: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardImageProps>>;
 
 // @public (undocumented)
-export const DocumentCardLocation: React_2.FunctionComponent<IDocumentCardLocationProps>;
+export const DocumentCardLocation: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardLocationProps>>;
 
 // @public (undocumented)
-export const DocumentCardLogo: React_2.FunctionComponent<IDocumentCardLogoProps>;
+export const DocumentCardLogo: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardLogoProps>>;
 
 // @public (undocumented)
-export const DocumentCardPreview: React_2.FunctionComponent<IDocumentCardPreviewProps>;
+export const DocumentCardPreview: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardPreviewProps>>;
 
 // @public (undocumented)
-export const DocumentCardStatus: React_2.FunctionComponent<IDocumentCardStatusProps>;
+export const DocumentCardStatus: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardStatusProps>>;
 
 // @public (undocumented)
-export const DocumentCardTitle: React_2.FunctionComponent<IDocumentCardTitleProps>;
+export const DocumentCardTitle: React_2.FunctionComponent<React_2.PropsWithChildren<IDocumentCardTitleProps>>;
 
 // @public (undocumented)
 export enum DocumentCardType {
@@ -1531,10 +1539,10 @@ export class DragDropHelper implements IDragDropHelper {
 }
 
 // @public (undocumented)
-export const Dropdown: React_2.FunctionComponent<IDropdownProps>;
+export const Dropdown: React_2.FunctionComponent<React_2.PropsWithChildren<IDropdownProps>>;
 
 // @public (undocumented)
-export const DropdownBase: React_2.FunctionComponent<IDropdownProps>;
+export const DropdownBase: React_2.FunctionComponent<React_2.PropsWithChildren<IDropdownProps>>;
 
 export { EdgeChromiumHighContrastSelector }
 
@@ -1553,7 +1561,7 @@ export { enableBodyScroll }
 export { EventGroup }
 
 // @public (undocumented)
-export const ExpandingCard: React_2.FunctionComponent<IExpandingCardProps>;
+export const ExpandingCard: React_2.FunctionComponent<React_2.PropsWithChildren<IExpandingCardProps>>;
 
 // @public (undocumented)
 export class ExpandingCardBase extends React_2.Component<IExpandingCardProps, IExpandingCardState> {
@@ -1660,7 +1668,7 @@ export class FacepileBase extends React_2.Component<IFacepileProps, {}> {
     // (undocumented)
     static defaultProps: IFacepileProps;
     // (undocumented)
-    protected onRenderAriaDescription(): "" | JSX.Element | undefined;
+    protected onRenderAriaDescription(): "" | React_2.JSX.Element | undefined;
     // (undocumented)
     render(): JSX.Element;
 }
@@ -1704,7 +1712,7 @@ export { FocusRectsContext }
 export { FocusRectsProvider }
 
 // @public
-export const FocusTrapCallout: React_2.FunctionComponent<IFocusTrapCalloutProps>;
+export const FocusTrapCallout: React_2.FunctionComponent<React_2.PropsWithChildren<IFocusTrapCalloutProps>>;
 
 // @public (undocumented)
 export const FocusTrapZone: React_2.FunctionComponent<IFocusTrapZoneProps> & {
@@ -1831,7 +1839,7 @@ export { getFocusOutlineStyle }
 export { getFocusStyle }
 
 // @public
-export const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactElement<any, any> | null;
+export const getFontIcon: (iconName: string, className?: string, ariaLabel?: string) => React_2.ReactNode;
 
 // @public
 export function getFullColorString(color: IColor): string;
@@ -4089,7 +4097,7 @@ export const Icon: React_2.FunctionComponent<IIconProps>;
 export class IconBase extends React_2.Component<IIconProps, IIconState> {
     constructor(props: IIconProps);
     // (undocumented)
-    render(): JSX.Element;
+    render(): React_2.JSX.Element;
 }
 
 // @public (undocumented)
@@ -5729,7 +5737,7 @@ export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProp
     // (undocumented)
     onEditingComplete: (oldItem: any, newItem: any) => void;
     // (undocumented)
-    onRenderFloatingPicker?: React_2.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+    onRenderFloatingPicker?: React_2.ComponentType<React_2.PropsWithChildren<IBaseFloatingPickerProps<IPersonaProps>>>;
 }
 
 // @public (undocumented)
@@ -8349,7 +8357,7 @@ export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps<IExten
     // (undocumented)
     onExpandGroup?: (item: IExtendedPersonaProps) => void;
     // (undocumented)
-    onRenderFloatingPicker?: React_2.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+    onRenderFloatingPicker?: React_2.ComponentType<React_2.PropsWithChildren<IBaseFloatingPickerProps<IPersonaProps>>>;
     // (undocumented)
     removeMenuItemText?: string;
 }
@@ -9811,7 +9819,7 @@ export namespace KeytipEvents {
 }
 
 // @public (undocumented)
-export const KeytipLayer: React_2.FunctionComponent<IKeytipLayerProps>;
+export const KeytipLayer: React_2.FunctionComponent<React_2.PropsWithChildren<IKeytipLayerProps>>;
 
 // @public
 export class KeytipLayerBase extends React_2.Component<IKeytipLayerProps, IKeytipLayerState> {
@@ -9821,6 +9829,8 @@ export class KeytipLayerBase extends React_2.Component<IKeytipLayerProps, IKeyti
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: IKeytipLayerProps;
@@ -9905,13 +9915,13 @@ export class LabelBase extends React_2.Component<ILabelProps, {}> {
 export { labelProperties }
 
 // @public (undocumented)
-export const Layer: React_2.FunctionComponent<ILayerProps>;
+export const Layer: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerProps>>;
 
 // @public (undocumented)
-export const LayerBase: React_2.FunctionComponent<ILayerProps>;
+export const LayerBase: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerProps>>;
 
 // @public (undocumented)
-export const LayerHost: React_2.FunctionComponent<ILayerHostProps>;
+export const LayerHost: React_2.FunctionComponent<React_2.PropsWithChildren<ILayerHostProps>>;
 
 // @public (undocumented)
 export const Link: React_2.FunctionComponent<ILinkProps>;
@@ -9931,11 +9941,13 @@ export class List<T = any> extends React_2.Component<IListProps<T>, IListState<T
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: {
         startIndex: number;
-        onRenderCell: (item: any, index: number, containsFocus: boolean) => JSX.Element;
+        onRenderCell: (item: any, index: number, containsFocus: boolean) => React_2.JSX.Element;
         onRenderCellConditional: undefined;
         renderedWindowsAhead: number;
         renderedWindowsBehind: number;
@@ -9957,13 +9969,13 @@ export class List<T = any> extends React_2.Component<IListProps<T>, IListState<T
 }
 
 // @public (undocumented)
-export const ListPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
+export const ListPeoplePicker: React_2.FunctionComponent<React_2.PropsWithChildren<IPeoplePickerProps>>;
 
 // @public
 export class ListPeoplePickerBase extends MemberListPeoplePicker {
     static defaultProps: {
-        onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
+        onRenderItem: (props: IPeoplePickerItemSelectedProps) => React_2.JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => React_2.JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -10094,12 +10106,14 @@ export { MotionDurations }
 export { MotionTimings }
 
 // @public (undocumented)
-export const Nav: React_2.FunctionComponent<INavProps>;
+export const Nav: React_2.FunctionComponent<React_2.PropsWithChildren<INavProps>>;
 
 // @public (undocumented)
 export class NavBase extends React_2.Component<INavProps, INavState> implements INav {
     constructor(props: INavProps);
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: INavProps;
@@ -10115,13 +10129,13 @@ export { NeutralColors }
 export { normalize }
 
 // @public (undocumented)
-export const NormalPeoplePicker: React_2.FunctionComponent<IPeoplePickerProps>;
+export const NormalPeoplePicker: React_2.FunctionComponent<React_2.PropsWithChildren<IPeoplePickerProps>>;
 
 // @public
 export class NormalPeoplePickerBase extends BasePeoplePicker {
     static defaultProps: {
-        onRenderItem: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
-        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => JSX.Element;
+        onRenderItem: (props: IPeoplePickerItemSelectedProps) => React_2.JSX.Element;
+        onRenderSuggestionsItem: (personaProps: IPersonaProps, suggestionsProps?: IBasePickerSuggestionsProps) => React_2.JSX.Element;
         createGenericItem: typeof createGenericItem;
     };
 }
@@ -10178,7 +10192,7 @@ export class OverlayBase extends React_2.Component<IOverlayProps, {}> {
 }
 
 // @public
-export const Panel: React_2.FunctionComponent<IPanelProps>;
+export const Panel: React_2.FunctionComponent<React_2.PropsWithChildren<IPanelProps>>;
 
 // Warning: (ae-forgotten-export) The symbol "IPanelState" needs to be exported by the entry point index.d.ts
 //
@@ -10194,6 +10208,8 @@ export class PanelBase extends React_2.Component<IPanelProps, IPanelState> imple
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: IPanelProps;
@@ -10224,16 +10240,16 @@ export enum PanelType {
 export { PartialTheme }
 
 // @public (undocumented)
-export const PeoplePickerItem: React_2.FunctionComponent<IPeoplePickerItemSelectedProps>;
+export const PeoplePickerItem: React_2.FunctionComponent<React_2.PropsWithChildren<IPeoplePickerItemSelectedProps>>;
 
 // @public (undocumented)
-export const PeoplePickerItemBase: (props: IPeoplePickerItemSelectedProps) => JSX.Element;
+export const PeoplePickerItemBase: (props: IPeoplePickerItemSelectedProps) => React_2.JSX.Element;
 
 // @public (undocumented)
-export const PeoplePickerItemSuggestion: React_2.FunctionComponent<IPeoplePickerItemSuggestionProps>;
+export const PeoplePickerItemSuggestion: React_2.FunctionComponent<React_2.PropsWithChildren<IPeoplePickerItemSuggestionProps>>;
 
 // @public (undocumented)
-export const PeoplePickerItemSuggestionBase: (props: IPeoplePickerItemSuggestionProps) => JSX.Element;
+export const PeoplePickerItemSuggestionBase: (props: IPeoplePickerItemSuggestionProps) => React_2.JSX.Element;
 
 // @public
 export const Persona: React_2.FunctionComponent<IPersonaProps>;
@@ -10399,10 +10415,10 @@ export namespace personaSize {
 }
 
 // @public
-export const Pivot: React_2.FunctionComponent<IPivotProps>;
+export const Pivot: React_2.FunctionComponent<React_2.PropsWithChildren<IPivotProps>>;
 
 // @public (undocumented)
-export const PivotBase: React_2.FunctionComponent<IPivotProps>;
+export const PivotBase: React_2.FunctionComponent<React_2.PropsWithChildren<IPivotProps>>;
 
 // @public (undocumented)
 export class PivotItem extends React_2.Component<IPivotItemProps, {}> {
@@ -10430,7 +10446,7 @@ export const enum PivotLinkSize {
 export type PivotLinkSizeType = 'normal' | 'large';
 
 // @public (undocumented)
-export const PlainCard: React_2.FunctionComponent<IPlainCardProps>;
+export const PlainCard: React_2.FunctionComponent<React_2.PropsWithChildren<IPlainCardProps>>;
 
 // @public (undocumented)
 export class PlainCardBase extends React_2.Component<IPlainCardProps, {}> {
@@ -10501,7 +10517,7 @@ export class ProgressIndicatorBase extends React_2.Component<IProgressIndicatorP
         width: number;
     };
     // (undocumented)
-    render(): JSX.Element;
+    render(): React_2.JSX.Element;
 }
 
 export { PulsingBeaconAnimationStyles }
@@ -10630,7 +10646,7 @@ export { ScreenWidthMinXXLarge }
 export { ScreenWidthMinXXXLarge }
 
 // @public (undocumented)
-export const ScrollablePane: React_2.FunctionComponent<IScrollablePaneProps>;
+export const ScrollablePane: React_2.FunctionComponent<React_2.PropsWithChildren<IScrollablePaneProps>>;
 
 // @public (undocumented)
 export class ScrollablePaneBase extends React_2.Component<IScrollablePaneProps, IScrollablePaneState> implements IScrollablePane {
@@ -10646,6 +10662,8 @@ export class ScrollablePaneBase extends React_2.Component<IScrollablePaneProps,
     // (undocumented)
     get contentContainer(): HTMLDivElement | null;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     forceLayoutUpdate(): void;
@@ -10865,7 +10883,7 @@ export const ShimmerCircle: React_2.FunctionComponent<IShimmerCircleProps>;
 export const ShimmerCircleBase: React_2.FunctionComponent<IShimmerCircleProps>;
 
 // @public (undocumented)
-export const ShimmeredDetailsList: React_2.FunctionComponent<IShimmeredDetailsListProps>;
+export const ShimmeredDetailsList: React_2.FunctionComponent<React_2.PropsWithChildren<IShimmeredDetailsListProps>>;
 
 // @public (undocumented)
 export class ShimmeredDetailsListBase extends React_2.Component<IShimmeredDetailsListProps, {}> {
@@ -10946,7 +10964,7 @@ export class SpinnerBase extends React_2.Component<ISpinnerProps, any> {
     // (undocumented)
     static defaultProps: ISpinnerProps;
     // (undocumented)
-    render(): JSX.Element;
+    render(): React_2.JSX.Element;
 }
 
 // @public
@@ -10969,12 +10987,12 @@ export enum SpinnerType {
 }
 
 // @public (undocumented)
-export const Stack: React_2.FunctionComponent<IStackProps> & {
+export const Stack: React_2.FunctionComponent<React_2.PropsWithChildren<IStackProps>> & {
     Item: React_2.FunctionComponent<IStackItemProps>;
 };
 
 // @public (undocumented)
-export const StackItem: React_2.FunctionComponent<IStackItemProps>;
+export const StackItem: React_2.FunctionComponent<React_2.PropsWithChildren<IStackItemProps>>;
 
 // @public (undocumented)
 export class Sticky extends React_2.Component<IStickyProps, IStickyState> {
@@ -10992,6 +11010,8 @@ export class Sticky extends React_2.Component<IStickyProps, IStickyState> {
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof ScrollablePaneContext>;
+    // (undocumented)
     static contextType: React_2.Context<IScrollablePaneContext>;
     // (undocumented)
     static defaultProps: IStickyProps;
@@ -11251,26 +11271,26 @@ export const SwatchColorPickerBase: React_2.FunctionComponent<ISwatchColorPicker
 export { tableProperties }
 
 // @public (undocumented)
-export const TagItem: React_2.FunctionComponent<ITagItemProps>;
+export const TagItem: React_2.FunctionComponent<React_2.PropsWithChildren<ITagItemProps>>;
 
 // @public (undocumented)
-export const TagItemBase: (props: ITagItemProps) => JSX.Element;
+export const TagItemBase: (props: ITagItemProps) => React_2.JSX.Element;
 
 // @public (undocumented)
-export const TagItemSuggestion: React_2.FunctionComponent<ITagItemSuggestionProps>;
+export const TagItemSuggestion: React_2.FunctionComponent<React_2.PropsWithChildren<ITagItemSuggestionProps>>;
 
 // @public (undocumented)
-export const TagItemSuggestionBase: (props: ITagItemSuggestionProps) => JSX.Element;
+export const TagItemSuggestionBase: (props: ITagItemSuggestionProps) => React_2.JSX.Element;
 
 // @public (undocumented)
-export const TagPicker: React_2.FunctionComponent<ITagPickerProps>;
+export const TagPicker: React_2.FunctionComponent<React_2.PropsWithChildren<ITagPickerProps>>;
 
 // @public (undocumented)
 export class TagPickerBase extends BasePicker<ITag, ITagPickerProps> {
     // (undocumented)
     static defaultProps: {
-        onRenderItem: (props: ITagItemProps) => JSX.Element;
-        onRenderSuggestionsItem: (props: ITag) => JSX.Element;
+        onRenderItem: (props: ITagItemProps) => React_2.JSX.Element;
+        onRenderSuggestionsItem: (props: ITag) => React_2.JSX.Element;
     };
 }
 
@@ -11351,7 +11371,7 @@ export class ThemeGenerator {
 }
 
 // @public
-export const ThemeProvider: React_2.FunctionComponent<ThemeProviderProps>;
+export const ThemeProvider: React_2.FunctionComponent<React_2.PropsWithChildren<ThemeProviderProps>>;
 
 // @public
 export interface ThemeProviderProps extends React_2.HTMLAttributes<HTMLDivElement> {
@@ -11371,7 +11391,7 @@ export { thProperties }
 export { TimeConstants }
 
 // @public (undocumented)
-export const TimePicker: React_2.FunctionComponent<ITimePickerProps>;
+export const TimePicker: React_2.FunctionComponent<React_2.PropsWithChildren<ITimePickerProps>>;
 
 // @public
 export type TimePickerValidationResultData = {
@@ -11387,7 +11407,7 @@ export const ToggleBase: React_2.FunctionComponent<IToggleProps>;
 export { toMatrix }
 
 // @public (undocumented)
-export const Tooltip: React_2.FunctionComponent<ITooltipProps>;
+export const Tooltip: React_2.FunctionComponent<React_2.PropsWithChildren<ITooltipProps>>;
 
 // @public (undocumented)
 export class TooltipBase extends React_2.Component<ITooltipProps, any> {
@@ -11406,7 +11426,7 @@ export enum TooltipDelay {
 }
 
 // @public (undocumented)
-export const TooltipHost: React_2.FunctionComponent<ITooltipHostProps>;
+export const TooltipHost: React_2.FunctionComponent<React_2.PropsWithChildren<ITooltipHostProps>>;
 
 // @public (undocumented)
 export class TooltipHostBase extends React_2.Component<ITooltipHostProps, ITooltipHostState> implements ITooltipHost {
@@ -11416,6 +11436,8 @@ export class TooltipHostBase extends React_2.Component<ITooltipHostProps, IToolt
     // (undocumented)
     componentWillUnmount(): void;
     // (undocumented)
+    context: React_2.ContextType<typeof WindowContext>;
+    // (undocumented)
     static contextType: React_2.Context<WindowProviderProps>;
     // (undocumented)
     static defaultProps: {
diff --git a/packages/react/src/components/Autofill/Autofill.tsx b/packages/react/src/components/Autofill/Autofill.tsx
index 903d562530141..e30bd184b4ea2 100644
--- a/packages/react/src/components/Autofill/Autofill.tsx
+++ b/packages/react/src/components/Autofill/Autofill.tsx
@@ -34,6 +34,7 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
   };
   // need to check WindowContext to get the provided document
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _inputElement = React.createRef<HTMLInputElement>();
   private _autoFillEnabled = true;
@@ -106,7 +107,7 @@ export class Autofill extends React.Component<IAutofillProps, IAutofillState> im
       return;
     }
 
-    const document = this.context?.window.document || getDocument(this._inputElement.current);
+    const document = this.context?.window?.document || getDocument(this._inputElement.current);
     const isFocused = this._inputElement.current && this._inputElement.current === document?.activeElement;
 
     if (
diff --git a/packages/react/src/components/Callout/CalloutContent.base.tsx b/packages/react/src/components/Callout/CalloutContent.base.tsx
index 89550932965a2..1203acfadd6ea 100644
--- a/packages/react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/react/src/components/Callout/CalloutContent.base.tsx
@@ -469,7 +469,7 @@ function useDismissHandlers(
   return mouseDownHandlers;
 }
 
-export const CalloutContentBase: React.FunctionComponent<ICalloutProps> = React.memo(
+export const CalloutContentBase: React.FunctionComponent<React.PropsWithChildren<ICalloutProps>> = React.memo(
   React.forwardRef<HTMLDivElement, ICalloutProps>((propsWithoutDefaults, forwardedRef) => {
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
 
@@ -502,7 +502,7 @@ export const CalloutContentBase: React.FunctionComponent<ICalloutProps> = React.
 
     const hostElement = React.useRef<HTMLDivElement>(null);
     const popupRef = React.useRef<HTMLDivElement>(null);
-    const mergedPopupRefs = useMergedRefs(popupRef, popupProps?.ref);
+    const mergedPopupRefs = useMergedRefs(popupRef, popupProps?.ref as React.Ref<HTMLDivElement>);
     const [calloutElement, setCalloutElement] = React.useState<HTMLDivElement | null>(null);
     const calloutCallback = React.useCallback((calloutEl: any) => {
       setCalloutElement(calloutEl);
diff --git a/packages/react/src/components/Callout/CalloutContent.tsx b/packages/react/src/components/Callout/CalloutContent.tsx
index fdd15f499c323..0af6d42713be5 100644
--- a/packages/react/src/components/Callout/CalloutContent.tsx
+++ b/packages/react/src/components/Callout/CalloutContent.tsx
@@ -1,9 +1,14 @@
 import * as React from 'react';
+import type { ICalloutProps } from './Callout.types';
 import { styled } from '../../Utilities';
 import { CalloutContentBase } from './CalloutContent.base';
 import { getStyles } from './CalloutContent.styles';
-import type { ICalloutProps } from './Callout.types';
 
-export const CalloutContent: React.FunctionComponent<ICalloutProps> = styled(CalloutContentBase, getStyles, undefined, {
-  scope: 'CalloutContent',
-});
+export const CalloutContent: React.FunctionComponent<React.PropsWithChildren<ICalloutProps>> = styled(
+  CalloutContentBase,
+  getStyles,
+  undefined,
+  {
+    scope: 'CalloutContent',
+  },
+);
diff --git a/packages/react/src/components/Callout/FocusTrapCallout.tsx b/packages/react/src/components/Callout/FocusTrapCallout.tsx
index ae1f38ab07b37..b32e554d347c6 100644
--- a/packages/react/src/components/Callout/FocusTrapCallout.tsx
+++ b/packages/react/src/components/Callout/FocusTrapCallout.tsx
@@ -8,7 +8,7 @@ import type { IFocusTrapCalloutProps } from './FocusTrapCallout.types';
  * A special Callout that uses FocusTrapZone to trap focus
  * @param props - Props for the component
  */
-export const FocusTrapCallout: React.FunctionComponent<IFocusTrapCalloutProps> = (
+export const FocusTrapCallout: React.FunctionComponent<React.PropsWithChildren<IFocusTrapCalloutProps>> = (
   props: IFocusTrapCalloutProps,
 ): JSX.Element => {
   return (
diff --git a/packages/react/src/components/ColorPicker/ColorPicker.test.tsx b/packages/react/src/components/ColorPicker/ColorPicker.test.tsx
index b6082d1d7d40f..89b2a5da8ae83 100644
--- a/packages/react/src/components/ColorPicker/ColorPicker.test.tsx
+++ b/packages/react/src/components/ColorPicker/ColorPicker.test.tsx
@@ -380,7 +380,7 @@ describe('ColorPicker', () => {
 
     const redInput = getAllByRole('textbox')[1] as HTMLInputElement;
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '255');
+    userEvent.paste('255');
     expect(onChange1).toHaveBeenCalledTimes(1);
     expect(newColor!.r).toBe(255);
     expect(colorPicker!.color.r).toBe(0);
@@ -550,12 +550,12 @@ describe('ColorPicker', () => {
 
     // new value too long "pasted" => use substring
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '1000');
+    userEvent.paste('1000');
     validateChange({ calls: 4, prop: 'r', value: 100, input: redInput });
 
     // invalid new value too long "pasted" => use substring but don't call onChange
     userEvent.clear(redInput);
-    userEvent.paste(redInput, '4567');
+    userEvent.paste('4567');
 
     validateChange({ calls: 4, prop: 'r', value: 100, input: redInput, inputValue: '456' });
   });
@@ -642,7 +642,7 @@ describe('ColorPicker', () => {
     validateChange({ calls: 1, prop: 'hex', value: '123456', input: hexInput });
 
     // invalid new value too long "pasted" => ignore
-    userEvent.paste(hexInput, 'hello world');
+    userEvent.paste('hello world');
     validateChange({ calls: 1, prop: 'hex', value: '123456', input: hexInput });
   });
 
@@ -719,7 +719,7 @@ describe('ColorPicker', () => {
 
     // value too large => allowed in field but onChange not called
     userEvent.clear(transparencyInput);
-    userEvent.paste(transparencyInput, '123');
+    userEvent.paste('123');
     expect(onChange).toHaveBeenCalledTimes(0);
     expect(colorPicker!.color.a).toBe(30); // original value
     expect(colorPicker!.color.t).toBe(70);
diff --git a/packages/react/src/components/ColorPicker/ColorPicker.tsx b/packages/react/src/components/ColorPicker/ColorPicker.tsx
index af5d229cc101c..c4d6b1a4a55b0 100644
--- a/packages/react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/react/src/components/ColorPicker/ColorPicker.tsx
@@ -4,7 +4,7 @@ import { ColorPickerBase } from './ColorPicker.base';
 import { getStyles } from './ColorPicker.styles';
 import type { IColorPickerProps, IColorPickerStyles, IColorPickerStyleProps } from './ColorPicker.types';
 
-export const ColorPicker: React.FunctionComponent<IColorPickerProps> = styled<
+export const ColorPicker: React.FunctionComponent<React.PropsWithChildren<IColorPickerProps>> = styled<
   IColorPickerProps,
   IColorPickerStyleProps,
   IColorPickerStyles
diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx
index 001274abfe37a..1fb15fadecad7 100644
--- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx
+++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.base.tsx
@@ -29,6 +29,7 @@ export class ColorRectangleBase
   implements IColorRectangle
 {
   public static contextType = WindowContext;
+
   public static defaultProps: Partial<IColorRectangleProps> = {
     minSize: 220,
     ariaLabel: 'Saturation and brightness',
@@ -36,6 +37,8 @@ export class ColorRectangleBase
     ariaDescription: 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.',
   };
 
+  public context: React.ContextType<typeof WindowContext>;
+
   private _disposables: (() => void)[] = [];
   private _root = React.createRef<HTMLDivElement>();
   private _isAdjustingSaturation: boolean = true;
diff --git a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx
index 163bb92dfee19..fb2a752934630 100644
--- a/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx
+++ b/packages/react/src/components/ColorPicker/ColorRectangle/ColorRectangle.tsx
@@ -4,7 +4,7 @@ import { ColorRectangleBase } from './ColorRectangle.base';
 import { getStyles } from './ColorRectangle.styles';
 import type { IColorRectangleProps, IColorRectangleStyles, IColorRectangleStyleProps } from './ColorRectangle.types';
 
-export const ColorRectangle: React.FunctionComponent<IColorRectangleProps> = styled<
+export const ColorRectangle: React.FunctionComponent<React.PropsWithChildren<IColorRectangleProps>> = styled<
   IColorRectangleProps,
   IColorRectangleStyleProps,
   IColorRectangleStyles
diff --git a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx
index 454472334951b..6e5a65201693a 100644
--- a/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx
+++ b/packages/react/src/components/ColorPicker/ColorSlider/ColorSlider.tsx
@@ -4,7 +4,7 @@ import { ColorSliderBase } from './ColorSlider.base';
 import { getStyles } from './ColorSlider.styles';
 import type { IColorSliderProps, IColorSliderStyleProps, IColorSliderStyles } from './ColorSlider.types';
 
-export const ColorSlider: React.FunctionComponent<IColorSliderProps> = styled<
+export const ColorSlider: React.FunctionComponent<React.PropsWithChildren<IColorSliderProps>> = styled<
   IColorSliderProps,
   IColorSliderStyleProps,
   IColorSliderStyles
diff --git a/packages/react/src/components/ComboBox/ComboBox.test.tsx b/packages/react/src/components/ComboBox/ComboBox.test.tsx
index 235039068bf7c..e0c35b2177cc3 100644
--- a/packages/react/src/components/ComboBox/ComboBox.test.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.test.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 import { render, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 
 import { isConformant } from '../../common/isConformant';
 import { useKeytipRef } from '../../Keytips';
@@ -104,7 +104,7 @@ describe('ComboBox', () => {
       keySequences: ['a'],
     };
 
-    const TestComponent: React.FunctionComponent = () => {
+    const TestComponent: React.FunctionComponent<React.PropsWithChildren<unknown>> = () => {
       const keytipRef = useKeytipRef<HTMLDivElement>({ keytipProps });
       return <ComboBox ariaDescribedBy="test-foo" options={DEFAULT_OPTIONS} ref={keytipRef} />;
     };
@@ -207,7 +207,7 @@ describe('ComboBox', () => {
     const combobox = getByRole('combobox');
     // open combobox to select one option
     userEvent.click(combobox);
-    userEvent.click(getAllByRole('option')[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(getAllByRole('option')[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     // reopen combobox to check selected option
     userEvent.click(combobox);
     expect(getAllByRole('option')[0].getAttribute('aria-selected')).toEqual('true');
@@ -266,7 +266,7 @@ describe('ComboBox', () => {
     const combobox = getByRole('combobox');
     userEvent.click(combobox);
     const selectedOption = getAllByRole('option')[1];
-    userEvent.click(selectedOption, undefined, { skipPointerEventsCheck: true });
+    userEvent.click(selectedOption, { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     // check item is selected
     expect(combobox.getAttribute('value')).toEqual('2');
@@ -279,7 +279,7 @@ describe('ComboBox', () => {
     const combobox = getByRole('combobox');
     userEvent.click(combobox);
     const selectedOption = getAllByRole('option')[1];
-    userEvent.click(selectedOption, undefined, { skipPointerEventsCheck: true });
+    userEvent.click(selectedOption, { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     // check item is not selected since combobox is controlled
     expect(combobox.getAttribute('value')).toEqual('1');
@@ -297,7 +297,7 @@ describe('ComboBox', () => {
     // select second option
     const secondOption = getAllByRole('option')[1];
     expect(secondOption.getAttribute('aria-selected')).toEqual('false'); // ensure it's not already selected
-    userEvent.click(secondOption, undefined, { skipPointerEventsCheck: true });
+    userEvent.click(secondOption, { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     // checkbox selected
     expect(secondOption.getAttribute('aria-selected')).toEqual('true');
@@ -834,9 +834,9 @@ describe('ComboBox', () => {
     userEvent.type(combobox, '{enter}');
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[1], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[1], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['1', '2', '3']);
   });
 
@@ -853,8 +853,8 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(combobox.getAttribute('value')).toEqual('');
   });
 
@@ -865,8 +865,8 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     userEvent.click(combobox);
     userEvent.click(container);
 
@@ -884,8 +884,8 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     userEvent.click(combobox);
     userEvent.click(container);
     const keys = [DEFAULT_OPTIONS[0].key, DEFAULT_OPTIONS[2].key];
@@ -902,9 +902,9 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[1], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[1], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(onItemClickMock).toHaveBeenCalledTimes(3);
   });
 
@@ -922,7 +922,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     userEvent.type(combobox, '{esc}');
     userEvent.click(container);
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['selectAll', '1', '2', '3']);
@@ -945,7 +945,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['selectAll', '2', '3']);
   });
 
@@ -963,7 +963,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['selectAll', '1', '2']);
   });
 
@@ -982,7 +982,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['2', 'selectAll']);
   });
 
@@ -1001,12 +1001,12 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     // un-check one option
-    userEvent.click(options[1], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[1], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['2', '3']);
     // re-check option
-    userEvent.click(options[1], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[1], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['2', '3', '1', 'selectAll']);
   });
 
@@ -1042,11 +1042,11 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[1], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[1], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(options[0].getAttribute('aria-checked')).toEqual('mixed');
 
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
-    userEvent.click(options[3], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
+    userEvent.click(options[3], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     expect(options[0].getAttribute('aria-checked')).toEqual('mixed');
   });
@@ -1065,7 +1065,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(comboBoxRef.current!.selectedOptions.map(o => o.key)).toEqual(['selectAll', '1', '2', '3']);
   });
 
@@ -1082,7 +1082,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(combobox.getAttribute('value')).toEqual('Select All');
   });
 
@@ -1094,7 +1094,7 @@ describe('ComboBox', () => {
     userEvent.click(combobox);
 
     const options = getAllByRole('option');
-    userEvent.click(options[0], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[0], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     expect(onItemClickMock).toHaveBeenCalledTimes(1);
   });
 
@@ -1227,7 +1227,7 @@ describe('ComboBox', () => {
     const options = getAllByRole('option');
     // This should toggle the checkbox off. With multi-select the currentPendingValue is not reset on input change
     // because it would break keyboard accessibility
-    userEvent.click(options[3], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[3], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     // with 'ManuallyEnteredValue' still in the input, on blur it should toggle the check back to on
     userEvent.click(container);
     expect(combobox.getAttribute('value')).toEqual(comboBoxOption.text);
@@ -1250,7 +1250,7 @@ describe('ComboBox', () => {
 
     userEvent.click(caretdownButton);
     const options = getAllByRole('option');
-    userEvent.click(options[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(options[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
     //click on container to trigger onBlur
     userEvent.click(container);
     expect(combobox.getAttribute('value')).toEqual(DEFAULT_OPTIONS[2].text);
diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx
index 9b6823d72a6d7..09008b3bd9a55 100644
--- a/packages/react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/react/src/components/ComboBox/ComboBox.tsx
@@ -173,7 +173,7 @@ function useOptionsState({ options, defaultSelectedKey, selectedKey }: IComboBox
   ] as const;
 }
 
-export const ComboBox: React.FunctionComponent<IComboBoxProps> = React.forwardRef<HTMLDivElement, IComboBoxProps>(
+export const ComboBox: React.FunctionComponent<React.PropsWithChildren<IComboBoxProps>> = React.forwardRef<HTMLDivElement, IComboBoxProps>(
   (propsWithoutDefaults: IComboBoxProps, forwardedRef: React.Ref<HTMLDivElement>) => {
     const { ref, ...props } = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -247,6 +247,7 @@ function findFirstDescendant(element: HTMLElement, match: (element: HTMLElement)
 @customizable('ComboBox', ['theme', 'styles'], true)
 class ComboBoxInternal extends React.Component<IComboBoxInternalProps, IComboBoxState> implements IComboBox {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   /** The input aspect of the combo box */
   private _autofill = React.createRef<IAutofill>();
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
index d29bbe64054d8..198a4a10c387b 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
+++ b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
@@ -370,10 +370,9 @@ function useKeyHandlers(
   const shouldHandleKeyDown = (ev: React.KeyboardEvent<HTMLElement>) => {
     return (
       // eslint-disable-next-line @typescript-eslint/no-deprecated
+      (// eslint-disable-next-line @typescript-eslint/no-deprecated
       ev.which === KeyCodes.escape ||
-      shouldCloseSubMenu(ev) ||
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey))
+      shouldCloseSubMenu(ev) || (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey)))
     );
   };
 
@@ -724,8 +723,9 @@ function useMouseHandlers(
 }
 //#endregion
 
-export const ContextualMenuBase: React.FunctionComponent<IContextualMenuProps> = React.memo(
+export const ContextualMenuBase: React.FunctionComponent<React.PropsWithChildren<IContextualMenuProps>> = React.memo(
   React.forwardRef<HTMLDivElement, IContextualMenuProps>((propsWithoutDefaults, forwardedRef) => {
+    // @ts-expect-error TODO: React18 omits ref from forwarded props
     const { ref, ...props } = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
     const hostElement = React.useRef<HTMLDivElement>(null);
     const asyncTracker = useAsync();
@@ -1385,7 +1385,7 @@ function onItemMouseDown(item: IContextualMenuItem, ev: React.MouseEvent<HTMLEle
 function onDefaultRenderSubMenu(
   subMenuProps: IContextualMenuProps,
   defaultRender?: IRenderFunction<IContextualMenuProps>,
-): JSX.Element {
+): React.JSX.Element {
   throw Error(
     'ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +
       'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.',
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.tsx
index ab3f7a82f436a..81811ec6f4a0f 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -9,7 +9,7 @@ function onRenderSubMenu(subMenuProps: IContextualMenuProps) {
 }
 
 // This is to prevent cyclic import with ContextualMenu.base.tsx.
-const LocalContextualMenu: React.FunctionComponent<IContextualMenuProps> = styled<
+const LocalContextualMenu: React.FunctionComponent<React.PropsWithChildren<IContextualMenuProps>> = styled<
   IContextualMenuProps,
   IContextualMenuStyleProps,
   IContextualMenuStyles
@@ -27,5 +27,5 @@ const LocalContextualMenu: React.FunctionComponent<IContextualMenuProps> = style
 /**
  * ContextualMenu description
  */
-export const ContextualMenu: React.FunctionComponent<IContextualMenuProps> = LocalContextualMenu;
+export const ContextualMenu: React.FunctionComponent<React.PropsWithChildren<IContextualMenuProps>> = LocalContextualMenu;
 ContextualMenu.displayName = 'ContextualMenu';
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts b/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts
index 03e98530d49f3..39cbe913bf913 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts
+++ b/packages/react/src/components/ContextualMenu/ContextualMenuItem.ts
@@ -11,7 +11,7 @@ import type {
 /**
  * ContextualMenuItem description
  */
-export const ContextualMenuItem: React.FunctionComponent<IContextualMenuItemProps> = styled<
+export const ContextualMenuItem: React.FunctionComponent<React.PropsWithChildren<IContextualMenuItemProps>> = styled<
   IContextualMenuItemProps,
   IContextualMenuItemStyleProps,
   IContextualMenuItemStyles
diff --git a/packages/react/src/components/DetailsList/DetailsColumn.ts b/packages/react/src/components/DetailsList/DetailsColumn.ts
index 666f71e2237ec..77180572ec906 100644
--- a/packages/react/src/components/DetailsList/DetailsColumn.ts
+++ b/packages/react/src/components/DetailsList/DetailsColumn.ts
@@ -4,7 +4,7 @@ import { DetailsColumnBase } from './DetailsColumn.base';
 import { getDetailsColumnStyles } from './DetailsColumn.styles';
 import type { IDetailsColumnProps, IDetailsColumnStyleProps, IDetailsColumnStyles } from './DetailsColumn.types';
 
-export const DetailsColumn: React.FunctionComponent<IDetailsColumnProps> = styled<
+export const DetailsColumn: React.FunctionComponent<React.PropsWithChildren<IDetailsColumnProps>> = styled<
   IDetailsColumnProps,
   IDetailsColumnStyleProps,
   IDetailsColumnStyles
diff --git a/packages/react/src/components/DetailsList/DetailsHeader.ts b/packages/react/src/components/DetailsList/DetailsHeader.ts
index fed24ace19b88..96eea5a5fdb27 100644
--- a/packages/react/src/components/DetailsList/DetailsHeader.ts
+++ b/packages/react/src/components/DetailsList/DetailsHeader.ts
@@ -9,7 +9,7 @@ import type {
   IDetailsHeaderStyles,
 } from './DetailsHeader.types';
 
-export const DetailsHeader: React.FunctionComponent<IDetailsHeaderBaseProps> = styled<
+export const DetailsHeader: React.FunctionComponent<React.PropsWithChildren<IDetailsHeaderBaseProps>> = styled<
   IDetailsHeaderBaseProps,
   IDetailsHeaderStyleProps,
   IDetailsHeaderStyles
diff --git a/packages/react/src/components/DetailsList/DetailsList.base.tsx b/packages/react/src/components/DetailsList/DetailsList.base.tsx
index ddf29a64d3d21..421f7b7ed8bc8 100644
--- a/packages/react/src/components/DetailsList/DetailsList.base.tsx
+++ b/packages/react/src/components/DetailsList/DetailsList.base.tsx
@@ -113,7 +113,7 @@ type IDetailsListInnerProps = Omit<IDetailsListProps, 'selection'> &
  * Since many existing consumers of DetailsList expect `ref` to return a `DetailsList`,
  * this inner component handles rendering while the outer maintains compatibility.
  */
-const DetailsListInner: React.ComponentType<IDetailsListInnerProps> = (
+const DetailsListInner: React.ComponentType<React.PropsWithChildren<IDetailsListInnerProps>> = (
   props: IDetailsListInnerProps,
 ): JSX.Element | null => {
   const { selection } = props;
@@ -782,6 +782,7 @@ export class DetailsListBase extends React.Component<IDetailsListProps, IDetails
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   // References
   private _async: Async;
diff --git a/packages/react/src/components/DetailsList/DetailsList.ts b/packages/react/src/components/DetailsList/DetailsList.ts
index a851f80d6bebd..f1fbfddc74cf7 100644
--- a/packages/react/src/components/DetailsList/DetailsList.ts
+++ b/packages/react/src/components/DetailsList/DetailsList.ts
@@ -4,7 +4,7 @@ import { DetailsListBase } from './DetailsList.base';
 import { getDetailsListStyles } from './DetailsList.styles';
 import type { IDetailsListProps, IDetailsListStyleProps, IDetailsListStyles } from './DetailsList.types';
 
-export const DetailsList: React.FunctionComponent<IDetailsListProps> = styled<
+export const DetailsList: React.FunctionComponent<React.PropsWithChildren<IDetailsListProps>> = styled<
   IDetailsListProps,
   IDetailsListStyleProps,
   IDetailsListStyles
diff --git a/packages/react/src/components/DetailsList/DetailsRow.ts b/packages/react/src/components/DetailsList/DetailsRow.ts
index fe71bd69d4279..2c677aaf2842a 100644
--- a/packages/react/src/components/DetailsList/DetailsRow.ts
+++ b/packages/react/src/components/DetailsList/DetailsRow.ts
@@ -9,7 +9,7 @@ import type {
   IDetailsRowStyles,
 } from './DetailsRow.types';
 
-export const DetailsRow: React.FunctionComponent<IDetailsRowBaseProps> = styled<
+export const DetailsRow: React.FunctionComponent<React.PropsWithChildren<IDetailsRowBaseProps>> = styled<
   IDetailsRowBaseProps,
   IDetailsRowStyleProps,
   IDetailsRowStyles
diff --git a/packages/react/src/components/DetailsList/DetailsRowFields.tsx b/packages/react/src/components/DetailsList/DetailsRowFields.tsx
index 751d09de97531..d755f3a28dd0c 100644
--- a/packages/react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/react/src/components/DetailsList/DetailsRowFields.tsx
@@ -24,7 +24,7 @@ const getCellText = (item: any, column: IColumn): string => {
  *
  * {@docCategory DetailsList}
  */
-export const DetailsRowFields: React.FunctionComponent<IDetailsRowFieldsProps> = props => {
+export const DetailsRowFields: React.FunctionComponent<React.PropsWithChildren<IDetailsRowFieldsProps>> = props => {
   const {
     columns,
     rowClassNames,
diff --git a/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts b/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts
index 8f4186f9e43c0..6ae9fb9fcb984 100644
--- a/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts
+++ b/packages/react/src/components/DetailsList/ShimmeredDetailsList.ts
@@ -8,7 +8,7 @@ import type {
   IShimmeredDetailsListStyles,
 } from './ShimmeredDetailsList.types';
 
-export const ShimmeredDetailsList: React.FunctionComponent<IShimmeredDetailsListProps> = styled<
+export const ShimmeredDetailsList: React.FunctionComponent<React.PropsWithChildren<IShimmeredDetailsListProps>> = styled<
   IShimmeredDetailsListProps,
   IShimmeredDetailsListStyleProps,
   IShimmeredDetailsListStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx
index 3f6ce4bb9f67e..c2cea8aa69c72 100644
--- a/packages/react/src/components/DocumentCard/DocumentCard.base.tsx
+++ b/packages/react/src/components/DocumentCard/DocumentCard.base.tsx
@@ -34,6 +34,7 @@ export class DocumentCardBase extends React.Component<IDocumentCardProps, any> i
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _rootElement = React.createRef<HTMLDivElement>();
   private _classNames: IProcessedStyleSet<IDocumentCardStyles>;
diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx
index 42864db0d1391..07a244f4f6293 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx
+++ b/packages/react/src/components/DocumentCard/DocumentCardActions.base.tsx
@@ -23,7 +23,7 @@ export class DocumentCardActionsBase extends React.Component<IDocumentCardAction
     initializeComponentRef(this);
   }
 
-  public render(): JSX.Element {
+  public render(): React.JSX.Element {
     const { actions, views, styles, theme, className } = this.props;
 
     this._classNames = getClassNames(styles!, {
@@ -45,7 +45,7 @@ export class DocumentCardActionsBase extends React.Component<IDocumentCardAction
         {(views as number) > 0 && (
           <div className={this._classNames.views}>
             <Icon iconName="View" className={this._classNames.viewsIcon} />
-            {views}
+            {views as number}
           </div>
         )}
       </div>
diff --git a/packages/react/src/components/DocumentCard/DocumentCardActions.ts b/packages/react/src/components/DocumentCard/DocumentCardActions.ts
index 87af54033190d..5a1153ea9f74e 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardActions.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardActions.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardActionsStyles,
 } from './DocumentCardActions.types';
 
-export const DocumentCardActions: React.FunctionComponent<IDocumentCardActionsProps> = styled<
+export const DocumentCardActions: React.FunctionComponent<React.PropsWithChildren<IDocumentCardActionsProps>> = styled<
   IDocumentCardActionsProps,
   IDocumentCardActionsStyleProps,
   IDocumentCardActionsStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardActivity.ts b/packages/react/src/components/DocumentCard/DocumentCardActivity.ts
index 47fe3a56f2ba6..8a05767255caf 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardActivity.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardActivity.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardActivityStyles,
 } from './DocumentCardActivity.types';
 
-export const DocumentCardActivity: React.FunctionComponent<IDocumentCardActivityProps> = styled<
+export const DocumentCardActivity: React.FunctionComponent<React.PropsWithChildren<IDocumentCardActivityProps>> = styled<
   IDocumentCardActivityProps,
   IDocumentCardActivityStyleProps,
   IDocumentCardActivityStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardDetails.ts b/packages/react/src/components/DocumentCard/DocumentCardDetails.ts
index 9ca4fa9b93626..aac0d53f6ebd0 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardDetails.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardDetails.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardDetailsStyles,
 } from './DocumentCardDetails.types';
 
-export const DocumentCardDetails: React.FunctionComponent<IDocumentCardDetailsProps> = styled<
+export const DocumentCardDetails: React.FunctionComponent<React.PropsWithChildren<IDocumentCardDetailsProps>> = styled<
   IDocumentCardDetailsProps,
   IDocumentCardDetailsStyleProps,
   IDocumentCardDetailsStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardImage.ts b/packages/react/src/components/DocumentCard/DocumentCardImage.ts
index be4a870668d7f..06ea20c2a0e87 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardImage.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardImage.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardImageStyles,
 } from './DocumentCardImage.types';
 
-export const DocumentCardImage: React.FunctionComponent<IDocumentCardImageProps> = styled<
+export const DocumentCardImage: React.FunctionComponent<React.PropsWithChildren<IDocumentCardImageProps>> = styled<
   IDocumentCardImageProps,
   IDocumentCardImageStyleProps,
   IDocumentCardImageStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardLocation.ts b/packages/react/src/components/DocumentCard/DocumentCardLocation.ts
index 36252010eaf34..c0e7b7cd58501 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardLocation.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardLocation.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardLocationStyles,
 } from './DocumentCardLocation.types';
 
-export const DocumentCardLocation: React.FunctionComponent<IDocumentCardLocationProps> = styled<
+export const DocumentCardLocation: React.FunctionComponent<React.PropsWithChildren<IDocumentCardLocationProps>> = styled<
   IDocumentCardLocationProps,
   IDocumentCardLocationStyleProps,
   IDocumentCardLocationStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardLogo.ts b/packages/react/src/components/DocumentCard/DocumentCardLogo.ts
index be1b9b092d9bc..280afec5d5231 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardLogo.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardLogo.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardLogoStyles,
 } from './DocumentCardLogo.types';
 
-export const DocumentCardLogo: React.FunctionComponent<IDocumentCardLogoProps> = styled<
+export const DocumentCardLogo: React.FunctionComponent<React.PropsWithChildren<IDocumentCardLogoProps>> = styled<
   IDocumentCardLogoProps,
   IDocumentCardLogoStyleProps,
   IDocumentCardLogoStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardPreview.ts b/packages/react/src/components/DocumentCard/DocumentCardPreview.ts
index 337291d78fed0..760388091f150 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardPreview.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardPreview.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardPreviewStyles,
 } from './DocumentCardPreview.types';
 
-export const DocumentCardPreview: React.FunctionComponent<IDocumentCardPreviewProps> = styled<
+export const DocumentCardPreview: React.FunctionComponent<React.PropsWithChildren<IDocumentCardPreviewProps>> = styled<
   IDocumentCardPreviewProps,
   IDocumentCardPreviewStyleProps,
   IDocumentCardPreviewStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardStatus.ts b/packages/react/src/components/DocumentCard/DocumentCardStatus.ts
index ada225695a63d..e3048af831126 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardStatus.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardStatus.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardStatusStyles,
 } from './DocumentCardStatus.types';
 
-export const DocumentCardStatus: React.FunctionComponent<IDocumentCardStatusProps> = styled<
+export const DocumentCardStatus: React.FunctionComponent<React.PropsWithChildren<IDocumentCardStatusProps>> = styled<
   IDocumentCardStatusProps,
   IDocumentCardStatusStyleProps,
   IDocumentCardStatusStyles
diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx
index 3abe764a832b7..a8f71b533bac3 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx
+++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.base.tsx
@@ -26,6 +26,7 @@ const TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;
  */
 export class DocumentCardTitleBase extends React.Component<IDocumentCardTitleProps, IDocumentCardTitleState> {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _titleElement = React.createRef<HTMLDivElement>();
   private _classNames: IProcessedStyleSet<IDocumentCardTitleStyles>;
diff --git a/packages/react/src/components/DocumentCard/DocumentCardTitle.ts b/packages/react/src/components/DocumentCard/DocumentCardTitle.ts
index 8ca49cec2475d..9093a283d4283 100644
--- a/packages/react/src/components/DocumentCard/DocumentCardTitle.ts
+++ b/packages/react/src/components/DocumentCard/DocumentCardTitle.ts
@@ -8,7 +8,7 @@ import type {
   IDocumentCardTitleStyles,
 } from './DocumentCardTitle.types';
 
-export const DocumentCardTitle: React.FunctionComponent<IDocumentCardTitleProps> = styled<
+export const DocumentCardTitle: React.FunctionComponent<React.PropsWithChildren<IDocumentCardTitleProps>> = styled<
   IDocumentCardTitleProps,
   IDocumentCardTitleStyleProps,
   IDocumentCardTitleStyles
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
index 574a5bd22d686..165cf98bc4736 100644
--- a/packages/react/src/components/Dropdown/Dropdown.base.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -163,7 +163,7 @@ function useSelectedItemsState({
   return [selectedIndices, setSelectedIndices] as const;
 }
 
-export const DropdownBase: React.FunctionComponent<IDropdownProps> = React.forwardRef<HTMLDivElement, IDropdownProps>(
+export const DropdownBase: React.FunctionComponent<React.PropsWithChildren<IDropdownProps>> = React.forwardRef<HTMLDivElement, IDropdownProps>(
   (propsWithoutDefaults, forwardedRef) => {
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
 
@@ -190,6 +190,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _host = React.createRef<HTMLDivElement>();
   private _focusZone = React.createRef<FocusZone>();
diff --git a/packages/react/src/components/Dropdown/Dropdown.tsx b/packages/react/src/components/Dropdown/Dropdown.tsx
index 2ecb9d80c1793..a42adb1310a09 100644
--- a/packages/react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/react/src/components/Dropdown/Dropdown.tsx
@@ -4,7 +4,7 @@ import { DropdownBase } from './Dropdown.base';
 import { getStyles } from './Dropdown.styles';
 import type { IDropdownProps, IDropdownStyleProps, IDropdownStyles } from './Dropdown.types';
 
-export const Dropdown: React.FunctionComponent<IDropdownProps> = styled<
+export const Dropdown: React.FunctionComponent<React.PropsWithChildren<IDropdownProps>> = styled<
   IDropdownProps,
   IDropdownStyleProps,
   IDropdownStyles
diff --git a/packages/react/src/components/HoverCard/BaseCard.types.ts b/packages/react/src/components/HoverCard/BaseCard.types.ts
index c4c45fc97e827..740c94ebf9da3 100644
--- a/packages/react/src/components/HoverCard/BaseCard.types.ts
+++ b/packages/react/src/components/HoverCard/BaseCard.types.ts
@@ -8,7 +8,8 @@ import type { ICalloutProps } from '../../Callout';
 /**
  * Interface containing props common for all types of cards.
  */
-export interface IBaseCardProps<TComponent, TStyles, TStyleProps> extends React.HTMLAttributes<HTMLDivElement> {
+export interface IBaseCardProps<TComponent, TStyles, TStyleProps>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   /**
    * Optional callback to access the TComponent interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
diff --git a/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx b/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx
index 15059e72e2fce..8035a78634a9a 100644
--- a/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx
+++ b/packages/react/src/components/HoverCard/CardCallout/CardCallout.tsx
@@ -8,7 +8,7 @@ import type { ICalloutProps } from '../../../Callout';
 
 export interface ICardCalloutProps extends IBaseCardProps<{}, {}, {}> {
   finalHeight?: number;
-  content?: JSX.Element;
+  content?: React.JSX.Element;
 }
 
 export const CardCallout = (props: ICardCalloutProps) => {
diff --git a/packages/react/src/components/HoverCard/ExpandingCard.ts b/packages/react/src/components/HoverCard/ExpandingCard.ts
index 6d0cd94c9ead5..451bb70717379 100644
--- a/packages/react/src/components/HoverCard/ExpandingCard.ts
+++ b/packages/react/src/components/HoverCard/ExpandingCard.ts
@@ -4,7 +4,7 @@ import { getStyles } from './ExpandingCard.styles';
 import { ExpandingCardBase } from './ExpandingCard.base';
 import type { IExpandingCardProps, IExpandingCardStyles, IExpandingCardStyleProps } from './ExpandingCard.types';
 
-export const ExpandingCard: React.FunctionComponent<IExpandingCardProps> = styled<
+export const ExpandingCard: React.FunctionComponent<React.PropsWithChildren<IExpandingCardProps>> = styled<
   IExpandingCardProps,
   IExpandingCardStyleProps,
   IExpandingCardStyles
diff --git a/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts b/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts
index 0eeaa9ab9ed2e..01b3b15c1b96d 100644
--- a/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts
+++ b/packages/react/src/components/HoverCard/PlainCard/PlainCard.ts
@@ -4,7 +4,7 @@ import { getStyles } from './PlainCard.styles';
 import { PlainCardBase } from './PlainCard.base';
 import type { IPlainCardProps, IPlainCardStyles, IPlainCardStyleProps } from './PlainCard.types';
 
-export const PlainCard: React.FunctionComponent<IPlainCardProps> = styled<
+export const PlainCard: React.FunctionComponent<React.PropsWithChildren<IPlainCardProps>> = styled<
   IPlainCardProps,
   IPlainCardStyleProps,
   IPlainCardStyles
diff --git a/packages/react/src/components/Keytip/KeytipContent.tsx b/packages/react/src/components/Keytip/KeytipContent.tsx
index 9dd295582cf8a..d0ab8fb23a4c5 100644
--- a/packages/react/src/components/Keytip/KeytipContent.tsx
+++ b/packages/react/src/components/Keytip/KeytipContent.tsx
@@ -4,7 +4,7 @@ import { KeytipContentBase } from './KeytipContent.base';
 import { getStyles } from './Keytip.styles';
 import type { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
 
-export const KeytipContent: React.FunctionComponent<IKeytipProps> = styled<
+export const KeytipContent: React.FunctionComponent<React.PropsWithChildren<IKeytipProps>> = styled<
   IKeytipProps,
   IKeytipStyleProps,
   IKeytipStyles
diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
index 339bf05435512..f0f3e7bb04d46 100644
--- a/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
+++ b/packages/react/src/components/KeytipLayer/KeytipLayer.base.tsx
@@ -66,6 +66,7 @@ export class KeytipLayerBase extends React.Component<IKeytipLayerProps, IKeytipL
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _events: EventGroup;
   private _async: Async;
diff --git a/packages/react/src/components/KeytipLayer/KeytipLayer.tsx b/packages/react/src/components/KeytipLayer/KeytipLayer.tsx
index efcad4e2291f5..3cccf3321382d 100644
--- a/packages/react/src/components/KeytipLayer/KeytipLayer.tsx
+++ b/packages/react/src/components/KeytipLayer/KeytipLayer.tsx
@@ -4,7 +4,7 @@ import { KeytipLayerBase } from './KeytipLayer.base';
 import { getStyles } from './KeytipLayer.styles';
 import type { IKeytipLayerProps, IKeytipLayerStyleProps, IKeytipLayerStyles } from './KeytipLayer.types';
 
-export const KeytipLayer: React.FunctionComponent<IKeytipLayerProps> = styled<
+export const KeytipLayer: React.FunctionComponent<React.PropsWithChildren<IKeytipLayerProps>> = styled<
   IKeytipLayerProps,
   IKeytipLayerStyleProps,
   IKeytipLayerStyles
diff --git a/packages/react/src/components/Layer/Layer.base.tsx b/packages/react/src/components/Layer/Layer.base.tsx
index 497e29148870c..bfefc60ae2932 100644
--- a/packages/react/src/components/Layer/Layer.base.tsx
+++ b/packages/react/src/components/Layer/Layer.base.tsx
@@ -12,6 +12,7 @@ import {
   setVirtualParent,
   FocusRectsProvider,
   FocusRectsContext,
+  IFocusRectsContext,
   IsFocusVisibleClassName,
 } from '../../Utilities';
 import {
@@ -45,194 +46,195 @@ interface IHTMLElementWithTabsterFlags extends HTMLElement {
   };
 }
 
-export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<HTMLDivElement, ILayerProps>(
-  (props, ref) => {
-    const registerPortalEl = usePortalCompat();
-
-    const rootRef = React.useRef<HTMLSpanElement>(null);
-    const mergedRef = useMergedRefs(rootRef, ref);
-    const layerRef = React.useRef<HTMLDivElement>();
-    const fabricElementRef = React.useRef<HTMLDivElement>(null);
-    const focusContext = React.useContext(FocusRectsContext);
-
-    // Tracks if the layer mount events need to be raised.
-    // Required to allow the DOM to render after the layer element is added.
-    const [needRaiseLayerMount, setNeedRaiseLayerMount] = React.useState(false);
-
-    // Sets the focus visible className when the FocusRectsProvider for the layer is rendered
-    // This allows the current focus visibility style to be carried over to the layer content
-    const focusRectsRef = React.useCallback(
-      el => {
-        const isFocusVisible = getFocusVisibility(focusContext?.providerRef);
-        if (el && isFocusVisible) {
-          el.classList.add(IsFocusVisibleClassName);
-        }
-      },
-      [focusContext],
-    );
-
-    const {
-      children,
-      className,
-      eventBubblingEnabled,
-      fabricProps,
-      hostId,
-      insertFirst,
-      onLayerDidMount = () => undefined,
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      onLayerMounted = () => undefined,
-      onLayerWillUnmount,
-      styles,
-      theme,
-    } = props;
-
-    const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref, focusRectsRef);
-
-    const classNames = getClassNames(styles!, {
-      theme: theme!,
-      className,
-      isNotHost: !hostId,
-    });
-
-    // Returns the user provided hostId props element, the default target selector,
-    // or undefined if document doesn't exist.
-    const getHost = (doc: Document, shadowRoot: ShadowRoot | null = null): Node | null => {
-      const root = shadowRoot ?? doc;
-      if (hostId) {
-        const layerHost = getLayerHost(hostId);
-
-        if (layerHost) {
-          return layerHost.rootRef.current ?? null;
-        }
-
-        return root.getElementById(hostId) ?? null;
-      } else {
-        const defaultHostSelector = getDefaultTarget();
-
-        // Find the host.
-        let host: Node | null = defaultHostSelector ? (root.querySelector(defaultHostSelector) as Node) : null;
-
-        // If no host is available, create a container for injecting layers in.
-        // Having a container scopes layout computation.
-        if (!host) {
-          host = createDefaultLayerHost(doc, shadowRoot);
-        }
-
-        return host;
+export const LayerBase: React.FunctionComponent<React.PropsWithChildren<ILayerProps>> = React.forwardRef<
+  HTMLDivElement,
+  ILayerProps
+>((props, ref) => {
+  const registerPortalEl = usePortalCompat();
+
+  const rootRef = React.useRef<HTMLSpanElement>(null);
+  const mergedRef = useMergedRefs(rootRef, ref);
+  const layerRef = React.useRef<HTMLDivElement>();
+  const fabricElementRef = React.useRef<HTMLDivElement>(null);
+  const focusContext = React.useContext<IFocusRectsContext | undefined>(FocusRectsContext);
+
+  // Tracks if the layer mount events need to be raised.
+  // Required to allow the DOM to render after the layer element is added.
+  const [needRaiseLayerMount, setNeedRaiseLayerMount] = React.useState(false);
+
+  // Sets the focus visible className when the FocusRectsProvider for the layer is rendered
+  // This allows the current focus visibility style to be carried over to the layer content
+  const focusRectsRef = React.useCallback(
+    (el: HTMLElement) => {
+      const isFocusVisible = getFocusVisibility(focusContext?.providerRef);
+      if (el && isFocusVisible) {
+        el.classList.add(IsFocusVisibleClassName);
       }
-    };
-
-    // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.
-    const removeLayerElement = (): void => {
-      onLayerWillUnmount?.();
-
-      const elem = layerRef.current;
-
-      // Clear ref before removing from the DOM
-      layerRef.current = undefined;
-
-      if (elem && elem.parentNode) {
-        elem.parentNode.removeChild(elem);
+    },
+    [focusContext],
+  );
+
+  const {
+    children,
+    className,
+    eventBubblingEnabled,
+    fabricProps,
+    hostId,
+    insertFirst,
+    onLayerDidMount = () => undefined,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    onLayerMounted = () => undefined,
+    onLayerWillUnmount,
+    styles,
+    theme,
+  } = props;
+
+  const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref as React.Ref<HTMLDivElement>, focusRectsRef);
+
+  const classNames = getClassNames(styles!, {
+    theme: theme!,
+    className,
+    isNotHost: !hostId,
+  });
+
+  // Returns the user provided hostId props element, the default target selector,
+  // or undefined if document doesn't exist.
+  const getHost = (doc: Document, shadowRoot: ShadowRoot | null = null): Node | null => {
+    const root = shadowRoot ?? doc;
+    if (hostId) {
+      const layerHost = getLayerHost(hostId);
+
+      if (layerHost) {
+        return layerHost.rootRef.current ?? null;
       }
-    };
 
-    // If a doc or host exists, it will remove and update layer parentNodes.
-    const createLayerElement = () => {
-      const doc = getDocument(rootRef.current);
-      const shadowRoot = (rootRef.current?.getRootNode() as ShadowRoot)?.host
-        ? (rootRef?.current?.getRootNode() as ShadowRoot)
-        : undefined;
+      return root.getElementById(hostId) ?? null;
+    } else {
+      const defaultHostSelector = getDefaultTarget();
 
-      if (!doc || (!doc && !shadowRoot)) {
-        return;
-      }
-
-      const host = getHost(doc, shadowRoot) as IHTMLElementWithTabsterFlags | null;
+      // Find the host.
+      let host: Node | null = defaultHostSelector ? (root.querySelector(defaultHostSelector) as Node) : null;
 
+      // If no host is available, create a container for injecting layers in.
+      // Having a container scopes layout computation.
       if (!host) {
-        return;
+        host = createDefaultLayerHost(doc, shadowRoot);
       }
 
-      // Tabster in V9 sets aria-hidden on the elements outside of the modal dialog. And it doesn't set aria-hidden
-      // on the virtual children of the dialog. But the host element itself is not a virtual child of a dialog, it
-      // might contain virtual children. noDirectAriaHidden flag makes Tabster to poke inside the element and set
-      // aria-hidden on the children (if they are not virtual children of the active V9 dialog) not on the host element.
-      // To avoid importing Tabster as a dependency here, we just set a flag on the host element which is checked by
-      // Tabster.
-      if (!host.__tabsterElementFlags) {
-        host.__tabsterElementFlags = {};
-      }
-      host.__tabsterElementFlags.noDirectAriaHidden = true;
+      return host;
+    }
+  };
 
-      // Remove and re-create any previous existing layer elements.
-      removeLayerElement();
+  // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.
+  const removeLayerElement = (): void => {
+    onLayerWillUnmount?.();
 
-      const el = (host.ownerDocument ?? doc).createElement('div');
+    const elem = layerRef.current;
 
-      el.className = classNames.root!;
-      setPortalAttribute(el);
-      setVirtualParent(el, rootRef.current!);
+    // Clear ref before removing from the DOM
+    layerRef.current = undefined;
 
-      insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);
-      layerRef.current = el;
-      setNeedRaiseLayerMount(true);
-    };
+    if (elem && elem.parentNode) {
+      elem.parentNode.removeChild(elem);
+    }
+  };
 
-    useIsomorphicLayoutEffect(() => {
-      createLayerElement();
-      // Check if the user provided a hostId prop and register the layer with the ID.
-      if (hostId) {
-        registerLayer(hostId, createLayerElement);
-      }
+  // If a doc or host exists, it will remove and update layer parentNodes.
+  const createLayerElement = () => {
+    const doc = getDocument(rootRef.current);
+    const shadowRoot = (rootRef.current?.getRootNode() as ShadowRoot)?.host
+      ? (rootRef?.current?.getRootNode() as ShadowRoot)
+      : undefined;
+
+    if (!doc || (!doc && !shadowRoot)) {
+      return;
+    }
+
+    const host = getHost(doc, shadowRoot) as IHTMLElementWithTabsterFlags | null;
+
+    if (!host) {
+      return;
+    }
+
+    // Tabster in V9 sets aria-hidden on the elements outside of the modal dialog. And it doesn't set aria-hidden
+    // on the virtual children of the dialog. But the host element itself is not a virtual child of a dialog, it
+    // might contain virtual children. noDirectAriaHidden flag makes Tabster to poke inside the element and set
+    // aria-hidden on the children (if they are not virtual children of the active V9 dialog) not on the host element.
+    // To avoid importing Tabster as a dependency here, we just set a flag on the host element which is checked by
+    // Tabster.
+    if (!host.__tabsterElementFlags) {
+      host.__tabsterElementFlags = {};
+    }
+    host.__tabsterElementFlags.noDirectAriaHidden = true;
+
+    // Remove and re-create any previous existing layer elements.
+    removeLayerElement();
+
+    const el = (host.ownerDocument ?? doc).createElement('div');
+
+    el.className = classNames.root!;
+    setPortalAttribute(el);
+    setVirtualParent(el, rootRef.current!);
+
+    insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);
+    layerRef.current = el;
+    setNeedRaiseLayerMount(true);
+  };
 
-      const unregisterPortalEl = layerRef.current ? registerPortalEl(layerRef.current) : undefined;
+  useIsomorphicLayoutEffect(() => {
+    createLayerElement();
+    // Check if the user provided a hostId prop and register the layer with the ID.
+    if (hostId) {
+      registerLayer(hostId, createLayerElement);
+    }
 
-      return () => {
-        if (unregisterPortalEl) {
-          unregisterPortalEl();
-        }
+    const unregisterPortalEl = layerRef.current ? registerPortalEl(layerRef.current) : undefined;
 
-        removeLayerElement();
+    return () => {
+      if (unregisterPortalEl) {
+        unregisterPortalEl();
+      }
 
-        if (hostId) {
-          unregisterLayer(hostId, createLayerElement);
-        }
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps -- should run if the hostId updates.
-    }, [hostId]);
+      removeLayerElement();
 
-    React.useEffect(() => {
-      if (layerRef.current && needRaiseLayerMount) {
-        onLayerMounted?.();
-        onLayerDidMount?.();
-        setNeedRaiseLayerMount(false);
+      if (hostId) {
+        unregisterLayer(hostId, createLayerElement);
       }
-    }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);
-
-    useDebugWarnings(props);
-
-    return (
-      <span className="ms-layer" ref={mergedRef}>
-        {layerRef.current &&
-          ReactDOM.createPortal(
-            <FocusRectsProvider layerRoot providerRef={fabricRef}>
-              {/* eslint-disable @typescript-eslint/no-deprecated */}
-              <Fabric
-                {...(!eventBubblingEnabled && getFilteredEvents())}
-                {...fabricProps}
-                className={css(classNames.content, fabricProps?.className)}
-                ref={fabricRef}
-              >
-                {children}
-              </Fabric>
-              {/* eslint-enable @typescript-eslint/no-deprecated */}
-            </FocusRectsProvider>,
-            layerRef.current,
-          )}
-      </span>
-    );
-  },
-);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- should run if the hostId updates.
+  }, [hostId]);
+
+  React.useEffect(() => {
+    if (layerRef.current && needRaiseLayerMount) {
+      onLayerMounted?.();
+      onLayerDidMount?.();
+      setNeedRaiseLayerMount(false);
+    }
+  }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);
+
+  useDebugWarnings(props);
+
+  return (
+    <span className="ms-layer" ref={mergedRef}>
+      {layerRef.current &&
+        ReactDOM.createPortal(
+          <FocusRectsProvider layerRoot providerRef={fabricRef}>
+            {/* eslint-disable @typescript-eslint/no-deprecated */}
+            <Fabric
+              {...(!eventBubblingEnabled && getFilteredEvents())}
+              {...fabricProps}
+              className={css(classNames.content, fabricProps?.className)}
+              ref={fabricRef as React.Ref<HTMLDivElement>}
+            >
+              {children}
+            </Fabric>
+            {/* eslint-enable @typescript-eslint/no-deprecated */}
+          </FocusRectsProvider>,
+          layerRef.current,
+        )}
+    </span>
+  );
+});
 LayerBase.displayName = 'LayerBase';
 
 let filteredEventProps: { [key: string]: (ev: React.SyntheticEvent<HTMLElement, Event>) => void };
diff --git a/packages/react/src/components/Layer/Layer.test.tsx b/packages/react/src/components/Layer/Layer.test.tsx
index 3354e4c5db01b..48bdf46e6de51 100644
--- a/packages/react/src/components/Layer/Layer.test.tsx
+++ b/packages/react/src/components/Layer/Layer.test.tsx
@@ -21,11 +21,11 @@ describe('Layer', () => {
   }
   const context = React.createContext<IFooContext>({ foo: undefined });
 
-  const TestChild: React.FunctionComponent<{}> = () => (
+  const TestChild: React.FunctionComponent<React.PropsWithChildren<{}>> = () => (
     <context.Consumer>{val => <div id="child">{val.foo}</div>}</context.Consumer>
   );
 
-  const Parent: React.FunctionComponent<{ hostId?: string }> = props => (
+  const Parent: React.FunctionComponent<React.PropsWithChildren<{ hostId?: string }>> = props => (
     <context.Provider value={{ foo: 'bar' }}>
       <div id="parent">
         <Layer hostId={props.hostId}>
@@ -35,7 +35,7 @@ describe('Layer', () => {
     </context.Provider>
   );
 
-  const TestApp: React.FunctionComponent<{ hostId?: string }> = props => (
+  const TestApp: React.FunctionComponent<React.PropsWithChildren<{ hostId?: string }>> = props => (
     <div id="app">
       <Parent hostId={props.hostId} />
       <LayerHost id={props.hostId} />
diff --git a/packages/react/src/components/Layer/Layer.tsx b/packages/react/src/components/Layer/Layer.tsx
index 1cc2ff27a2f40..25e145847e91a 100644
--- a/packages/react/src/components/Layer/Layer.tsx
+++ b/packages/react/src/components/Layer/Layer.tsx
@@ -4,7 +4,7 @@ import { LayerBase } from './Layer.base';
 import { getStyles } from './Layer.styles';
 import type { ILayerProps, ILayerStyleProps, ILayerStyles } from './Layer.types';
 
-export const Layer: React.FunctionComponent<ILayerProps> = styled<ILayerProps, ILayerStyleProps, ILayerStyles>(
+export const Layer: React.FunctionComponent<React.PropsWithChildren<ILayerProps>> = styled<ILayerProps, ILayerStyleProps, ILayerStyles>(
   LayerBase,
   getStyles,
   undefined,
diff --git a/packages/react/src/components/Layer/LayerHost.tsx b/packages/react/src/components/Layer/LayerHost.tsx
index 88751c380a263..0f15896d0b4f2 100644
--- a/packages/react/src/components/Layer/LayerHost.tsx
+++ b/packages/react/src/components/Layer/LayerHost.tsx
@@ -4,7 +4,7 @@ import { css, getId } from '../../Utilities';
 import { notifyHostChanged, registerLayerHost, unregisterLayerHost } from './Layer.notification';
 import type { ILayerHost, ILayerHostProps } from './LayerHost.types';
 
-export const LayerHost: React.FunctionComponent<ILayerHostProps> = props => {
+export const LayerHost: React.FunctionComponent<React.PropsWithChildren<ILayerHostProps>> = props => {
   const { className } = props;
 
   const [layerHostId] = React.useState(() => getId());
diff --git a/packages/react/src/components/List/List.tsx b/packages/react/src/components/List/List.tsx
index 441a7d050f0cf..7d1d3cc804927 100644
--- a/packages/react/src/components/List/List.tsx
+++ b/packages/react/src/components/List/List.tsx
@@ -111,6 +111,7 @@ export class List<T = any> extends React.Component<IListProps<T>, IListState<T>>
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _root = React.createRef<HTMLDivElement>();
   private _surface = React.createRef<HTMLDivElement>();
diff --git a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx
index 365e513b5cb55..cafbfa76ad1b5 100644
--- a/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx
+++ b/packages/react/src/components/MarqueeSelection/MarqueeSelection.base.tsx
@@ -44,6 +44,7 @@ export class MarqueeSelectionBase extends React.Component<IMarqueeSelectionProps
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _async: Async;
   private _events: EventGroup;
diff --git a/packages/react/src/components/Nav/Nav.base.tsx b/packages/react/src/components/Nav/Nav.base.tsx
index 1eff274bd8716..6b542079a9702 100644
--- a/packages/react/src/components/Nav/Nav.base.tsx
+++ b/packages/react/src/components/Nav/Nav.base.tsx
@@ -46,6 +46,7 @@ export class NavBase extends React.Component<INavProps, INavState> implements IN
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _focusZone = React.createRef<IFocusZone>();
   constructor(props: INavProps) {
diff --git a/packages/react/src/components/Nav/Nav.tsx b/packages/react/src/components/Nav/Nav.tsx
index 4c6376f2f6f50..31ba3859a527a 100644
--- a/packages/react/src/components/Nav/Nav.tsx
+++ b/packages/react/src/components/Nav/Nav.tsx
@@ -4,7 +4,7 @@ import { NavBase } from './Nav.base';
 import { getStyles } from './Nav.styles';
 import type { INavProps, INavStyleProps, INavStyles } from './Nav.types';
 
-export const Nav: React.FunctionComponent<INavProps> = styled<INavProps, INavStyleProps, INavStyles>(
+export const Nav: React.FunctionComponent<React.PropsWithChildren<INavProps>> = styled<INavProps, INavStyleProps, INavStyles>(
   NavBase,
   getStyles,
   undefined,
diff --git a/packages/react/src/components/Panel/Panel.base.tsx b/packages/react/src/components/Panel/Panel.base.tsx
index 527285aa738ab..fe861c5e6d434 100644
--- a/packages/react/src/components/Panel/Panel.base.tsx
+++ b/packages/react/src/components/Panel/Panel.base.tsx
@@ -51,6 +51,7 @@ export class PanelBase extends React.Component<IPanelProps, IPanelState> impleme
   };
 
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _async: Async;
   private _events: EventGroup;
diff --git a/packages/react/src/components/Panel/Panel.ts b/packages/react/src/components/Panel/Panel.ts
index b291f7ce26c1b..841448231349b 100644
--- a/packages/react/src/components/Panel/Panel.ts
+++ b/packages/react/src/components/Panel/Panel.ts
@@ -7,7 +7,7 @@ import type { IPanelProps, IPanelStyleProps, IPanelStyles } from './Panel.types'
 /**
  * Panel description
  */
-export const Panel: React.FunctionComponent<IPanelProps> = styled<IPanelProps, IPanelStyleProps, IPanelStyles>(
+export const Panel: React.FunctionComponent<React.PropsWithChildren<IPanelProps>> = styled<IPanelProps, IPanelStyleProps, IPanelStyles>(
   PanelBase,
   getStyles,
   undefined,
diff --git a/packages/react/src/components/Pivot/Pivot.base.tsx b/packages/react/src/components/Pivot/Pivot.base.tsx
index 70d18af3bc30a..b0f126fab87a0 100644
--- a/packages/react/src/components/Pivot/Pivot.base.tsx
+++ b/packages/react/src/components/Pivot/Pivot.base.tsx
@@ -41,7 +41,6 @@ const getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection
 
   React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => {
     if (isPivotItem(child)) {
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
       const { linkText, ...pivotItemProps } = child.props;
       const itemKey = child.props.itemKey || index.toString();
       result.links.push({
@@ -58,258 +57,261 @@ const getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection
   return result;
 };
 
+// @ts-expect-error TODO
 const isPivotItem = (item: React.ReactNode): item is PivotItem => {
-  return React.isValidElement(item) && (item.type as React.ComponentType)?.name === PivotItem.name;
+  return (
+    React.isValidElement(item) &&
+    (item.type as React.ComponentType<React.PropsWithChildren<unknown>>)?.name === PivotItem.name
+  );
 };
 
-export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<HTMLDivElement, IPivotProps>(
-  (props, ref) => {
-    const focusZoneRef = React.useRef<IFocusZone>(null);
-    const overflowMenuButtonComponentRef = React.useRef<IButton>(null);
-    const pivotId: string = useId('Pivot');
-
-    const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);
-
-    const {
-      componentRef,
-      theme,
-      linkSize,
-      linkFormat,
-      overflowBehavior,
-      overflowAriaLabel,
-      focusZoneProps,
-      overflowButtonAs,
-    } = props;
-
-    let classNames: { [key in keyof IPivotStyles]: string };
-    const nameProps = {
-      'aria-label': props['aria-label'],
-      'aria-labelledby': props['aria-labelledby'],
-    };
-    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties, [
-      'aria-label',
-      'aria-labelledby',
-    ]);
-
-    let linkCollection = getLinkItems(props, pivotId);
-
-    React.useImperativeHandle(componentRef as React.RefObject<IPivot>, () => ({
-      focus: () => {
-        focusZoneRef.current?.focus();
-      },
-    }));
-
-    const renderLinkContent = (link?: IPivotItemProps): JSX.Element | null => {
-      if (!link) {
-        return null;
-      }
+export const PivotBase: React.FunctionComponent<React.PropsWithChildren<IPivotProps>> = React.forwardRef<
+  HTMLDivElement,
+  IPivotProps
+>((props, ref) => {
+  const focusZoneRef = React.useRef<IFocusZone>(null);
+  const overflowMenuButtonComponentRef = React.useRef<IButton>(null);
+  const pivotId: string = useId('Pivot');
+
+  const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);
+
+  const {
+    componentRef,
+    theme,
+    linkSize,
+    linkFormat,
+    overflowBehavior,
+    overflowAriaLabel,
+    focusZoneProps,
+    overflowButtonAs,
+  } = props;
+
+  let classNames: { [key in keyof IPivotStyles]: string };
+  const nameProps = {
+    'aria-label': props['aria-label'],
+    'aria-labelledby': props['aria-labelledby'],
+  };
+  const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties, [
+    'aria-label',
+    'aria-labelledby',
+  ]);
+
+  let linkCollection = getLinkItems(props, pivotId);
+
+  React.useImperativeHandle(componentRef as React.RefObject<IPivot>, () => ({
+    focus: () => {
+      focusZoneRef.current?.focus();
+    },
+  }));
+
+  const renderLinkContent = (link?: IPivotItemProps): JSX.Element | null => {
+    if (!link) {
+      return null;
+    }
 
-      const { itemCount, itemIcon, headerText } = link;
-      return (
-        <span className={classNames.linkContent}>
-          {itemIcon !== undefined && (
-            <span className={classNames.icon}>
-              <Icon iconName={itemIcon} />
-            </span>
-          )}
-          {headerText !== undefined && <span className={classNames.text}> {link.headerText}</span>}
-          {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}
-        </span>
-      );
-    };
-
-    const renderPivotLink = (
-      renderLinkCollection: PivotLinkCollection,
-      link: IPivotItemProps,
-      renderPivotLinkSelectedKey: string | null | undefined,
-      className: string,
-    ): JSX.Element => {
-      const { itemKey, headerButtonProps, onRenderItemLink } = link;
-      const tabId = renderLinkCollection.keyToTabIdMapping[itemKey!];
-      let linkContent: JSX.Element | null;
-      const isSelected: boolean = renderPivotLinkSelectedKey === itemKey;
-
-      if (onRenderItemLink) {
-        linkContent = onRenderItemLink(link, renderLinkContent);
-      } else {
-        linkContent = renderLinkContent(link);
-      }
+    const { itemCount, itemIcon, headerText } = link;
+    return (
+      <span className={classNames.linkContent}>
+        {itemIcon !== undefined && (
+          <span className={classNames.icon}>
+            <Icon iconName={itemIcon} />
+          </span>
+        )}
+        {headerText !== undefined && <span className={classNames.text}> {link.headerText}</span>}
+        {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}
+      </span>
+    );
+  };
 
-      let contentString = link.headerText || '';
-      contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';
-      // Adding space supplementary for icon
-      contentString += link.itemIcon ? ' xx' : '';
-
-      const itemSemantics =
-        link.role && link.role !== 'tab'
-          ? {
-              role: link.role,
-            }
-          : {
-              role: 'tab',
-              'aria-selected': isSelected,
-            };
-
-      return (
-        <CommandButton
-          {...headerButtonProps}
-          {...itemSemantics}
-          id={tabId}
-          key={itemKey}
-          className={css(className, isSelected && classNames.linkIsSelected)}
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={(ev: React.MouseEvent<HTMLElement>) => onLinkClick(itemKey!, ev)}
-          // eslint-disable-next-line react/jsx-no-bind
-          onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}
-          aria-label={link.ariaLabel}
-          name={link.headerText}
-          keytipProps={link.keytipProps}
-          data-content={contentString}
-        >
-          {linkContent}
-        </CommandButton>
-      );
-    };
-
-    const onLinkClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {
-      ev.preventDefault();
-      updateSelectedItem(itemKey, ev);
-    };
-
-    const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {
-      // eslint-disable-next-line @typescript-eslint/no-deprecated
-      if (ev.which === KeyCodes.enter) {
-        ev.preventDefault();
-        updateSelectedItem(itemKey);
-      }
-    };
-
-    const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {
-      setSelectedKey(itemKey);
-      linkCollection = getLinkItems(props, pivotId);
-      if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
-        const selectedIndex = linkCollection.keyToIndexMapping[itemKey];
-        const item = React.Children.toArray(props.children)[selectedIndex];
-        if (isPivotItem(item)) {
-          props.onLinkClick(item, ev);
-        }
-      }
+  const renderPivotLink = (
+    renderLinkCollection: PivotLinkCollection,
+    link: IPivotItemProps,
+    renderPivotLinkSelectedKey: string | null | undefined,
+    className: string,
+  ): JSX.Element => {
+    const { itemKey, headerButtonProps, onRenderItemLink } = link;
+    const tabId = renderLinkCollection.keyToTabIdMapping[itemKey!];
+    let linkContent: JSX.Element | null;
+    const isSelected: boolean = renderPivotLinkSelectedKey === itemKey;
+
+    if (onRenderItemLink) {
+      linkContent = onRenderItemLink(link, renderLinkContent);
+    } else {
+      linkContent = renderLinkContent(link);
+    }
 
-      overflowMenuButtonComponentRef.current?.dismissMenu();
-    };
+    let contentString = link.headerText || '';
+    contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';
+    // Adding space supplementary for icon
+    contentString += link.itemIcon ? ' xx' : '';
+
+    const itemSemantics =
+      link.role && link.role !== 'tab'
+        ? {
+            role: link.role,
+          }
+        : {
+            role: 'tab',
+            'aria-selected': isSelected,
+          };
 
-    const renderPivotItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {
-      if (props.headersOnly || !itemKey) {
-        return null;
-      }
+    return (
+      <CommandButton
+        {...headerButtonProps}
+        {...itemSemantics}
+        id={tabId}
+        key={itemKey}
+        className={css(className, isSelected && classNames.linkIsSelected)}
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick={(ev: React.MouseEvent<HTMLElement>) => onLinkClick(itemKey!, ev)}
+        // eslint-disable-next-line react/jsx-no-bind
+        onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}
+        aria-label={link.ariaLabel}
+        name={link.headerText}
+        keytipProps={link.keytipProps}
+        data-content={contentString}
+      >
+        {linkContent}
+      </CommandButton>
+    );
+  };
 
-      const index = linkCollection.keyToIndexMapping[itemKey];
-      const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];
-      return (
-        <div
-          role="tabpanel"
-          hidden={!isActive}
-          key={itemKey}
-          aria-hidden={!isActive}
-          aria-labelledby={selectedTabId}
-          className={classNames.itemContainer}
-        >
-          {React.Children.toArray(props.children)[index]}
-        </div>
-      );
-    };
-
-    const isKeyValid = (itemKey: string | null | undefined): boolean => {
-      return itemKey === null || (itemKey !== undefined && linkCollection.keyToIndexMapping[itemKey] !== undefined);
-    };
-
-    const getSelectedKey = () => {
-      if (isKeyValid(selectedKey)) {
-        return selectedKey;
-      }
-      if (linkCollection.links.length) {
-        return linkCollection.links[0].itemKey;
-      }
-      return undefined;
-    };
+  const onLinkClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {
+    ev.preventDefault();
+    updateSelectedItem(itemKey, ev);
+  };
 
-    classNames = getClassNames(props.styles!, {
-      theme: theme!,
-      linkSize,
-      linkFormat,
-    });
+  const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    if (ev.which === KeyCodes.enter) {
+      ev.preventDefault();
+      updateSelectedItem(itemKey);
+    }
+  };
 
-    const renderedSelectedKey = getSelectedKey();
-    const renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;
+  const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {
+    setSelectedKey(itemKey);
+    linkCollection = getLinkItems(props, pivotId);
+    if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
+      const selectedIndex = linkCollection.keyToIndexMapping[itemKey];
+      const item = React.Children.toArray(props.children)[selectedIndex];
+      if (isPivotItem(item)) {
+        props.onLinkClick(item, ev);
+      }
+    }
 
-    const items = linkCollection.links.map(l =>
-      renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link),
-    );
+    overflowMenuButtonComponentRef.current?.dismissMenu();
+  };
 
-    // The overflow menu starts empty and items[] is updated as the overflow items change
-    const overflowMenuProps: IContextualMenuProps = React.useMemo(
-      () => ({
-        items: [],
-        alignTargetEdge: true,
-        directionalHint: DirectionalHint.bottomRightEdge,
-      }),
-      [],
-    );
+  const renderPivotItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {
+    if (props.headersOnly || !itemKey) {
+      return null;
+    }
 
-    const { menuButtonRef: overflowMenuButtonRef } = useOverflow({
-      onOverflowItemsChanged: (overflowIndex, elements) => {
-        // Set data-is-overflowing on each item
-        elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));
-
-        // Update the menu items
-        overflowMenuProps.items = linkCollection.links
-          .slice(overflowIndex)
-          .filter(link => link.itemKey !== renderedSelectedKey)
-          .map((link, index) => {
-            link.role = 'menuitem';
-
-            return {
-              key: link.itemKey || `${overflowIndex + index}`,
-              onRender: () => renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu),
-            };
-          });
-      },
-      rtl: getRTL(theme),
-      pinnedIndex: renderedSelectedIndex,
-    });
-
-    const OverflowButton = overflowButtonAs ? overflowButtonAs : CommandButton;
+    const index = linkCollection.keyToIndexMapping[itemKey];
+    const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];
     return (
-      <div ref={ref} {...divProps}>
-        <FocusZone
-          componentRef={focusZoneRef}
-          role="tablist"
-          {...nameProps}
-          direction={FocusZoneDirection.horizontal}
-          {...focusZoneProps}
-          className={css(classNames.root, focusZoneProps?.className)}
-        >
-          {items}
-          {overflowBehavior === 'menu' && (
-            <OverflowButton
-              className={css(classNames.link, classNames.overflowMenuButton)}
-              elementRef={overflowMenuButtonRef}
-              componentRef={overflowMenuButtonComponentRef}
-              menuProps={overflowMenuProps}
-              menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}
-              ariaLabel={overflowAriaLabel}
-              role="tab"
-            />
-          )}
-        </FocusZone>
-        {renderedSelectedKey &&
-          linkCollection.links.map(
-            link =>
-              (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&
-              renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey),
-          )}
+      <div
+        role="tabpanel"
+        hidden={!isActive}
+        key={itemKey}
+        aria-hidden={!isActive}
+        aria-labelledby={selectedTabId}
+        className={classNames.itemContainer}
+      >
+        {React.Children.toArray(props.children)[index]}
       </div>
     );
-  },
-);
+  };
+
+  const isKeyValid = (itemKey: string | null | undefined): boolean => {
+    return itemKey === null || (itemKey !== undefined && linkCollection.keyToIndexMapping[itemKey] !== undefined);
+  };
+
+  const getSelectedKey = () => {
+    if (isKeyValid(selectedKey)) {
+      return selectedKey;
+    }
+    if (linkCollection.links.length) {
+      return linkCollection.links[0].itemKey;
+    }
+    return undefined;
+  };
+
+  classNames = getClassNames(props.styles!, {
+    theme: theme!,
+    linkSize,
+    linkFormat,
+  });
+
+  const renderedSelectedKey = getSelectedKey();
+  const renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;
+
+  const items = linkCollection.links.map(l => renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link));
+
+  // The overflow menu starts empty and items[] is updated as the overflow items change
+  const overflowMenuProps: IContextualMenuProps = React.useMemo(
+    () => ({
+      items: [],
+      alignTargetEdge: true,
+      directionalHint: DirectionalHint.bottomRightEdge,
+    }),
+    [],
+  );
+
+  const { menuButtonRef: overflowMenuButtonRef } = useOverflow({
+    onOverflowItemsChanged: (overflowIndex, elements) => {
+      // Set data-is-overflowing on each item
+      elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));
+
+      // Update the menu items
+      overflowMenuProps.items = linkCollection.links
+        .slice(overflowIndex)
+        .filter(link => link.itemKey !== renderedSelectedKey)
+        .map((link, index) => {
+          link.role = 'menuitem';
+
+          return {
+            key: link.itemKey || `${overflowIndex + index}`,
+            onRender: () => renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu),
+          };
+        });
+    },
+    rtl: getRTL(theme),
+    pinnedIndex: renderedSelectedIndex,
+  });
+
+  const OverflowButton = overflowButtonAs ? overflowButtonAs : CommandButton;
+  return (
+    <div ref={ref} {...divProps}>
+      <FocusZone
+        componentRef={focusZoneRef}
+        role="tablist"
+        {...nameProps}
+        direction={FocusZoneDirection.horizontal}
+        {...focusZoneProps}
+        className={css(classNames.root, focusZoneProps?.className)}
+      >
+        {items}
+        {overflowBehavior === 'menu' && (
+          <OverflowButton
+            className={css(classNames.link, classNames.overflowMenuButton)}
+            elementRef={overflowMenuButtonRef}
+            componentRef={overflowMenuButtonComponentRef}
+            menuProps={overflowMenuProps}
+            menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}
+            ariaLabel={overflowAriaLabel}
+            role="tab"
+          />
+        )}
+      </FocusZone>
+      {renderedSelectedKey &&
+        linkCollection.links.map(
+          link =>
+            (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&
+            renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey),
+        )}
+    </div>
+  );
+});
 PivotBase.displayName = COMPONENT_NAME;
diff --git a/packages/react/src/components/Pivot/Pivot.tsx b/packages/react/src/components/Pivot/Pivot.tsx
index ee6c90a4c7b7c..d2bfd697a01f7 100644
--- a/packages/react/src/components/Pivot/Pivot.tsx
+++ b/packages/react/src/components/Pivot/Pivot.tsx
@@ -9,7 +9,7 @@ import type { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types'
  * distinct content categories. Pivots allow for navigation between two or more content
  * views and relies on text headers to articulate the different sections of content.
  */
-export const Pivot: React.FunctionComponent<IPivotProps> = styled<IPivotProps, IPivotStyleProps, IPivotStyles>(
+export const Pivot: React.FunctionComponent<React.PropsWithChildren<IPivotProps>> = styled<IPivotProps, IPivotStyleProps, IPivotStyles>(
   PivotBase,
   getStyles,
   undefined,
diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 84409e6050e3f..8e2c39cb4d587 100644
--- a/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -34,6 +34,7 @@ export class ScrollablePaneBase
   implements IScrollablePane
 {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _root = React.createRef<HTMLDivElement>();
   private _stickyAboveRef = React.createRef<HTMLDivElement>();
diff --git a/packages/react/src/components/ScrollablePane/ScrollablePane.tsx b/packages/react/src/components/ScrollablePane/ScrollablePane.tsx
index 722e47ff28ca7..eb6ee17c2bbc5 100644
--- a/packages/react/src/components/ScrollablePane/ScrollablePane.tsx
+++ b/packages/react/src/components/ScrollablePane/ScrollablePane.tsx
@@ -4,7 +4,7 @@ import { ScrollablePaneBase } from './ScrollablePane.base';
 import { styled } from '../../Utilities';
 import type { IScrollablePaneProps, IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types';
 
-export const ScrollablePane: React.FunctionComponent<IScrollablePaneProps> = styled<
+export const ScrollablePane: React.FunctionComponent<React.PropsWithChildren<IScrollablePaneProps>> = styled<
   IScrollablePaneProps,
   IScrollablePaneStyleProps,
   IScrollablePaneStyles
diff --git a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
index bd5e3dc7a1383..67184c0c18652 100644
--- a/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
+++ b/packages/react/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
@@ -19,6 +19,7 @@ export class BaseSelectedItemsList<T extends {}, P extends IBaseSelectedItemsLis
   implements IBaseSelectedItemsList<T>
 {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   protected root: HTMLElement;
   private _defaultSelection: Selection;
diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts
index b49e0cb812b54..7408e98f54ea0 100644
--- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts
+++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.types.ts
@@ -6,7 +6,7 @@ import type { IStyle } from '../../../../Styling';
 
 export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {
   onEditingComplete: (oldItem: any, newItem: any) => void;
-  onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+  onRenderFloatingPicker?: React.ComponentType<React.PropsWithChildren<IBaseFloatingPickerProps<IPersonaProps>>>;
   floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
   getEditingItemText?: (item: IExtendedPersonaProps) => string;
 }
diff --git a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
index b2ed6d4e361e9..6016692b66bc4 100644
--- a/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
+++ b/packages/react/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
@@ -39,7 +39,7 @@ export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps<IExten
   copyMenuItemText?: string;
   editMenuItemText?: string;
   getEditingItemText?: (item: IExtendedPersonaProps) => string;
-  onRenderFloatingPicker?: React.ComponentType<IBaseFloatingPickerProps<IPersonaProps>>;
+  onRenderFloatingPicker?: React.ComponentType<React.PropsWithChildren<IBaseFloatingPickerProps<IPersonaProps>>>;
   floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
 }
 
@@ -67,7 +67,7 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
     const props = {
       item,
       index,
-      key: item.key ? item.key : index,
+      key: String(item.key ? item.key : index),
       selected: this.selection.isIndexSelected(index),
       onRemoveItem: () => this.removeItem(item),
       onItemChange: this.onItemChange,
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
index 30cf4eaea89e5..5f1ef19c5b543 100644
--- a/packages/react/src/components/Stack/Stack.tsx
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -99,16 +99,17 @@ function _processStackChildren(
   return childrenArray;
 }
 
-function _isStackItem(item: React.ReactNode): item is typeof StackItem {
+function _isStackItem(item: React.ReactNode) {
   // In theory, we should be able to just check item.type === StackItem.
   // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
   // the object identity is different despite the function implementation being the same.
   return (
     !!item &&
     typeof item === 'object' &&
-    !!(item as React.ReactElement).type &&
     // StackItem is generated by createComponent, so we need to check its displayName instead of name
-    ((item as React.ReactElement).type as React.ComponentType).displayName === StackItem.displayName
+    !!(item as React.ReactElement).type &&
+    ((item as React.ReactElement).type as React.ComponentType<React.PropsWithChildren<unknown>>).displayName ===
+      StackItem.displayName
   );
 }
 
@@ -116,7 +117,7 @@ const StackStatics = {
   Item: StackItem,
 };
 
-export const Stack: React.FunctionComponent<IStackProps> & {
+export const Stack: React.FunctionComponent<React.PropsWithChildren<IStackProps>> & {
   Item: React.FunctionComponent<IStackItemProps>;
 } = createComponent(StackView, {
   displayName: 'Stack',
diff --git a/packages/react/src/components/Stack/StackItem/StackItem.tsx b/packages/react/src/components/Stack/StackItem/StackItem.tsx
index 288f39c027d58..bd437649c18a1 100644
--- a/packages/react/src/components/Stack/StackItem/StackItem.tsx
+++ b/packages/react/src/components/Stack/StackItem/StackItem.tsx
@@ -21,7 +21,7 @@ const StackItemView: IStackItemComponent['view'] = props => {
   return <Slots.root {...nativeProps}>{children}</Slots.root>;
 };
 
-export const StackItem: React.FunctionComponent<IStackItemProps> = createComponent(StackItemView, {
+export const StackItem: React.FunctionComponent<React.PropsWithChildren<IStackItemProps>> = createComponent(StackItemView, {
   displayName: 'StackItem',
   styles,
 });
diff --git a/packages/react/src/components/Sticky/Sticky.tsx b/packages/react/src/components/Sticky/Sticky.tsx
index 197124193dea2..96cd1f569044e 100644
--- a/packages/react/src/components/Sticky/Sticky.tsx
+++ b/packages/react/src/components/Sticky/Sticky.tsx
@@ -25,6 +25,7 @@ export class Sticky extends React.Component<IStickyProps, IStickyState> {
   };
 
   public static contextType = ScrollablePaneContext;
+  public context: React.ContextType<typeof ScrollablePaneContext>;
 
   private _root = React.createRef<HTMLDivElement>();
   private _stickyContentTop = React.createRef<HTMLDivElement>();
diff --git a/packages/react/src/components/TimePicker/TimePicker.test.tsx b/packages/react/src/components/TimePicker/TimePicker.test.tsx
index 6b59c63e10fb8..aae24cf18fa7f 100644
--- a/packages/react/src/components/TimePicker/TimePicker.test.tsx
+++ b/packages/react/src/components/TimePicker/TimePicker.test.tsx
@@ -6,7 +6,7 @@ import { mount } from 'enzyme';
 import type { IComboBox } from '../ComboBox/ComboBox.types';
 import { KeyCodes } from '../../Utilities';
 import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEvent, { PointerEventsCheckLevel } from '@testing-library/user-event';
 
 describe('TimePicker', () => {
   it('renders correctly', () => {
@@ -68,7 +68,7 @@ describe('TimePicker', () => {
 
     userEvent.click(timePickerComboBox);
     const timePickerOptions = getAllByRole('option') as HTMLButtonElement[];
-    userEvent.click(timePickerOptions[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(timePickerOptions[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     const formattedSelectedTime = _selectedTime.toLocaleTimeString([], {
       hour: 'numeric',
@@ -106,7 +106,7 @@ describe('TimePicker', () => {
 
     userEvent.click(timePickerComboBox);
     const timePickerOptions = getAllByRole('option') as HTMLButtonElement[];
-    userEvent.click(timePickerOptions[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(timePickerOptions[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     const formattedSelectedTime = _selectedTime.toLocaleTimeString([], {
       hour: 'numeric',
@@ -139,7 +139,7 @@ describe('TimePicker', () => {
     const timePickerComboBox = getByRole('combobox') as HTMLInputElement;
     userEvent.click(timePickerComboBox);
     const timePickerOptions = getAllByRole('option') as HTMLButtonElement[];
-    userEvent.click(timePickerOptions[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(timePickerOptions[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     expect(onChange).toHaveBeenLastCalledWith(expect.anything(), new Date('February 27, 2023 08:30:00'));
 
@@ -163,7 +163,7 @@ describe('TimePicker', () => {
 
     userEvent.click(timePickerComboBox);
     const timePickerOptions = getAllByRole('option') as HTMLButtonElement[];
-    userEvent.click(timePickerOptions[2], undefined, { skipPointerEventsCheck: true });
+    userEvent.click(timePickerOptions[2], { pointerEventsCheck: PointerEventsCheckLevel.EachTarget });
 
     expect(timePickerComboBox.value).toEqual('14:00');
   });
diff --git a/packages/react/src/components/TimePicker/TimePicker.tsx b/packages/react/src/components/TimePicker/TimePicker.tsx
index 473d207f1ea8c..b03702df2ff5b 100644
--- a/packages/react/src/components/TimePicker/TimePicker.tsx
+++ b/packages/react/src/components/TimePicker/TimePicker.tsx
@@ -36,7 +36,7 @@ const getDefaultStrings = (useHour12: boolean, showSeconds: boolean): ITimePicke
 /**
  * {@docCategory TimePicker}
  */
-export const TimePicker: React.FunctionComponent<ITimePickerProps> = ({
+export const TimePicker: React.FunctionComponent<React.PropsWithChildren<ITimePickerProps>> = ({
   label,
   increments = 30,
   showSeconds = false,
diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx
index da3ab0ee3f489..5e84a64bbbb6d 100644
--- a/packages/react/src/components/Tooltip/Tooltip.tsx
+++ b/packages/react/src/components/Tooltip/Tooltip.tsx
@@ -4,7 +4,7 @@ import { TooltipBase } from './Tooltip.base';
 import { getStyles } from './Tooltip.styles';
 import type { ITooltipProps, ITooltipStyleProps, ITooltipStyles } from './Tooltip.types';
 
-export const Tooltip: React.FunctionComponent<ITooltipProps> = styled<
+export const Tooltip: React.FunctionComponent<React.PropsWithChildren<ITooltipProps>> = styled<
   ITooltipProps,
   ITooltipStyleProps,
   ITooltipStyles
diff --git a/packages/react/src/components/Tooltip/TooltipHost.base.tsx b/packages/react/src/components/Tooltip/TooltipHost.base.tsx
index 966fc56845d87..504c27544059d 100644
--- a/packages/react/src/components/Tooltip/TooltipHost.base.tsx
+++ b/packages/react/src/components/Tooltip/TooltipHost.base.tsx
@@ -34,6 +34,7 @@ export class TooltipHostBase extends React.Component<ITooltipHostProps, ITooltip
 
   public static contextType = WindowContext;
   private static _currentVisibleTooltip: ITooltipHost | undefined;
+  public context: React.ContextType<typeof WindowContext>;
 
   // The wrapping div that gets the hover events
   private _tooltipHost = React.createRef<HTMLDivElement>();
diff --git a/packages/react/src/components/Tooltip/TooltipHost.ts b/packages/react/src/components/Tooltip/TooltipHost.ts
index 9ebceca53e8d5..cbcce41867030 100644
--- a/packages/react/src/components/Tooltip/TooltipHost.ts
+++ b/packages/react/src/components/Tooltip/TooltipHost.ts
@@ -4,7 +4,7 @@ import { TooltipHostBase } from './TooltipHost.base';
 import { getStyles } from './TooltipHost.styles';
 import type { ITooltipHostProps, ITooltipHostStyleProps, ITooltipHostStyles } from './TooltipHost.types';
 
-export const TooltipHost: React.FunctionComponent<ITooltipHostProps> = styled<
+export const TooltipHost: React.FunctionComponent<React.PropsWithChildren<ITooltipHostProps>> = styled<
   ITooltipHostProps,
   ITooltipHostStyleProps,
   ITooltipHostStyles
diff --git a/packages/react/src/components/pickers/BasePicker.tsx b/packages/react/src/components/pickers/BasePicker.tsx
index f9a15be205724..ec4a00f0010db 100644
--- a/packages/react/src/components/pickers/BasePicker.tsx
+++ b/packages/react/src/components/pickers/BasePicker.tsx
@@ -106,6 +106,7 @@ export class BasePicker<T extends {}, P extends IBasePickerProps<T>>
   implements IBasePicker<T>
 {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   // Refs
   protected root = React.createRef<HTMLDivElement>();
diff --git a/packages/react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/react/src/components/pickers/Suggestions/Suggestions.tsx
index 0ef0749a125f4..3297c9af34c2d 100644
--- a/packages/react/src/components/pickers/Suggestions/Suggestions.tsx
+++ b/packages/react/src/components/pickers/Suggestions/Suggestions.tsx
@@ -388,7 +388,8 @@ export class Suggestions<T> extends React.Component<ISuggestionsProps<T>, ISugge
 
     let { suggestions } = this.props;
 
-    const StyledTypedSuggestionsItem: React.FunctionComponent<ISuggestionItemProps<T>> = StyledSuggestionsItem;
+    const StyledTypedSuggestionsItem: React.FunctionComponent<React.PropsWithChildren<ISuggestionItemProps<T>>> =
+      StyledSuggestionsItem;
 
     let selectedIndex = -1;
     suggestions.some((element, index) => {
diff --git a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx
index 0a69e4deca5e4..2641a33fffb41 100644
--- a/packages/react/src/utilities/DraggableZone/DraggableZone.tsx
+++ b/packages/react/src/utilities/DraggableZone/DraggableZone.tsx
@@ -30,6 +30,7 @@ type MouseTouchEvent<T> = React.MouseEvent<T> & React.TouchEvent<T> & Event;
 
 export class DraggableZone extends React.Component<IDraggableZoneProps, IDraggableZoneState> {
   public static contextType = WindowContext;
+  public context: React.ContextType<typeof WindowContext>;
 
   private _touchId?: number;
   private _currentEventType = eventMapping.mouse;
diff --git a/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx b/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx
index 987aa4b29e154..5bf339a621969 100644
--- a/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx
+++ b/packages/react/src/utilities/ThemeProvider/ThemeProvider.tsx
@@ -7,7 +7,8 @@ import type { ThemeProviderProps } from './ThemeProvider.types';
 /**
  * ThemeProvider, used for providing css variables and registering stylesheets.
  */
-export const ThemeProvider: React.FunctionComponent<ThemeProviderProps> = React.forwardRef<
+// @ts-expect-error React 18 RefAttibutes LegacyRef issue
+export const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProviderProps>> = React.forwardRef<
   HTMLDivElement,
   ThemeProviderProps
 >((props: ThemeProviderProps, ref: React.Ref<HTMLDivElement>) => {
diff --git a/packages/storybook/src/decorators/withKeytipLayer.tsx b/packages/storybook/src/decorators/withKeytipLayer.tsx
index 992193664c60f..64df84e024458 100644
--- a/packages/storybook/src/decorators/withKeytipLayer.tsx
+++ b/packages/storybook/src/decorators/withKeytipLayer.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { KeytipLayer } from '@fluentui/react/lib/Keytips';
 
-export const KeytipLayerWrapper: React.FunctionComponent<{}> = props => {
+export const KeytipLayerWrapper: React.FunctionComponent<React.PropsWithChildren> = props => {
   return (
     <>
       <KeytipLayer content="Alt Windows" />
diff --git a/packages/storybook/src/decorators/withStrictMode.tsx b/packages/storybook/src/decorators/withStrictMode.tsx
index ddaf7739563df..cf26525ef49b9 100644
--- a/packages/storybook/src/decorators/withStrictMode.tsx
+++ b/packages/storybook/src/decorators/withStrictMode.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Decorator } from '@storybook/react';
 
-const StrictModeWrapper: React.FunctionComponent<{ strictMode: boolean }> = props => {
+const StrictModeWrapper: React.FunctionComponent<React.PropsWithChildren<{ strictMode: boolean }>> = props => {
   return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : <>{props.children}</>;
 };
 
diff --git a/packages/utilities/etc/utilities.api.md b/packages/utilities/etc/utilities.api.md
index 0195b48587385..edf93e66ecd7f 100644
--- a/packages/utilities/etc/utilities.api.md
+++ b/packages/utilities/etc/utilities.api.md
@@ -56,8 +56,8 @@ export function arraysEqual<T>(array1: T[], array2: T[]): boolean;
 
 // @public
 export function asAsync<TProps extends {}>(options: IAsAsyncOptions<TProps>): React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TProps & {
-    asyncPlaceholder?: React_2.ElementType<any> | undefined;
-}> & React_2.RefAttributes<React_2.ElementType<TProps>>>;
+    asyncPlaceholder?: React_2.ElementType<any, keyof React_2.JSX.IntrinsicElements> | undefined;
+}> & React_2.RefAttributes<React_2.ElementType<TProps, keyof React_2.JSX.IntrinsicElements>>>;
 
 // @public
 export function assertNever(x: never): never;
@@ -315,7 +315,7 @@ export const FocusRects: React_2.FunctionComponent<{
 export const FocusRectsContext: React_2.Context<IFocusRectsContext | undefined>;
 
 // @public (undocumented)
-export const FocusRectsProvider: React_2.FC<FocusRectsProviderProps>;
+export const FocusRectsProvider: React_2.FC<React_2.PropsWithChildren<FocusRectsProviderProps>>;
 
 // @public (undocumented)
 export type FocusRectsProviderProps = {
@@ -1051,7 +1051,7 @@ export type MergeStylesRootContextValue = {
 };
 
 // @public
-export const MergeStylesRootProvider: React_2.FC<MergeStylesRootProviderProps>;
+export const MergeStylesRootProvider: React_2.FC<React_2.PropsWithChildren<MergeStylesRootProviderProps>>;
 
 // @public (undocumented)
 export type MergeStylesRootProviderProps = {
@@ -1083,7 +1083,7 @@ export type MergeStylesShadowRootContextValue = {
 };
 
 // @public
-export const MergeStylesShadowRootProvider: React_2.FC<MergeStylesShadowRootProviderProps>;
+export const MergeStylesShadowRootProvider: React_2.FC<React_2.PropsWithChildren<MergeStylesShadowRootProviderProps>>;
 
 // @public (undocumented)
 export type MergeStylesShadowRootProviderProps = {
@@ -1310,7 +1310,7 @@ export function shallowCompare<TA extends any, TB extends any>(a: TA, b: TB): bo
 export function shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap', doc?: Document): boolean;
 
 // @public
-export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>, TStyleProps, TStyleSet extends IStyleSetBase>(Component: React_2.ComponentClass<TComponentProps> | React_2.FunctionComponent<TComponentProps>, baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>, getProps?: (props: TComponentProps) => Partial<TComponentProps>, customizable?: ICustomizableProps, pure?: boolean): React_2.FunctionComponent<TComponentProps>;
+export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet>, TStyleProps, TStyleSet extends IStyleSetBase>(Component: React_2.ComponentClass<TComponentProps> | React_2.FunctionComponent<TComponentProps>, baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>, getProps?: (props: TComponentProps) => Partial<TComponentProps>, customizable?: ICustomizableProps, pure?: boolean): React_2.FunctionComponent<React_2.PropsWithChildren<TComponentProps>>;
 
 // @public (undocumented)
 export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet> & React_2.RefAttributes<TRef>, TStyleProps, TStyleSet extends IStyleSetBase, TRef = unknown>(Component: React_2.ComponentClass<TComponentProps> | React_2.FunctionComponent<TComponentProps>, baseStyles: IStyleFunctionOrObject<TStyleProps, TStyleSet>, getProps?: (props: TComponentProps) => Partial<TComponentProps>, customizable?: ICustomizableProps, pure?: boolean): React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<TComponentProps> & React_2.RefAttributes<TRef>>;
diff --git a/packages/utilities/src/BaseComponent.test.tsx b/packages/utilities/src/BaseComponent.test.tsx
index 8a3a69903db36..4dca25d46a7e1 100644
--- a/packages/utilities/src/BaseComponent.test.tsx
+++ b/packages/utilities/src/BaseComponent.test.tsx
@@ -10,7 +10,7 @@ describe('BaseComponent', () => {
       public root!: HTMLElement;
 
       public render(): JSX.Element {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        // @ts-expect-error legacy eslint-disable-next-line @typescript-eslint/no-deprecated
         return <div ref={this._resolveRef('root')} />;
       }
     }
diff --git a/packages/utilities/src/FocusRectsProvider.tsx b/packages/utilities/src/FocusRectsProvider.tsx
index cadc58c2a56c7..652343d4ab15b 100644
--- a/packages/utilities/src/FocusRectsProvider.tsx
+++ b/packages/utilities/src/FocusRectsProvider.tsx
@@ -13,7 +13,7 @@ export type FocusRectsProviderProps = {
   layerRoot?: boolean;
 };
 
-export const FocusRectsProvider: React.FC<FocusRectsProviderProps> = props => {
+export const FocusRectsProvider: React.FC<React.PropsWithChildren<FocusRectsProviderProps>> = props => {
   const { providerRef, layerRoot } = props;
   const [registeredProviders] = React.useState<React.RefObject<HTMLElement>[]>([]);
   const parentContext = React.useContext(FocusRectsContext);
diff --git a/packages/utilities/src/asAsync.tsx b/packages/utilities/src/asAsync.tsx
index 861197257e7da..5a4835aa14b97 100644
--- a/packages/utilities/src/asAsync.tsx
+++ b/packages/utilities/src/asAsync.tsx
@@ -51,7 +51,7 @@ const _syncModuleCache =
  */
 export function asAsync<TProps extends {}>(options: IAsAsyncOptions<TProps>) {
   class Async extends React.Component<
-    TProps & {
+    React.PropsWithoutRef<TProps> & {
       asyncPlaceholder?: React.ElementType;
       forwardedRef: React.Ref<React.ElementType<TProps>>;
     },
diff --git a/packages/utilities/src/customizations/customizable.tsx b/packages/utilities/src/customizations/customizable.tsx
index 05ece805317e1..5f57ba8d99144 100644
--- a/packages/utilities/src/customizations/customizable.tsx
+++ b/packages/utilities/src/customizations/customizable.tsx
@@ -34,6 +34,8 @@ export function customizable(
       public static displayName: string = 'Customized' + scope;
       public static contextType = WindowContext;
 
+      public declare context: React.ContextType<typeof WindowContext>;
+
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       private _styleCache: { default?: any; component?: any; merged?: any } = {};
 
diff --git a/packages/utilities/src/shadowDom/contexts/MergeStylesRootContext.tsx b/packages/utilities/src/shadowDom/contexts/MergeStylesRootContext.tsx
index 081032388e542..dd545e6711507 100644
--- a/packages/utilities/src/shadowDom/contexts/MergeStylesRootContext.tsx
+++ b/packages/utilities/src/shadowDom/contexts/MergeStylesRootContext.tsx
@@ -75,7 +75,7 @@ export type MergeStylesRootProviderProps = {
  * Root context provider for mergeStyles shadow DOM.
  * Typically this is placed at the render root of your React application.
  */
-export const MergeStylesRootProvider: React.FC<MergeStylesRootProviderProps> = ({
+export const MergeStylesRootProvider: React.FC<React.PropsWithChildren<MergeStylesRootProviderProps>> = ({
   stylesheets: userSheets,
   window: userWindow,
   useAdoptedStylesheet,
@@ -93,7 +93,7 @@ export const MergeStylesRootProvider: React.FC<MergeStylesRootProviderProps> = (
     () => userSheets || new Map(),
   );
 
-  const sheetHandler = React.useCallback(({ key, sheet }) => {
+  const sheetHandler = React.useCallback(({ key, sheet }: { key: string; sheet: ExtendedCSSStyleSheet }) => {
     setStylesheets(prev => {
       const next = new Map<string, ExtendedCSSStyleSheet>(prev);
       next.set(key, sheet);
diff --git a/packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx b/packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx
index 67057bc539f33..cce679e7d1c1e 100644
--- a/packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx
+++ b/packages/utilities/src/shadowDom/contexts/MergeStylesShadowRootContext.tsx
@@ -28,7 +28,7 @@ export type MergeStylesShadowRootProviderProps = {
 /**
  * Context for a shadow root.
  */
-export const MergeStylesShadowRootProvider: React.FC<MergeStylesShadowRootProviderProps> = ({
+export const MergeStylesShadowRootProvider: React.FC<React.PropsWithChildren<MergeStylesShadowRootProviderProps>> = ({
   shadowRoot,
   ...props
 }) => {
diff --git a/packages/utilities/src/styled.test.tsx b/packages/utilities/src/styled.test.tsx
index 699438500d6b3..61c336fbce641 100644
--- a/packages/utilities/src/styled.test.tsx
+++ b/packages/utilities/src/styled.test.tsx
@@ -45,7 +45,7 @@ class TestBase extends React.Component<ITestProps> {
   }
 }
 
-class ShortCircuit extends React.PureComponent {
+class ShortCircuit extends React.PureComponent<React.PropsWithChildren<unknown>> {
   public render(): JSX.Element {
     return <div>{this.props.children}</div>;
   }
diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx
index bd45932b2861d..891f5cbbf003c 100644
--- a/packages/utilities/src/styled.tsx
+++ b/packages/utilities/src/styled.tsx
@@ -66,7 +66,7 @@ export function styled<
   getProps?: (props: TComponentProps) => Partial<TComponentProps>,
   customizable?: ICustomizableProps,
   pure?: boolean,
-): React.FunctionComponent<TComponentProps>;
+): React.FunctionComponent<React.PropsWithChildren<TComponentProps>>;
 export function styled<
   TComponentProps extends IPropsWithStyles<TStyleProps, TStyleSet> & React.RefAttributes<TRef>,
   TStyleProps,
@@ -95,12 +95,12 @@ export function styled<
 
   const { scope, fields = DefaultFields } = customizable;
 
-  const Wrapped = React.forwardRef((props: TComponentProps, forwardedRef: React.Ref<TRef>) => {
+  const Wrapped = React.forwardRef<TRef, TComponentProps>((props, forwardedRef) => {
     const styles = React.useRef<StyleFunction<TStyleProps, TStyleSet>>();
 
     const settings = useCustomizationSettings(fields, scope);
     const { styles: customizedStyles, dir, ...rest } = settings;
-    const additionalProps = getProps ? getProps(props) : undefined;
+    const additionalProps = getProps ? getProps(props as TComponentProps) : undefined;
 
     const { useStyled } = useMergeStylesHooks();
 
@@ -130,7 +130,15 @@ export function styled<
 
     styles.current.__shadowConfig__ = useStyled(scope);
 
-    return <Component ref={forwardedRef} {...rest} {...additionalProps} {...props} styles={styles.current} />;
+    return (
+      <Component
+        ref={forwardedRef}
+        {...rest}
+        {...additionalProps}
+        {...(props as TComponentProps)}
+        styles={styles.current}
+      />
+    );
   });
   // Function.prototype.name is an ES6 feature, so the cast to any is required until we're
   // able to drop IE 11 support and compile with ES6 libs
diff --git a/yarn.lock b/yarn.lock
index 9829dfa4f7621..af7357295342f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,10 +27,10 @@
   dependencies:
     tunnel "^0.0.6"
 
-"@adobe/css-tools@^4.0.1":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.2.tgz#a6abc715fb6884851fca9dad37fc34739a04fd11"
-  integrity sha512-DA5a1C0gD/pLOvhv33YMrbf2FK3oUzwNl9oOJqE4XVjuEtt6XIakRcsd7eLiOSPkp1kTRQGICTA8cKra/vFbjw==
+"@adobe/css-tools@^4.4.0":
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.4.2.tgz#c836b1bd81e6d62cd6cdf3ee4948bcdce8ea79c8"
+  integrity sha512-baYZExFpsdkBNuvGKTKWCwKH57HRZLVtycZS05WTQNVOiXVSeAki3nU35zlRbToeMW8aHlJfyS+1C4BOv27q0A==
 
 "@ampproject/remapping@^2.2.0":
   version "2.2.0"
@@ -1391,7 +1391,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.22.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.4", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.22.6", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.0.tgz#3af9a91c1b739c569d5d80cc917280919c544ecb"
   integrity sha512-7dRy4DwXwtzBrPbZflqxnvfxLF8kdZXPkhymtDeFoFqE6ldzjQFgYTtYIFARcLEYDrqfBfYcZt1WqFxRoyC9Rw==
@@ -4733,21 +4733,7 @@
   resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.4.tgz#86e04e677cd6c05fa230dd15ac223fa72d1d7090"
   integrity sha512-kIhULpw9TrGYnHp/8VfdcneIcxKnLixmADtukQRtJUmsVlMg0niMkwV0xZmi8hqa57xqilIHjWFA0GKvEjVU5g==
 
-"@testing-library/dom@8.11.3", "@testing-library/dom@^8.0.0":
-  version "8.11.3"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.3.tgz#38fd63cbfe14557021e88982d931e33fb7c1a808"
-  integrity sha512-9LId28I+lx70wUiZjLvi1DB/WT2zGOxUh46glrSNMaWVx849kKAluezVzZrXJfTKKoQTmEOutLes/bHg4Bj3aA==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^5.0.0"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
-    pretty-format "^27.0.2"
-
-"@testing-library/dom@^10.1.0":
+"@testing-library/dom@10.4.0", "@testing-library/dom@^10.4.0":
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
   integrity sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==
@@ -4761,19 +4747,17 @@
     lz-string "^1.5.0"
     pretty-format "^27.0.2"
 
-"@testing-library/jest-dom@5.16.5":
-  version "5.16.5"
-  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
-  integrity sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==
+"@testing-library/jest-dom@6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.6.3.tgz#26ba906cf928c0f8172e182c6fe214eb4f9f2bd2"
+  integrity sha512-IteBhl4XqYNkM54f4ejhLRJiZNqcSCoXUOG2CPK7qbD322KjQozM4kHQOfkG2oln9b9HTYqs+Sae8vBATubxxA==
   dependencies:
-    "@adobe/css-tools" "^4.0.1"
-    "@babel/runtime" "^7.9.2"
-    "@types/testing-library__jest-dom" "^5.9.1"
+    "@adobe/css-tools" "^4.4.0"
     aria-query "^5.0.0"
     chalk "^3.0.0"
     css.escape "^1.5.1"
-    dom-accessibility-api "^0.5.6"
-    lodash "^4.17.15"
+    dom-accessibility-api "^0.6.3"
+    lodash "^4.17.21"
     redent "^3.0.0"
 
 "@testing-library/react-hooks@8.0.1":
@@ -4784,29 +4768,14 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
-"@testing-library/react@12.1.2":
-  version "12.1.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.2.tgz#f1bc9a45943461fa2a598bb4597df1ae044cfc76"
-  integrity sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-
-"@testing-library/react@^16.0.0":
+"@testing-library/react@16.2.0", "@testing-library/react@^16.2.0":
   version "16.2.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.2.0.tgz#c96126ee01a49cdb47175721911b4a9432afc601"
   integrity sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
 
-"@testing-library/user-event@13.5.0":
-  version "13.5.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295"
-  integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
-"@testing-library/user-event@^14.5.2":
+"@testing-library/user-event@14.6.1", "@testing-library/user-event@^14.6.1":
   version "14.6.1"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.6.1.tgz#13e09a32d7a8b7060fe38304788ebf4197cd2149"
   integrity sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw==
@@ -4899,11 +4868,6 @@
   resolved "https://registry.yarnpkg.com/@types/argparse/-/argparse-1.0.38.tgz#a81fd8606d481f873a3800c6ebae4f1d768a56a9"
   integrity sha512-ebDJ9b0e702Yr7pWgB0jzm+CX4Srzz8RcXtLJDJB+BSccqMa36uyH/zUsSYao5+BD1ytv3k3rPYCq4mAE1hsXA==
 
-"@types/aria-query@^4.2.0":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.1.tgz#78b5433344e2f92e8b306c06a5622c50c245bf6b"
-  integrity sha512-S6oPal772qJZHoRZLFc/XoZW2gFvwXusYUmXPXkgxJLuEk2vOt7jc4Yo6z/vtI0EBkbPBVrJJ0B+prLIKiWqHg==
-
 "@types/aria-query@^5.0.1":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
@@ -5694,31 +5658,24 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@17.0.15":
-  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.15.tgz#f2c8efde11521a4b7991e076cb9c70ba3bb0d156"
-  integrity sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-dom@18.3.5":
   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-frame-component@^4.1.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@types/react-frame-component/-/react-frame-component-4.1.1.tgz#1d8293c062c1d43555ca80494a7b94e3088ad39e"
-  integrity sha512-7soxaTJ030rtC2lFlaFzzJyCY4rsPwOLxfw/eGnbEq/wq80e71outSL6dUXM9bOh2qMhM1xnp+EMEhjdVvIlkA==
+"@types/react-frame-component@^4.1.6":
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/@types/react-frame-component/-/react-frame-component-4.1.6.tgz#a683645c06bcd8fc0b05973ce0c1b24ed3f71191"
+  integrity sha512-Q99Hv1ky8sdoTIZw5YLGDbbWOcCdwRemxQ7BUU/ypLw2LZ6maov3EuztH5cyBUB4Lnd4MXF/6zwBYQhD/C+Vrg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-is@17.0.3":
-  version "17.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
-  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+"@types/react-is@18.3.1":
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-18.3.1.tgz#c354bd8954551d4c32143038b25abcd6effae04d"
+  integrity sha512-zts4lhQn5ia0cF/y2+3V6Riu0MAfez9/LJYavdM8TvcVl+S91A/7VWxyBT8hbRuWspmuCaiGI0F41OJYGrKhRA==
   dependencies:
-    "@types/react" "*"
+    "@types/react" "^18"
 
 "@types/react-router-dom@^5.1.5":
   version "5.1.5"
@@ -5751,13 +5708,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@17.0.2":
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.2.tgz#5f800a39b12ac8d2a2149e7e1885215bcf4edbbf"
-  integrity sha512-+F1KONQTBHDBBhbHuT2GNydeMpPuviduXIVJRB7Y4nma4NR5DrTJfMMZ+jbhEHbpwL+Uqhs1WXh4KHiyrtYTPg==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-test-renderer@18.3.1":
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.3.1.tgz#225bfe8d4ad7ee3b04c2fa27642bb74274a5961d"
@@ -5787,16 +5737,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.44", "@types/react@>=16", "@types/react@^17":
-  version "17.0.44"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
-  integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@18.3.20", "@types/react@^18":
+"@types/react@*", "@types/react@18.3.20", "@types/react@>=16", "@types/react@^18":
   version "18.3.20"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.20.tgz#b0dccda9d2f1bc24d2a04b1d0cb5d0b9a3576ad3"
   integrity sha512-IPaCZN7PShZK/3t6Q87pfTkRm6oLTd4vztyoj+cbHUF1g3FfVb2tFIL79uCRKEfv16AhqDMBywP2VW3KIZUvcg==
@@ -5852,7 +5793,7 @@
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
-"@types/scheduler@*", "@types/scheduler@0.16.2":
+"@types/scheduler@0.16.2":
   version "0.16.2"
   resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
   integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
@@ -5933,13 +5874,6 @@
   resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
   integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
 
-"@types/testing-library__jest-dom@^5.9.1":
-  version "5.9.5"
-  resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.9.5.tgz#5bf25c91ad2d7b38f264b12275e5c92a66d849b0"
-  integrity sha512-ggn3ws+yRbOHog9GxnXiEZ/35Mow6YtPZpd7Z5mKDeZS/o7zx3yAle0ov/wjhVB5QT4N2Dt+GNoGCdqkBGCajQ==
-  dependencies:
-    "@types/jest" "*"
-
 "@types/through2@*":
   version "2.0.34"
   resolved "https://registry.yarnpkg.com/@types/through2/-/through2-2.0.34.tgz#9c2a259a238dace2a05a2f8e94b786961bc27ac4"
@@ -10148,11 +10082,16 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+dom-accessibility-api@^0.5.9:
   version "0.5.11"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz#79d5846c4f90eba3e617d9031e921de9324f84ed"
   integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==
 
+dom-accessibility-api@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz#993e925cc1d73f2c662e7d75dd5a5445259a8fd8"
+  integrity sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -19829,16 +19768,16 @@ react-is@18.1.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
   integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
+react-is@18.3.1, react-is@^18.0.0, 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-is@^16.12.0, "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^16.13.1, react-is@^16.6.0, react-is@^16.6.3, react-is@^16.7.0, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^18.0.0, 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-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -19995,16 +19934,6 @@ react-table@^7.1.0:
   dependencies:
     "@scarf/scarf" "^1.0.4"
 
-react-test-renderer@17.0.2, react-test-renderer@^17.0.0:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
-  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^17.0.2"
-    react-shallow-renderer "^16.13.1"
-    scheduler "^0.20.2"
-
 react-test-renderer@18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
@@ -20014,6 +19943,16 @@ react-test-renderer@18.3.1:
     react-shallow-renderer "^16.15.0"
     scheduler "^0.23.2"
 
+react-test-renderer@^17.0.0:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
+  integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
+  dependencies:
+    object-assign "^4.1.1"
+    react-is "^17.0.2"
+    react-shallow-renderer "^16.13.1"
+    scheduler "^0.20.2"
+
 react-textarea-autosize@7.0.4:
   version "7.0.4"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.0.4.tgz#4e4be649b544a88713e7b5043f76950f35d3d503"