diff --git a/change/@fluentui-react-breadcrumb-preview-11c3318a-f80b-434c-b1ae-56c133b98a7c.json b/change/@fluentui-react-breadcrumb-preview-11c3318a-f80b-434c-b1ae-56c133b98a7c.json
new file mode 100644
index 00000000000000..c6319242bce924
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-11c3318a-f80b-434c-b1ae-56c133b98a7c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-77a7f4d8-bb8a-4180-8267-0f8ea01e3090.json b/change/@fluentui-react-card-77a7f4d8-bb8a-4180-8267-0f8ea01e3090.json
new file mode 100644
index 00000000000000..0b7d513cdbe7c9
--- /dev/null
+++ b/change/@fluentui-react-card-77a7f4d8-bb8a-4180-8267-0f8ea01e3090.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-card",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-drawer-47bfdeab-adf5-4f47-8213-763737c1449f.json b/change/@fluentui-react-drawer-47bfdeab-adf5-4f47-8213-763737c1449f.json
new file mode 100644
index 00000000000000..f2c98dd5076f93
--- /dev/null
+++ b/change/@fluentui-react-drawer-47bfdeab-adf5-4f47-8213-763737c1449f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-drawer",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-289ea7be-5325-4e6e-919e-2d79e9eeea3e.json b/change/@fluentui-react-image-289ea7be-5325-4e6e-919e-2d79e9eeea3e.json
new file mode 100644
index 00000000000000..d10d6ed2e5307c
--- /dev/null
+++ b/change/@fluentui-react-image-289ea7be-5325-4e6e-919e-2d79e9eeea3e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-image",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-e3797009-3912-4e9f-ab2e-c87aedf186da.json b/change/@fluentui-react-text-e3797009-3912-4e9f-ab2e-c87aedf186da.json
new file mode 100644
index 00000000000000..63fb62135b4a10
--- /dev/null
+++ b/change/@fluentui-react-text-e3797009-3912-4e9f-ab2e-c87aedf186da.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps for getIntrinsicElementProps",
+  "packageName": "@fluentui/react-text",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
index 1dee6c01111c69..1481deb38a069b 100644
--- a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
+++ b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
@@ -164,7 +164,7 @@ export const useBreadcrumbDivider_unstable: (props: BreadcrumbDividerProps, ref:
 export const useBreadcrumbDividerStyles_unstable: (state: BreadcrumbDividerState) => BreadcrumbDividerState;
 
 // @public
-export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLElement>) => BreadcrumbItemState;
+export const useBreadcrumbItem_unstable: (props: BreadcrumbItemProps, ref: React_2.Ref<HTMLLIElement>) => BreadcrumbItemState;
 
 // @public
 export const useBreadcrumbItemStyles_unstable: (state: BreadcrumbItemState) => BreadcrumbItemState;
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts
index d511d630457f7b..9d96e47c815589 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/Breadcrumb/useBreadcrumb.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbProps, BreadcrumbState } from './Breadcrumb.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 
@@ -34,7 +34,7 @@ export const useBreadcrumb_unstable = (props: BreadcrumbProps, ref: React.Ref<HT
       list: 'ol',
     },
     root: slot.always(
-      getNativeElementProps('nav', {
+      getIntrinsicElementProps('nav', {
         ref,
         'aria-label': props['aria-label'] ?? 'breadcrumb',
         ...(focusMode === 'arrow' ? focusAttributes : {}),
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx
index e6e28c0d5cc519..4aae61c5bd3dcb 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbDivider/useBreadcrumbDivider.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';
 import {
   ChevronRight20Regular,
@@ -35,7 +35,7 @@ export const useBreadcrumbDivider_unstable = (
       root: 'li',
     },
     root: slot.always(
-      getNativeElementProps('li', {
+      getIntrinsicElementProps('li', {
         ref,
         'aria-hidden': true,
         children: icon,
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
index ec5b5c511e2186..ed2247b2475098 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItem.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';
 import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
 
@@ -14,7 +14,7 @@ import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
  */
 export const useBreadcrumbItem_unstable = (
   props: BreadcrumbItemProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLLIElement>,
 ): BreadcrumbItemState => {
   const { size, hasInteractiveItems } = useBreadcrumbContext_unstable();
   const { current = false, icon } = props;
@@ -25,7 +25,7 @@ export const useBreadcrumbItem_unstable = (
   return {
     components: { root: 'li', icon: 'span' },
     root: slot.always(
-      getNativeElementProps('li', {
+      getIntrinsicElementProps('li', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-card/src/components/Card/useCard.ts b/packages/react-components/react-card/src/components/Card/useCard.ts
index aa310ef8e14391..d6ab52d50545ff 100644
--- a/packages/react-components/react-card/src/components/Card/useCard.ts
+++ b/packages/react-components/react-card/src/components/Card/useCard.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusableGroup, useFocusWithin } from '@fluentui/react-tabster';
 
 import type { CardProps, CardState } from './Card.types';
@@ -97,7 +97,7 @@ export const useCard_unstable = (props: CardProps, ref: React.Ref<HTMLDivElement
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: cardRef,
         role: 'group',
         ...focusAttributes,
diff --git a/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts b/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts
index 97183efce342d7..170fb992b28e02 100644
--- a/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts
+++ b/packages/react-components/react-card/src/components/CardFooter/useCardFooter.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { CardFooterProps, CardFooterState } from './CardFooter.types';
 
 /**
@@ -21,8 +21,11 @@ export const useCardFooter_unstable = (props: CardFooterProps, ref: React.Ref<HT
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `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,
       }),
       { elementType: 'div' },
diff --git a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
index 48897b1aa25e28..5c666697885735 100644
--- a/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-components/react-card/src/components/CardHeader/useCardHeader.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import type { CardHeaderProps, CardHeaderState } from './CardHeader.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardHeaderClassNames } from './useCardHeaderStyles.styles';
@@ -80,8 +80,11 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
     components: { root: 'div', image: 'div', header: 'div', description: 'div', action: 'div' },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `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,
       }),
       { elementType: 'div' },
diff --git a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
index 66f6eee799791c..800b403faea784 100644
--- a/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
+++ b/packages/react-components/react-card/src/components/CardPreview/useCardPreview.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import type { CardPreviewProps, CardPreviewState } from './CardPreview.types';
 import { useCardContext_unstable } from '../Card/CardContext';
 import { cardPreviewClassNames } from './useCardPreviewStyles.styles';
@@ -19,7 +19,10 @@ export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<
   const {
     selectableA11yProps: { referenceLabel, referenceId, setReferenceLabel, setReferenceId },
   } = useCardContext_unstable();
-  const previewRef = useMergedRefs(ref, React.useRef<HTMLDivElement>(null));
+  // FIXME:
+  // `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
+  const previewRef = useMergedRefs(ref as React.Ref<HTMLDivElement>, React.useRef<HTMLDivElement>(null));
 
   React.useEffect(() => {
     if (referenceLabel && referenceId) {
@@ -51,7 +54,7 @@ export const useCardPreview_unstable = (props: CardPreviewProps, ref: React.Ref<
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: previewRef,
         ...props,
       }),
diff --git a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts
index 148340acc524ca..7343eea2e101fa 100644
--- a/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerBody/useDrawerBody.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerBodyProps, DrawerBodyState } from './DrawerBody.types';
 
@@ -19,8 +19,11 @@ export const useDrawerBody_unstable = (props: DrawerBodyProps, ref: React.Ref<HT
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref,
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `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,
       }),
       { elementType: 'div' },
diff --git a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts
index 55fe72f11b173a..b54fc5d975f3ff 100644
--- a/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerFooter/useDrawerFooter.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerFooterProps, DrawerFooterState } from './DrawerFooter.types';
 
@@ -19,7 +19,7 @@ export const useDrawerFooter_unstable = (props: DrawerFooterProps, ref: React.Re
     },
 
     root: slot.always(
-      getNativeElementProps('footer', {
+      getIntrinsicElementProps('footer', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts
index a73eb34fc98e27..6ac3a8ecafb01d 100644
--- a/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerHeader/useDrawerHeader.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerHeaderProps, DrawerHeaderState } from './DrawerHeader.types';
 
@@ -19,7 +19,7 @@ export const useDrawerHeader_unstable = (props: DrawerHeaderProps, ref: React.Re
     },
 
     root: slot.always(
-      getNativeElementProps('header', {
+      getIntrinsicElementProps('header', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
index 500265f5bdf35b..2ae339f39eeeff 100644
--- a/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { DrawerHeaderNavigationProps, DrawerHeaderNavigationState } from './DrawerHeaderNavigation.types';
 
@@ -22,7 +22,7 @@ export const useDrawerHeaderNavigation_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('nav', {
+      getIntrinsicElementProps('nav', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
index fbc0b274ee45fb..91ed788aefa8fd 100644
--- a/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '@fluentui/react-dialog';
 
 import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
@@ -45,7 +45,7 @@ export const useDrawerHeaderTitle_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts
index ec215bd5c79027..9e8bddad410526 100644
--- a/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts
+++ b/packages/react-components/react-drawer/src/components/DrawerInline/useDrawerInline.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useMergedRefs } from '@fluentui/react-utilities';
 import { useMotion } from '@fluentui/react-motion-preview';
 
 import type { DrawerInlineProps, DrawerInlineState } from './DrawerInline.types';
@@ -29,7 +29,7 @@ export const useDrawerInline_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ...props,
         ref: useMergedRefs(ref, motion.ref),
       }),
diff --git a/packages/react-components/react-image/src/components/Image/useImage.ts b/packages/react-components/react-image/src/components/Image/useImage.ts
index 1339c180a6096c..048cd92a49e435 100644
--- a/packages/react-components/react-image/src/components/Image/useImage.ts
+++ b/packages/react-components/react-image/src/components/Image/useImage.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { ImageProps, ImageState } from './Image.types';
 
 /**
@@ -18,7 +18,7 @@ export const useImage_unstable = (props: ImageProps, ref: React.Ref<HTMLImageEle
       root: 'img',
     },
     root: slot.always(
-      getNativeElementProps<ImageProps>('img', {
+      getIntrinsicElementProps('img', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-text/src/components/Text/useText.ts b/packages/react-components/react-text/src/components/Text/useText.ts
index 16cf5b256a37bc..ef98ea37224d7b 100644
--- a/packages/react-components/react-text/src/components/Text/useText.ts
+++ b/packages/react-components/react-text/src/components/Text/useText.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { TextProps, TextState } from './Text.types';
 
 /**
@@ -13,7 +13,6 @@ import type { TextProps, TextState } from './Text.types';
  */
 export const useText_unstable = (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 = {
     align: align ?? 'start',
@@ -30,10 +29,12 @@ export const useText_unstable = (props: TextProps, ref: React.Ref<HTMLElement>):
     components: { root: 'span' },
 
     root: slot.always(
-      getNativeElementProps(as, {
-        ref,
+      getIntrinsicElementProps('span', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLHeadingElement & HTMLPreElement`
+        // 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<HTMLHeadingElement & HTMLPreElement>,
         ...props,
-        as,
       }),
       { elementType: 'span' },
     ),