diff --git a/change/@fluentui-react-text-55873c36-7111-4f94-88da-e1e13d5df7fd.json b/change/@fluentui-react-text-55873c36-7111-4f94-88da-e1e13d5df7fd.json
new file mode 100644
index 00000000000000..2d7a63307b5a22
--- /dev/null
+++ b/change/@fluentui-react-text-55873c36-7111-4f94-88da-e1e13d5df7fd.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Migrate to simplified prop merging",
+  "packageName": "@fluentui/react-text",
+  "email": "andredias@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-text/.npmignore b/packages/react-text/.npmignore
index fa2d3a7f5111ca..e719afb921bc93 100644
--- a/packages/react-text/.npmignore
+++ b/packages/react-text/.npmignore
@@ -1,4 +1,3 @@
-.cache/
 .storybook/
 .vscode/
 bundle-size/
diff --git a/packages/react-text/.storybook/main.js b/packages/react-text/.storybook/main.js
index f47245f2d07f01..18a60b265c2cfb 100644
--- a/packages/react-text/.storybook/main.js
+++ b/packages/react-text/.storybook/main.js
@@ -1,11 +1,14 @@
 const rootMain = require('../../../.storybook/main');
 
-module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+module.exports = /** @type {Omit<import('../../../.storybook/main'), 'typescript'|'babel'>} */ ({
+  ...rootMain,
   stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };
 
+    // add your own webpack tweaks if needed
+
     return localConfig;
   },
 });
diff --git a/packages/react-text/.storybook/preview.js b/packages/react-text/.storybook/preview.js
index b52409294c3304..10fd98d02c9454 100644
--- a/packages/react-text/.storybook/preview.js
+++ b/packages/react-text/.storybook/preview.js
@@ -1,3 +1,7 @@
 import * as rootPreview from '../../../.storybook/preview';
 
+/** @type {typeof rootPreview.decorators} */
 export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };
diff --git a/packages/react-text/config/api-extractor.local.json b/packages/react-text/config/api-extractor.local.json
index c2ea401c1c3685..7974a129e8a337 100644
--- a/packages/react-text/config/api-extractor.local.json
+++ b/packages/react-text/config/api-extractor.local.json
@@ -1,5 +1,5 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "./api-extractor.json",
-  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts"
+  "mainEntryPointFilePath": "<projectFolder>/dist/packages/<unscopedPackageName>/src/index.d.ts"
 }
diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index 569f4abc1e6ca7..b7d30cb8b50eb6 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -4,74 +4,76 @@
 
 ```ts
 
-import type { ComponentPropsCompat } from '@fluentui/react-utilities';
-import type { ComponentStateCompat } from '@fluentui/react-utilities';
-import { ForwardRefExoticComponent } from 'react';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { FunctionComponent } from 'react';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
-import { RefAttributes } from 'react';
 
-// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts
+// Warning: (ae-forgotten-export) The symbol "TextWrapperProps" needs to be exported by the entry point index.d.ts
 //
 // @public
-const Body_2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
 // @public
-export const Caption: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Caption: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const Display: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Display: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const Headline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Headline: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const LargeTitle: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
 // @public
-export const Subheadline: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Subheadline: FunctionComponent<TextWrapperProps>;
 
 // @public
-const Text_2: React_2.ForwardRefExoticComponent<TextProps & React_2.RefAttributes<HTMLElement>>;
+const Text_2: React_2.FunctionComponent<TextProps>;
 export { Text_2 as Text }
 
+// @public (undocumented)
+export type TextCommons = {
+    wrap: boolean;
+    truncate: boolean;
+    block: boolean;
+    italic: boolean;
+    underline: boolean;
+    strikethrough: boolean;
+    size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    font: 'base' | 'monospace' | 'numeric';
+    weight: 'regular' | 'medium' | 'semibold';
+    align: 'start' | 'center' | 'end' | 'justify';
+};
+
 // @public
-export type TextDefaultedProps = never;
+export type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
 
 // @public
-export interface TextProps extends ComponentPropsCompat, React_2.HTMLAttributes<HTMLElement> {
-    align?: 'start' | 'center' | 'end' | 'justify';
-    as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre';
-    block?: boolean;
-    font?: 'base' | 'monospace' | 'numeric';
-    italic?: boolean;
-    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
-    strikethrough?: boolean;
-    truncate?: boolean;
-    underline?: boolean;
-    weight?: 'regular' | 'medium' | 'semibold';
-    wrap?: boolean;
-}
+export type TextSlots = {
+    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+};
 
 // @public
-export interface TextState extends ComponentStateCompat<TextProps, TextDefaultedProps> {
-    ref: React_2.Ref<HTMLElement>;
-}
+export type TextState = ComponentState<TextSlots> & TextCommons;
 
 // @public
-export const Title1: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Title1: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const Title2: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Title2: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const Title3: ForwardRefExoticComponent<Props & RefAttributes<HTMLElement>>;
+export const Title3: FunctionComponent<TextWrapperProps>;
 
 // @public
-export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>, defaultProps?: TextProps | undefined) => TextState;
+export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
 // @public
 export const useTextStyles: (state: TextState) => TextState;
diff --git a/packages/react-text/package.json b/packages/react-text/package.json
index fa2610d3844b05..8a3c40096580ad 100644
--- a/packages/react-text/package.json
+++ b/packages/react-text/package.json
@@ -21,7 +21,7 @@
     "start": "yarn storybook",
     "test": "jest",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-text/src && yarn docs",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-text/src && yarn docs",
     "storybook": "start-storybook"
   },
   "devDependencies": {
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index 9b5145f60f650c..e565b0099d214b 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Body typography variant
  */
-export const Body = createWrapper({ useStyles, displayName: 'Body' });
+export const Body: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Body' });
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index f9e64535a7006a..5684ebe2cb77b7 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Caption typography variant
  */
-export const Caption = createWrapper({ useStyles, displayName: 'Caption' });
+export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Caption' });
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index 48402fddbdc1ba..283796d8f786ce 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Display typography variant
  */
-export const Display = createWrapper({ useStyles, displayName: 'Display' });
+export const Display: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Display' });
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index 414e03e30c3cfe..95ff70597cda9e 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,7 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Headline typography variant
  */
-export const Headline = createWrapper({ useStyles, displayName: 'Headline' });
+export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  displayName: 'Headline',
+});
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index 43d26a118f81bb..03d8d54d04da46 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,7 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Large Title typography variant
  */
-export const LargeTitle = createWrapper({ useStyles, displayName: 'LargeTitle' });
+export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  displayName: 'LargeTitle',
+});
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 0161d95ad96902..6619566d702877 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,7 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Subheadline typography variant
  */
-export const Subheadline = createWrapper({ useStyles, displayName: 'Subheadline' });
+export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  displayName: 'Subheadline',
+});
diff --git a/packages/react-text/src/components/Text/Text.tsx b/packages/react-text/src/components/Text/Text.tsx
index 6854bb6fc5a4f1..677c7007586e07 100644
--- a/packages/react-text/src/components/Text/Text.tsx
+++ b/packages/react-text/src/components/Text/Text.tsx
@@ -7,10 +7,14 @@ import type { TextProps } from './Text.types';
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
  */
-export const Text = React.forwardRef<HTMLElement, TextProps>((props, ref) => {
+export const Text: React.FunctionComponent<TextProps> = React.forwardRef<
+  HTMLSpanElement | HTMLParagraphElement | HTMLHeadingElement | HTMLPreElement,
+  TextProps
+>((props, ref) => {
   const state = useText(props, ref);
 
   useTextStyles(state);
+
   return renderText(state);
 });
 
diff --git a/packages/react-text/src/components/Text/Text.types.ts b/packages/react-text/src/components/Text/Text.types.ts
index c1a092b0c75826..66734d674af4fc 100644
--- a/packages/react-text/src/components/Text/Text.types.ts
+++ b/packages/react-text/src/components/Text/Text.types.ts
@@ -1,99 +1,90 @@
-import * as React from 'react';
-import type { ComponentPropsCompat, ComponentStateCompat } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 
 /**
- * Text Props
+ * Text slots
  */
-export interface TextProps extends ComponentPropsCompat, React.HTMLAttributes<HTMLElement> {
+export type TextSlots = {
+  root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+};
+
+export type TextCommons = {
   /**
    * Wraps the text content on white spaces.
    *
    * @defaultValue true
    */
-  wrap?: boolean;
+  wrap: boolean;
 
   /**
    * Truncate overflowing text for block displays.
    *
    * @defaultValue false
    */
-  truncate?: boolean;
+  truncate: boolean;
 
   /**
    * Applies a block display for the content.
    *
    * @defaultValue false
    */
-  block?: boolean;
+  block: boolean;
 
   /**
    * Applies the italic font style to the content.
    *
    * @defaultValue false
    */
-  italic?: boolean;
+  italic: boolean;
 
   /**
    * Applies the underline text decoration to the content.
    *
    * @defaultValue false
    */
-  underline?: boolean;
+  underline: boolean;
 
   /**
    * Applies the strikethrough text decoration to the content.
    *
    * @defaultValue false
    */
-  strikethrough?: boolean;
+  strikethrough: boolean;
 
   /**
    * Applies font size and line height based on the theme tokens.
    *
    * @defaultValue 300
    */
-  size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+  size: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
 
   /**
    * Applies the font family to the content.
    *
    * @defaultValue base
    */
-  font?: 'base' | 'monospace' | 'numeric';
+  font: 'base' | 'monospace' | 'numeric';
 
   /**
    * Applies font weight to the content.
    *
    * @defaultValue regular
    */
-  weight?: 'regular' | 'medium' | 'semibold';
+  weight: 'regular' | 'medium' | 'semibold';
 
   /**
    * Aligns text based on the parent container.
    *
    * @defaultValue start
    */
-  align?: 'start' | 'center' | 'end' | 'justify';
-
-  /**
-   * Component to be rendered as.
-   *
-   * @defaultValue span
-   */
-  as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre';
-}
+  align: 'start' | 'center' | 'end' | 'justify';
+};
 
 /**
- * Names of TextProps that have a default value in useText
+ * Text Props
  */
-export type TextDefaultedProps = never;
+export type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>;
 
 /**
  * State used in rendering Text
  */
-export interface TextState extends ComponentStateCompat<TextProps, TextDefaultedProps> {
-  /**
-   * Ref to the root element
-   */
-  ref: React.Ref<HTMLElement>;
-}
+export type TextState = ComponentState<TextSlots> & TextCommons;
diff --git a/packages/react-text/src/components/Text/renderText.tsx b/packages/react-text/src/components/Text/renderText.tsx
index fca08d03d82524..fb6200fa8dca86 100644
--- a/packages/react-text/src/components/Text/renderText.tsx
+++ b/packages/react-text/src/components/Text/renderText.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
-import { getSlotsCompat } from '@fluentui/react-utilities';
-import type { TextState } from './Text.types';
+import { getSlots } from '@fluentui/react-utilities';
+import type { TextSlots, TextState } from './Text.types';
 
 /**
  * Render the final JSX of Text
  */
 export const renderText = (state: TextState) => {
-  const { slots, slotProps } = getSlotsCompat(state);
+  const { slots, slotProps } = getSlots<TextSlots>(state);
 
-  return <slots.root {...slotProps.root}>{state.children}</slots.root>;
+  return <slots.root {...slotProps.root} />;
 };
diff --git a/packages/react-text/src/components/Text/useText.ts b/packages/react-text/src/components/Text/useText.ts
index cc48d3aeccbeca..81087372e3da85 100644
--- a/packages/react-text/src/components/Text/useText.ts
+++ b/packages/react-text/src/components/Text/useText.ts
@@ -1,9 +1,7 @@
 import * as React from 'react';
-import { makeMergeProps } from '@fluentui/react-utilities';
+import { getNativeElementProps } from '@fluentui/react-utilities';
 import type { TextProps, TextState } from './Text.types';
 
-const mergeProps = makeMergeProps<TextState>();
-
 /**
  * Create the state required to render Text.
  *
@@ -12,17 +10,32 @@ const mergeProps = makeMergeProps<TextState>();
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export const useText = (props: TextProps, ref: React.Ref<HTMLElement>, defaultProps?: TextProps): TextState => {
-  const state = mergeProps(
-    {
+export const useText = (props: TextProps, ref: React.Ref<HTMLElement>): TextState => {
+  const { wrap, truncate, block, italic, underline, strikethrough, size, font, weight, align } = props;
+  const as = props.as ?? 'span';
+
+  const state: TextState = {
+    wrap: wrap ?? true,
+    truncate: truncate ?? false,
+    block: block ?? false,
+    italic: italic ?? false,
+    underline: underline ?? false,
+    strikethrough: strikethrough ?? false,
+    size: size ?? 300,
+    font: font ?? 'base',
+    weight: weight ?? 'regular',
+    align: align ?? 'start',
+
+    components: { root: 'span' },
+
+    root: getNativeElementProps(as, {
       ref,
-      as: 'span',
-    },
-    defaultProps,
-    props,
-  );
+      ...props,
+    }),
+  };
+  // TODO: Remove after fix to https://github.com/microsoft/fluentui/issues/19785
+  state.root.as = as;
 
   return state;
 };
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index d278405edcfb88..f82b691347cf44 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -102,7 +102,8 @@ const useStyles = makeStyles({
  */
 export const useTextStyles = (state: TextState): TextState => {
   const styles = useStyles();
-  state.className = mergeClasses(
+
+  state.root.className = mergeClasses(
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,
@@ -127,7 +128,7 @@ export const useTextStyles = (state: TextState): TextState => {
     state.align === 'center' && styles.alignCenter,
     state.align === 'end' && styles.alignEnd,
     state.align === 'justify' && styles.alignJustify,
-    state.className,
+    state.root.className,
   );
 
   return state;
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index 61fd5f456aba5c..e1b438dbda1e21 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 1 typography variant
  */
-export const Title1 = createWrapper({ useStyles, displayName: 'Title1' });
+export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title1' });
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index 20b631a5b1f04e..380f00ab5365f1 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 2 typography variant
  */
-export const Title2 = createWrapper({ useStyles, displayName: 'Title2' });
+export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title2' });
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index 5704b52d079c30..b3798357cfbae8 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -1,6 +1,7 @@
+import type { FunctionComponent } from 'react';
 import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
-import { createWrapper } from '../wrapper';
+import { createWrapper, TextWrapperProps } from '../wrapper';
 
 /**
  * Styles for the root slot
@@ -12,4 +13,4 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 3 typography variant
  */
-export const Title3 = createWrapper({ useStyles, displayName: 'Title3' });
+export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title3' });
diff --git a/packages/react-text/src/components/wrapper.tsx b/packages/react-text/src/components/wrapper.tsx
index 8060e7c3345983..64da1fcb2e4ae4 100644
--- a/packages/react-text/src/components/wrapper.tsx
+++ b/packages/react-text/src/components/wrapper.tsx
@@ -3,16 +3,20 @@ import { mergeClasses } from '@fluentui/react-make-styles';
 import { renderText, useText, useTextStyles } from '../Text';
 import type { TextProps } from '../Text';
 
-export interface Props extends Omit<TextProps, 'font' | 'size'> {}
+export type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 
-export function createWrapper(options: { displayName: string; useStyles: () => Record<'root', string> }) {
+export function createWrapper(options: {
+  displayName: string;
+  useStyles: () => Record<'root', string>;
+}): React.FunctionComponent<TextWrapperProps> {
   const { useStyles, displayName } = options;
-  const Wrapper = React.forwardRef<HTMLElement, Props>((props, ref) => {
+  const Wrapper = React.forwardRef<HTMLElement, TextWrapperProps>((props, ref) => {
     const styles = useStyles();
-    const state = useText(props, ref);
+    const state = useText(props as TextProps, ref);
+
     useTextStyles(state);
 
-    state.className = mergeClasses(state.className, styles.root, props.className);
+    state.root.className = mergeClasses(state.root.className, styles.root, props.className);
 
     return renderText(state);
   });
diff --git a/packages/react-text/tsconfig.json b/packages/react-text/tsconfig.json
index ae87ea05d7f64a..bcaad318d3d265 100644
--- a/packages/react-text/tsconfig.json
+++ b/packages/react-text/tsconfig.json
@@ -2,9 +2,10 @@
   "extends": "../../tsconfig.base.json",
   "include": ["src"],
   "compilerOptions": {
-    "target": "ES5",
+    "target": "ES2019",
+    "isolatedModules": true,
     "module": "CommonJS",
-    "lib": ["es2015", "dom"],
+    "lib": ["ES2019", "dom"],
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,
@@ -12,7 +13,12 @@
     "importHelpers": true,
     "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "@testing-library/jest-dom"],
-    "isolatedModules": true
+    "types": [
+      "jest",
+      "custom-global",
+      "inline-style-expand-shorthand",
+      "@testing-library/jest-dom",
+      "storybook__addons"
+    ]
   }
 }