diff --git a/change/@fluentui-react-alert-b5f175b0-660c-40e1-877c-946d777ea861.json b/change/@fluentui-react-alert-b5f175b0-660c-40e1-877c-946d777ea861.json
new file mode 100644
index 00000000000000..0bd05569df97f9
--- /dev/null
+++ b/change/@fluentui-react-alert-b5f175b0-660c-40e1-877c-946d777ea861.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-alert",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-dialog-2bff76a3-77cd-42ce-890f-5f9d44ddba7e.json b/change/@fluentui-react-dialog-2bff76a3-77cd-42ce-890f-5f9d44ddba7e.json
new file mode 100644
index 00000000000000..744489c6f5329d
--- /dev/null
+++ b/change/@fluentui-react-dialog-2bff76a3-77cd-42ce-890f-5f9d44ddba7e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-dialog",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-fa5baca7-6264-49f4-8f48-758f28624378.json b/change/@fluentui-react-menu-fa5baca7-6264-49f4-8f48-758f28624378.json
new file mode 100644
index 00000000000000..de74907a22b141
--- /dev/null
+++ b/change/@fluentui-react-menu-fa5baca7-6264-49f4-8f48-758f28624378.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-message-bar-preview-1d43edde-3f43-4e3b-a998-19e77918c3d3.json b/change/@fluentui-react-message-bar-preview-1d43edde-3f43-4e3b-a998-19e77918c3d3.json
new file mode 100644
index 00000000000000..9da13be38d5766
--- /dev/null
+++ b/change/@fluentui-react-message-bar-preview-1d43edde-3f43-4e3b-a998-19e77918c3d3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-message-bar-preview",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-migration-v0-v9-fc8df9a4-aa60-4f93-a66e-7f611757763b.json b/change/@fluentui-react-migration-v0-v9-fc8df9a4-aa60-4f93-a66e-7f611757763b.json
new file mode 100644
index 00000000000000..69814f2157acfd
--- /dev/null
+++ b/change/@fluentui-react-migration-v0-v9-fc8df9a4-aa60-4f93-a66e-7f611757763b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-migration-v0-v9",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-820c0f25-dfe6-495a-a03a-25eb7cac17bd.json b/change/@fluentui-react-popover-820c0f25-dfe6-495a-a03a-25eb7cac17bd.json
new file mode 100644
index 00000000000000..4497cde7196d3b
--- /dev/null
+++ b/change/@fluentui-react-popover-820c0f25-dfe6-495a-a03a-25eb7cac17bd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-popover",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-b41a5c1b-b2f4-4358-83b5-261268772597.json b/change/@fluentui-react-provider-b41a5c1b-b2f4-4358-83b5-261268772597.json
new file mode 100644
index 00000000000000..3f7cb0f4fa3fd7
--- /dev/null
+++ b/change/@fluentui-react-provider-b41a5c1b-b2f4-4358-83b5-261268772597.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-provider",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-table-447c32b8-7731-4fda-b176-b0c9b09e19bc.json b/change/@fluentui-react-table-447c32b8-7731-4fda-b176-b0c9b09e19bc.json
new file mode 100644
index 00000000000000..1289e0750fdbcc
--- /dev/null
+++ b/change/@fluentui-react-table-447c32b8-7731-4fda-b176-b0c9b09e19bc.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-table",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tags-739e9037-f678-49d1-a096-c1dbe688c169.json b/change/@fluentui-react-tags-739e9037-f678-49d1-a096-c1dbe688c169.json
new file mode 100644
index 00000000000000..c1c4e1cb631d2e
--- /dev/null
+++ b/change/@fluentui-react-tags-739e9037-f678-49d1-a096-c1dbe688c169.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-tags",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toast-b3f8099f-0f96-47a1-8fee-a825d6b6421e.json b/change/@fluentui-react-toast-b3f8099f-0f96-47a1-8fee-a825d6b6421e.json
new file mode 100644
index 00000000000000..ef2877b82e5e27
--- /dev/null
+++ b/change/@fluentui-react-toast-b3f8099f-0f96-47a1-8fee-a825d6b6421e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-toast",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-toolbar-31f959e1-9905-4586-a43b-7bcb57bd05e6.json b/change/@fluentui-react-toolbar-31f959e1-9905-4586-a43b-7bcb57bd05e6.json
new file mode 100644
index 00000000000000..3b644cb30bce72
--- /dev/null
+++ b/change/@fluentui-react-toolbar-31f959e1-9905-4586-a43b-7bcb57bd05e6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-toolbar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tree-4d836dca-3706-48a2-8eb1-22da9a2a82f3.json b/change/@fluentui-react-tree-4d836dca-3706-48a2-8eb1-22da9a2a82f3.json
new file mode 100644
index 00000000000000..374c85118df316
--- /dev/null
+++ b/change/@fluentui-react-tree-4d836dca-3706-48a2-8eb1-22da9a2a82f3.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-tree",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx b/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
index e8f558ab75bce8..07fbd8b6d1f9f5 100644
--- a/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
+++ b/packages/react-components/react-alert/src/components/Alert/useAlert.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
 import { Button } from '@fluentui/react-button';
 import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 import type { AlertProps, AlertState } from './Alert.types';
 
@@ -57,8 +57,11 @@ export const useAlert_unstable = (props: AlertProps, ref: React.Ref<HTMLElement>
     icon,
     intent,
     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>,
         role: defaultRole,
         children: props.children,
         ...props,
diff --git a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts
index 6245322e1ec324..8433dbc7091649 100644
--- a/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts
+++ b/packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.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 { DialogActionsProps, DialogActionsState } from './DialogActions.types';
 
 /**
@@ -21,8 +21,11 @@ export const useDialogActions_unstable = (
       root: '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-dialog/src/components/DialogBody/useDialogBody.ts b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts
index cdea33091a171d..b2ff6ffdfa43d2 100644
--- a/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts
+++ b/packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.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 { DialogBodyProps, DialogBodyState } from './DialogBody.types';
 
 /**
@@ -17,8 +17,11 @@ export const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HT
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
-        ref,
+      getIntrinsicElementProps(props.as ?? '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-dialog/src/components/DialogContent/useDialogContent.ts b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts
index 602b0997b72861..99539325727fc7 100644
--- a/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts
+++ b/packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.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 { DialogContentProps, DialogContentState } from './DialogContent.types';
 
 /**
@@ -20,8 +20,11 @@ export const useDialogContent_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
-        ref,
+      getIntrinsicElementProps(props.as ?? '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-dialog/src/components/DialogSurface/useDialogSurface.ts b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts
index 9cd9f3b35863e5..15c134f07b0c2d 100644
--- a/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts
+++ b/packages/react-components/react-dialog/src/components/DialogSurface/useDialogSurface.ts
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
   useEventCallback,
   useMergedRefs,
   isResolvedShorthand,
   slot,
+  getIntrinsicElementProps,
 } from '@fluentui/react-utilities';
 import type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';
 import { useDialogContext_unstable } from '../../contexts';
@@ -73,7 +73,7 @@ export const useDialogSurface_unstable = (
     backdrop,
     mountNode: props.mountNode,
     root: slot.always(
-      getNativeElementProps(props.as ?? 'div', {
+      getIntrinsicElementProps('div', {
         tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150
         'aria-modal': modalType !== 'non-modal',
         role: modalType === 'alert' ? 'alertdialog' : 'dialog',
@@ -81,7 +81,10 @@ export const useDialogSurface_unstable = (
         ...props,
         ...modalAttributes,
         onKeyDown: handleKeyDown,
-        ref: useMergedRefs(ref, dialogRef),
+        // FIXME:
+        // `DialogSurfaceElement` 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: useMergedRefs(ref, dialogRef) as React.Ref<HTMLDivElement>,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx
index 1556733a2c6f38..0bb27435e6449d 100644
--- a/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.tsx
+++ b/packages/react-components/react-dialog/src/components/DialogTitle/useDialogTitle.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 { DialogTitleProps, DialogTitleState } from './DialogTitle.types';
 import { useDialogContext_unstable } from '../../contexts/dialogContext';
 import { Dismiss20Regular } from '@fluentui/react-icons';
@@ -16,7 +16,7 @@ import { useDialogTitleInternalStyles } from './useDialogTitleStyles.styles';
  * @param ref - reference to root HTMLElement of DialogTitle
  */
 export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<HTMLDivElement>): DialogTitleState => {
-  const { as, action } = props;
+  const { action } = props;
   const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const internalStyles = useDialogTitleInternalStyles();
 
@@ -26,7 +26,7 @@ export const useDialogTitle_unstable = (props: DialogTitleProps, ref: React.Ref<
       action: 'div',
     },
     root: slot.always(
-      getNativeElementProps(as ?? 'h2', {
+      getIntrinsicElementProps('h2', {
         ref,
         id: useDialogContext_unstable(ctx => ctx.dialogTitleId),
         ...props,
diff --git a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts
index 5a385e7b4aa3a6..557d0b049e322a 100644
--- a/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts
+++ b/packages/react-components/react-menu/src/components/MenuDivider/useMenuDivider.ts
@@ -1,4 +1,4 @@
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import type { MenuDividerProps, MenuDividerState } from './MenuDivider.types';
 
@@ -11,11 +11,14 @@ export const useMenuDivider_unstable = (props: MenuDividerProps, ref: React.Ref<
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         role: 'presentation',
         'aria-hidden': true,
         ...props,
-        ref,
+        // 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>,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts
index e77a0216f5a281..2283dd76545bd4 100644
--- a/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroup/useMenuGroup.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 { MenuGroupProps, MenuGroupState } from './MenuGroup.types';
 
 /**
@@ -13,8 +13,11 @@ export function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTML
       root: '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>,
         'aria-labelledby': headerId,
         role: 'group',
         ...props,
diff --git a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
index 06d51cccc29348..b3f4a91f580c7f 100644
--- a/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
+++ b/packages/react-components/react-menu/src/components/MenuGroupHeader/useMenuGroupHeader.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMenuGroupContext_unstable } from '../../contexts/menuGroupContext';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { MenuGroupHeaderProps, MenuGroupHeaderState } from './MenuGroupHeader.types';
 
 /**
@@ -17,8 +17,11 @@ export function useMenuGroupHeader_unstable(
       root: '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>,
         id,
         ...props,
       }),
diff --git a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
index 1d49514529cc85..7794817ba8e39b 100644
--- a/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
+++ b/packages/react-components/react-menu/src/components/MenuItem/useMenuItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, useMergedRefs, getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useEventCallback, useMergedRefs, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext_unstable } from '../../contexts/menuTriggerContext';
@@ -13,7 +13,12 @@ import {
 import { useMenuListContext_unstable } from '../../contexts/menuListContext';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import type { MenuItemProps, MenuItemState } from './MenuItem.types';
-import { ARIAButtonElement, ARIAButtonElementIntersection, useARIAButtonProps } from '@fluentui/react-aria';
+import {
+  ARIAButtonElement,
+  ARIAButtonElementIntersection,
+  ARIAButtonProps,
+  useARIAButtonProps,
+} from '@fluentui/react-aria';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 
 const ChevronRightIcon = bundleIcon(ChevronRightFilled, ChevronRightRegular);
@@ -47,9 +52,9 @@ export const useMenuItem_unstable = (props: MenuItemProps, ref: React.Ref<ARIABu
       secondaryContent: 'span',
     },
     root: slot.always(
-      getNativeElementProps(
+      getIntrinsicElementProps(
         as,
-        useARIAButtonProps(as, {
+        useARIAButtonProps<'div', ARIAButtonProps<'div'>>(as, {
           role: 'menuitem',
           ...props,
           disabled: false,
diff --git a/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts b/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts
index aa346dc2167f2d..94169688f43e0a 100644
--- a/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.ts
+++ b/packages/react-components/react-menu/src/components/MenuItemLink/useMenuItemLink.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 { MenuItemLinkProps, MenuItemLinkState } from './MenuItemLink.types';
 import { useMenuItem_unstable } from '../MenuItem/useMenuItem';
 import { MenuItemProps } from '../MenuItem/MenuItem.types';
@@ -26,7 +26,7 @@ export const useMenuItemLink_unstable = (
       root: 'a',
     },
     root: slot.always(
-      getNativeElementProps('a', {
+      getIntrinsicElementProps('a', {
         ref,
         role: 'menuitem',
         ...props,
diff --git a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
index 69e1185d56677f..1f18e3c1eccb79 100644
--- a/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
+++ b/packages/react-components/react-menu/src/components/MenuList/useMenuList.ts
@@ -3,7 +3,7 @@ import {
   useMergedRefs,
   useEventCallback,
   useControllableState,
-  getNativeElementProps,
+  getIntrinsicElementProps,
   slot,
 } from '@fluentui/react-utilities';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
@@ -110,8 +110,11 @@ export const useMenuList_unstable = (props: MenuListProps, ref: React.Ref<HTMLEl
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, innerRef),
+      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: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         role: 'menu',
         'aria-labelledby': menuContext.triggerId,
         ...focusAttributes,
diff --git a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
index 513684dbdf9de2..b8bcb487bcc08e 100644
--- a/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
+++ b/packages/react-components/react-menu/src/components/MenuPopover/useMenuPopover.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ArrowLeft, Tab, ArrowRight, Escape } from '@fluentui/keyboard-keys';
-import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { MenuPopoverProps, MenuPopoverState } from './MenuPopover.types';
 import { useMenuContext_unstable } from '../../contexts/menuContext';
 import { dispatchMenuEnterEvent } from '../../utils/index';
@@ -61,22 +61,25 @@ export const useMenuPopover_unstable = (props: MenuPopoverProps, ref: React.Ref<
   const mountNode = useMenuContext_unstable(context => context.mountNode);
 
   const rootProps = slot.always(
-    getNativeElementProps('div', {
+    getIntrinsicElementProps('div', {
       role: 'presentation',
       ...restoreFocusSourceAttributes,
       ...props,
-      ref: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef),
+      // 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: useMergedRefs(ref, popoverRef, mouseOverListenerCallbackRef) as React.Ref<HTMLDivElement>,
     }),
     { elementType: 'div' },
   );
   const { onMouseEnter: onMouseEnterOriginal, onKeyDown: onKeyDownOriginal } = rootProps;
-  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLElement>) => {
+  rootProps.onMouseEnter = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {
     if (openOnHover) {
       setOpen(event, { open: true, keyboard: false, type: 'menuPopoverMouseEnter', event });
     }
     onMouseEnterOriginal?.(event);
   });
-  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLElement>) => {
+  rootProps.onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
     const key = event.key;
     if (key === Escape || (isSubmenu && key === CloseArrowKey)) {
       if (open && popoverRef.current?.contains(event.target as HTMLElement)) {
diff --git a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts
index 26281b77077fbf..8605590d3b2b0a 100644
--- a/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts
+++ b/packages/react-components/react-menu/src/components/MenuSplitGroup/useMenuSplitGroup.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import type { MenuSplitGroupProps, MenuSplitGroupState } from './MenuSplitGroup.types';
@@ -55,9 +55,12 @@ export const useMenuSplitGroup_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         role: 'group',
-        ref: useMergedRefs(ref, innerRef),
+        // 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: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         onKeyDown,
         ...props,
       }),
diff --git a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
index 22f1ecdc03c679..cb6bc178a490bd 100644
--- a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
+++ b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
@@ -144,16 +144,16 @@ export const renderMessageBarGroup_unstable: (state: MessageBarGroupState) => JS
 export const renderMessageBarTitle_unstable: (state: MessageBarTitleState) => JSX.Element;
 
 // @public
-export const useMessageBar_unstable: (props: MessageBarProps, ref: React_2.Ref<HTMLElement>) => MessageBarState;
+export const useMessageBar_unstable: (props: MessageBarProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarState;
 
 // @public
-export const useMessageBarActions_unstable: (props: MessageBarActionsProps, ref: React_2.Ref<HTMLElement>) => MessageBarActionsState;
+export const useMessageBarActions_unstable: (props: MessageBarActionsProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarActionsState;
 
 // @public
 export const useMessageBarActionsStyles_unstable: (state: MessageBarActionsState) => MessageBarActionsState;
 
 // @public
-export const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLElement>) => MessageBarBodyState;
+export const useMessageBarBody_unstable: (props: MessageBarBodyProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarBodyState;
 
 // @public
 export const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => MessageBarBodyState;
@@ -162,7 +162,7 @@ export const useMessageBarBodyStyles_unstable: (state: MessageBarBodyState) => M
 export const useMessageBarContext: () => MessageBarContextValue;
 
 // @public
-export const useMessageBarGroup_unstable: (props: MessageBarGroupProps, ref: React_2.Ref<HTMLElement>) => MessageBarGroupState;
+export const useMessageBarGroup_unstable: (props: MessageBarGroupProps, ref: React_2.Ref<HTMLDivElement>) => MessageBarGroupState;
 
 // @public
 export const useMessageBarGroupStyles_unstable: (state: MessageBarGroupState) => MessageBarGroupState;
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
index c5c384369237b3..bfb8df9816fad0 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.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 { useAnnounce_unstable } from '@fluentui/react-shared-contexts';
 import type { MessageBarProps, MessageBarState } from './MessageBar.types';
 import { getIntentIcon } from './getIntentIcon';
@@ -15,7 +15,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
  * @param props - props from this instance of MessageBar
  * @param ref - reference to root HTMLElement of MessageBar
  */
-export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLElement>): MessageBarState => {
+export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
   const { layout = 'auto', intent = 'info', politeness } = props;
   const computedPolitness = politeness ?? intent === 'info' ? 'polite' : 'assertive';
   const autoReflow = layout === 'auto';
@@ -40,7 +40,7 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
       icon: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: useMergedRefs(ref, reflowRef, nodeRef),
         ...props,
       }),
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarActions/useMessageBarActions.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBarActions/useMessageBarActions.ts
index eedcb87dd7ab74..787cd596e807ec 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarActions/useMessageBarActions.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarActions/useMessageBarActions.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 type { MessageBarActionsProps, MessageBarActionsState } from './MessageBarActions.types';
 import { useMessageBarContext } from '../../contexts/messageBarContext';
 
@@ -14,7 +14,7 @@ import { useMessageBarContext } from '../../contexts/messageBarContext';
  */
 export const useMessageBarActions_unstable = (
   props: MessageBarActionsProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): MessageBarActionsState => {
   const { layout = 'singleline', actionsRef } = useMessageBarContext();
   return {
@@ -24,7 +24,7 @@ export const useMessageBarActions_unstable = (
     },
     containerAction: slot.optional(props.containerAction, { renderByDefault: false, elementType: 'div' }),
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: useMergedRefs(ref, actionsRef),
         ...props,
       }),
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarBody/useMessageBarBody.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBarBody/useMessageBarBody.ts
index cb91a13aebe212..411f39c128a05e 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarBody/useMessageBarBody.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarBody/useMessageBarBody.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 type { MessageBarBodyProps, MessageBarBodyState } from './MessageBarBody.types';
 import { useMessageBarContext } from '../../contexts/messageBarContext';
 
@@ -14,7 +14,7 @@ import { useMessageBarContext } from '../../contexts/messageBarContext';
  */
 export const useMessageBarBody_unstable = (
   props: MessageBarBodyProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): MessageBarBodyState => {
   const { bodyRef } = useMessageBarContext();
   return {
@@ -22,7 +22,7 @@ export const useMessageBarBody_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref: useMergedRefs(ref, bodyRef),
         ...props,
       }),
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarGroup/useMessageBarGroup.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBarGroup/useMessageBarGroup.ts
index 6adb9280d95b10..8e2d3d120bab5e 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarGroup/useMessageBarGroup.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarGroup/useMessageBarGroup.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { MessageBarGroupProps, MessageBarGroupState } from './MessageBarGroup.types';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 
 /**
  * Create the state required to render MessageBarGroup.
@@ -13,7 +13,7 @@ import { getNativeElementProps, slot } from '@fluentui/react-utilities';
  */
 export const useMessageBarGroup_unstable = (
   props: MessageBarGroupProps,
-  ref: React.Ref<HTMLElement>,
+  ref: React.Ref<HTMLDivElement>,
 ): MessageBarGroupState => {
   if (process.env.NODE_ENV !== 'production') {
     React.Children.forEach(props.children, c => {
@@ -35,7 +35,7 @@ export const useMessageBarGroup_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts
index 87329b8eba4884..9861811bb1fce9 100644
--- a/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.ts
+++ b/packages/react-components/react-message-bar-preview/src/components/MessageBarTitle/useMessageBarTitle.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 { MessageBarTitleProps, MessageBarTitleState } from './MessageBarTitle.types';
 
 /**
@@ -20,7 +20,7 @@ export const useMessageBarTitle_unstable = (
       root: 'span',
     },
     root: slot.always(
-      getNativeElementProps('span', {
+      getIntrinsicElementProps('span', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-migration-v0-v9/src/components/ItemLayout/ItemLayout.tsx b/packages/react-components/react-migration-v0-v9/src/components/ItemLayout/ItemLayout.tsx
index ec0e1223d64dc9..e71b91c8c096e7 100755
--- a/packages/react-components/react-migration-v0-v9/src/components/ItemLayout/ItemLayout.tsx
+++ b/packages/react-components/react-migration-v0-v9/src/components/ItemLayout/ItemLayout.tsx
@@ -7,7 +7,7 @@ import { mergeClasses } from '@fluentui/react-components';
 import {
   ComponentProps,
   ComponentState,
-  getNativeElementProps,
+  getIntrinsicElementProps,
   Slot,
   slot,
   assertSlots,
@@ -45,7 +45,7 @@ export const ItemLayout = React.forwardRef<HTMLDivElement, ItemLayoutProps>((pro
       startMedia: 'div',
       endMedia: 'div',
     },
-    root: slot.always(getNativeElementProps('div', { ...props, ref }), { elementType: 'div' }),
+    root: slot.always(getIntrinsicElementProps('div', { ...props, ref }), { elementType: 'div' }),
     contentMedia: slot.optional(props.contentMedia, { elementType: 'div' }),
     contentWrapper: slot.optional(props.contentWrapper, { renderByDefault: true, elementType: 'div' }),
     header: slot.optional(props.header, { elementType: 'div' }),
diff --git a/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.tsx b/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.tsx
index a69763885ebeb1..725b4bd44ced7f 100644
--- a/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.tsx
+++ b/packages/react-components/react-migration-v0-v9/src/components/StyledText/StyledText.tsx
@@ -1,5 +1,8 @@
+/** @jsxRuntime automatic */
+/** @jsxImportSource @fluentui/react-jsx-runtime */
+
 import * as React from 'react';
-import { getNativeElementProps, mergeClasses, Slot, ComponentProps } from '@fluentui/react-components';
+import { getIntrinsicElementProps, mergeClasses, Slot, ComponentProps, slot } from '@fluentui/react-components';
 import { useSizeStyles, useStyles, useWeightStyles } from './StyledText.styles';
 
 export type StyledTextSlots = {
@@ -107,7 +110,6 @@ const sizeMap: Record<string, 'base100' | 'base200' | 'base300' | 'base400' | 'b
 export const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((props, ref) => {
   const {
     align,
-    as: Component = 'span',
     atMention,
     disabled,
     error,
@@ -122,39 +124,42 @@ export const StyledText = React.forwardRef<HTMLSpanElement, StyledTextProps>((pr
 
   const dir = typeof props.children === 'string' ? 'auto' : undefined;
 
-  const rootProps = getNativeElementProps(Component, {
-    ref,
-    ...props,
-  });
-
   const sizeStyles = useSizeStyles();
   const weightStyles = useWeightStyles();
   const styles = useStyles();
 
   const size = props.size ? sizeMap[props.size] : props.size;
-  const className = mergeClasses(
-    styledTextClassName,
-    size && sizeStyles[size],
-    weight && weightStyles[weight],
-    wrap === false && styles.nowrap,
-    truncate && styles.truncate,
-    align === 'center' && styles.alignCenter,
-    align === 'end' && styles.alignEnd,
-    align === 'justify' && styles.alignJustify,
-
-    atMention && styles.mention,
-    atMention === 'me' && styles.mentionMe,
-    disabled && styles.disabled,
-    error && styles.error,
-    important && styles.important,
-    success && styles.success,
-    temporary && styles.temporary,
-    timestamp && styles.timestamp,
-
-    props.className,
+
+  const RootSlot = slot.always(
+    getIntrinsicElementProps('span', {
+      ref,
+      ...props,
+      dir,
+      className: mergeClasses(
+        styledTextClassName,
+        size && sizeStyles[size],
+        weight && weightStyles[weight],
+        wrap === false && styles.nowrap,
+        truncate && styles.truncate,
+        align === 'center' && styles.alignCenter,
+        align === 'end' && styles.alignEnd,
+        align === 'justify' && styles.alignJustify,
+
+        atMention && styles.mention,
+        atMention === 'me' && styles.mentionMe,
+        disabled && styles.disabled,
+        error && styles.error,
+        important && styles.important,
+        success && styles.success,
+        temporary && styles.temporary,
+        timestamp && styles.timestamp,
+        props.className,
+      ),
+    }),
+    { elementType: 'span' },
   );
 
-  return <Component dir={dir} {...rootProps} className={className} />;
+  return <RootSlot />;
 });
 
 StyledText.displayName = 'StyledText';
diff --git a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts
index 690121577c0f87..56bbcb3713483a 100644
--- a/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.ts
+++ b/packages/react-components/react-popover/src/components/PopoverSurface/usePopoverSurface.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 { useModalAttributes } from '@fluentui/react-tabster';
 import { usePopoverContext_unstable } from '../../popoverContext';
 import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';
@@ -45,8 +45,11 @@ export const usePopoverSurface_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, contentRef),
+      getIntrinsicElementProps('div', {
+        // FIXME:
+        // `contentRef` 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: useMergedRefs(ref, contentRef) as React.Ref<HTMLDivElement>,
         role: trapFocus ? 'dialog' : 'group',
         'aria-modal': trapFocus ? true : undefined,
         ...modalAttributes,
diff --git a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
index d30535579bbcb5..b41b6cee638181 100644
--- a/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
+++ b/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts
@@ -10,7 +10,7 @@ import type {
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
   ThemeContextValue_unstable as ThemeContextValue,
 } from '@fluentui/react-shared-contexts';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 
 import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
@@ -96,10 +96,13 @@ export const useFluentProvider_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ...props,
         dir,
-        ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),
+        // 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: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,
       }),
       { elementType: 'div' },
     ),
diff --git a/packages/react-components/react-table/src/components/Table/useTable.ts b/packages/react-components/react-table/src/components/Table/useTable.ts
index 6ec157c0b4fa6c..9fe0d006f738a3 100644
--- a/packages/react-components/react-table/src/components/Table/useTable.ts
+++ b/packages/react-components/react-table/src/components/Table/useTable.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 { TableProps, TableState } from './Table.types';
 
 /**
@@ -19,8 +19,11 @@ export const useTable_unstable = (props: TableProps, ref: React.Ref<HTMLElement>
       root: rootComponent,
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref,
+      getIntrinsicElementProps(rootComponent, {
+        // 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>,
         role: rootComponent === 'div' ? 'table' : undefined,
         ...props,
       }),
diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBody.ts b/packages/react-components/react-table/src/components/TableBody/useTableBody.ts
index e020429f42ed67..0f083b743d755d 100644
--- a/packages/react-components/react-table/src/components/TableBody/useTableBody.ts
+++ b/packages/react-components/react-table/src/components/TableBody/useTableBody.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 { TableBodyProps, TableBodyState } from './TableBody.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -21,8 +21,11 @@ export const useTableBody_unstable = (props: TableBodyProps, ref: React.Ref<HTML
       root: rootComponent,
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref,
+      getIntrinsicElementProps(rootComponent, {
+        // 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>,
         role: rootComponent === 'div' ? 'rowgroup' : undefined,
         ...props,
       }),
diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
index 3cf95fcb8e7858..51084611bd991a 100644
--- a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts
+++ b/packages/react-components/react-table/src/components/TableCell/useTableCell.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 { TableCellProps, TableCellState } from './TableCell.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -22,8 +22,11 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref<HTML
       root: rootComponent,
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref,
+      getIntrinsicElementProps(rootComponent, {
+        // 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>,
         role: rootComponent === 'div' ? 'cell' : undefined,
         ...props,
       }),
diff --git a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts
index a43b82189dcfba..059b010435dc67 100644
--- a/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.ts
+++ b/packages/react-components/react-table/src/components/TableCellActions/useTableCellActions.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 { TableCellActionsProps, TableCellActionsState } from './TableCellActions.types';
 
 /**
@@ -20,8 +20,11 @@ export const useTableCellActions_unstable = (
       root: '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-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
index 226e43fb2a26bf..bbf2e096734a5a 100644
--- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts
+++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.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 { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -32,7 +32,16 @@ export const useTableCellLayout_unstable = (
       content: 'div',
       media: 'span',
     },
-    root: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),
+    root: slot.always(
+      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' },
+    ),
     appearance: props.appearance,
     truncate: props.truncate,
     main: slot.optional(props.main, { renderByDefault: true, elementType: 'span' }),
diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts
index c73604ae3f7760..6cdde1118cb93c 100644
--- a/packages/react-components/react-table/src/components/TableHeader/useTableHeader.ts
+++ b/packages/react-components/react-table/src/components/TableHeader/useTableHeader.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 { TableHeaderProps, TableHeaderState } from './TableHeader.types';
 import { useTableContext } from '../../contexts/tableContext';
 
@@ -21,8 +21,11 @@ export const useTableHeader_unstable = (props: TableHeaderProps, ref: React.Ref<
       root: rootComponent,
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref,
+      getIntrinsicElementProps(rootComponent, {
+        // 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>,
         role: rootComponent === 'div' ? 'rowgroup' : undefined,
         ...props,
       }),
diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
index c8f045fa04c015..50cfb40b216861 100644
--- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
+++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCell.tsx
@@ -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 { useFocusWithin } from '@fluentui/react-tabster';
 import { ArrowUpRegular, ArrowDownRegular } from '@fluentui/react-icons';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
@@ -37,12 +37,15 @@ export const useTableHeaderCell_unstable = (
       aside: 'span',
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref: useMergedRefs(ref, useFocusWithin()),
+      getIntrinsicElementProps(rootComponent, {
+        // 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: useMergedRefs(ref, useFocusWithin()) as React.Ref<HTMLDivElement>,
         role: rootComponent === 'div' ? 'columnheader' : undefined,
         'aria-sort': sortable ? props.sortDirection ?? 'none' : undefined,
         ...props,
-      }),
+      } as const),
       { elementType: rootComponent },
     ),
     aside: slot.optional(props.aside, { elementType: 'span' }),
diff --git a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts
index 2730fabdf8829b..bac96203c4bed5 100644
--- a/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts
+++ b/packages/react-components/react-table/src/components/TableResizeHandle/useTableResizeHandle.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import type { TableResizeHandleProps, TableResizeHandleState } from './TableResizeHandle.types';
 
 /**
@@ -24,8 +24,11 @@ export const useTableResizeHandle_unstable = (
       root: '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,
         onClick,
       }),
diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts b/packages/react-components/react-table/src/components/TableRow/useTableRow.ts
index ff2cbb440c93f6..11d81823af20ce 100644
--- a/packages/react-components/react-table/src/components/TableRow/useTableRow.ts
+++ b/packages/react-components/react-table/src/components/TableRow/useTableRow.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 { useFocusVisible, useFocusWithin } from '@fluentui/react-tabster';
 import type { TableRowProps, TableRowState } from './TableRow.types';
 import { useTableContext } from '../../contexts/tableContext';
@@ -26,8 +26,11 @@ export const useTableRow_unstable = (props: TableRowProps, ref: React.Ref<HTMLEl
       root: rootComponent,
     },
     root: slot.always(
-      getNativeElementProps(rootComponent, {
-        ref: useMergedRefs(ref, focusVisibleRef, focusWithinRef),
+      getIntrinsicElementProps(rootComponent, {
+        // 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: useMergedRefs(ref, focusVisibleRef, focusWithinRef) as React.Ref<HTMLDivElement>,
         role: rootComponent === 'div' ? 'row' : undefined,
         ...props,
       }),
diff --git a/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx
index 28737db8e67b0e..736883ebedefe5 100644
--- a/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx
+++ b/packages/react-components/react-tags/src/components/InteractionTag/useInteractionTag.tsx
@@ -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 { InteractionTagProps, InteractionTagState } from './InteractionTag.types';
 import { useTagGroupContext_unstable } from '../../contexts/tagGroupContext';
 
@@ -38,7 +38,7 @@ export const useInteractionTag_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
         id,
diff --git a/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts b/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts
index 71aa1aab5f4809..ea4e693d6ab79b 100644
--- a/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimary.ts
+++ b/packages/react-components/react-tags/src/components/InteractionTagPrimary/useInteractionTagPrimary.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 { InteractionTagPrimaryProps, InteractionTagPrimaryState } from './InteractionTagPrimary.types';
 import { useInteractionTagContext_unstable } from '../../contexts/interactionTagContext';
 
@@ -48,7 +48,7 @@ export const useInteractionTagPrimary_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('button', {
+      getIntrinsicElementProps('button', {
         ref,
         disabled,
         id: interactionTagPrimaryId,
diff --git a/packages/react-components/react-tags/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx b/packages/react-components/react-tags/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
index 25472a0e833148..9cd6de0a565599 100644
--- a/packages/react-components/react-tags/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
+++ b/packages/react-components/react-tags/src/components/InteractionTagSecondary/useInteractionTagSecondary.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, slot, useId } from '@fluentui/react-utilities';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';
 import { DismissRegular } from '@fluentui/react-icons';
 import type { InteractionTagSecondaryProps, InteractionTagSecondaryState } from './InteractionTagSecondary.types';
@@ -47,7 +47,7 @@ export const useInteractionTagSecondary_unstable = (
     },
 
     root: slot.always(
-      getNativeElementProps('button', {
+      getIntrinsicElementProps('button', {
         children: <DismissRegular />,
         type: 'button',
         disabled,
diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
index 52ae8a622532b2..7140fb30830634 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 import { DismissRegular } from '@fluentui/react-icons';
 import type { TagProps, TagState } from './Tag.types';
 import { Delete, Backspace } from '@fluentui/keyboard-keys';
@@ -74,7 +74,7 @@ export const useTag_unstable = (props: TagProps, ref: React.Ref<HTMLSpanElement
     },
 
     root: slot.always(
-      getNativeElementProps(elementType, {
+      getIntrinsicElementProps(elementType, {
         ref,
         ...props,
         id,
diff --git a/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts b/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts
index 6c15ba61dfea3f..d4b72a5546cee0 100644
--- a/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts
+++ b/packages/react-components/react-tags/src/components/TagGroup/useTagGroup.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
 import type { TagGroupProps, TagGroupState } from './TagGroup.types';
 import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -60,8 +60,11 @@ export const useTagGroup_unstable = (props: TagGroupProps, ref: React.Ref<HTMLDi
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, innerRef),
+      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: useMergedRefs(ref, innerRef) as React.Ref<HTMLDivElement>,
         role: 'toolbar',
         ...arrowNavigationProps,
         ...props,
diff --git a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.ts b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.ts
index ed3823045090ab..3ac86939850a83 100644
--- a/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.ts
+++ b/packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.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 { TimePickerProps, TimePickerState } from './TimePicker.types';
 
 /**
@@ -21,8 +21,11 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HT
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
     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-toast/src/components/Toast/useToast.ts b/packages/react-components/react-toast/src/components/Toast/useToast.ts
index e152d7bb0e2264..43f3af33d3a21c 100644
--- a/packages/react-components/react-toast/src/components/Toast/useToast.ts
+++ b/packages/react-components/react-toast/src/components/Toast/useToast.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 { ToastProps, ToastState } from './Toast.types';
 
 /**
@@ -17,8 +17,11 @@ export const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>
       root: '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-toast/src/components/ToastBody/useToastBody.ts b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts
index 787af4b272d41e..9548ac5de972a0 100644
--- a/packages/react-components/react-toast/src/components/ToastBody/useToastBody.ts
+++ b/packages/react-components/react-toast/src/components/ToastBody/useToastBody.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 { ToastBodyProps, ToastBodyState } from './ToastBody.types';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
@@ -23,8 +23,11 @@ export const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTML
     },
     subtitle: slot.optional(props.subtitle, { elementType: '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>,
         id: bodyId,
         ...props,
       }),
diff --git a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
index a049809509e420..87ec095f4c4bbd 100644
--- a/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
+++ b/packages/react-components/react-toast/src/components/ToastContainer/useToastContainer.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   useMergedRefs,
   ExtractSlotProps,
   Slot,
@@ -219,8 +219,11 @@ export const useToastContainer_unstable = (
       { elementType: Timer },
     ),
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, toastRef, toastAnimationRef),
+      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: useMergedRefs(ref, toastRef, toastAnimationRef) as React.Ref<HTMLDivElement>,
         children,
         tabIndex: 0,
         role: 'listitem',
diff --git a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts
index 5c58d825c763d5..f7866ff7c96a82 100644
--- a/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.ts
+++ b/packages/react-components/react-toast/src/components/ToastFooter/useToastFooter.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 { ToastFooterProps, ToastFooterState } from './ToastFooter.types';
 
 /**
@@ -17,8 +17,11 @@ export const useToastFooter_unstable = (props: ToastFooterProps, ref: React.Ref<
       root: '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-toast/src/components/ToastTitle/useToastTitle.tsx b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx
index 641663e22841c2..9804d569e66965 100644
--- a/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx
+++ b/packages/react-components/react-toast/src/components/ToastTitle/useToastTitle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { CheckmarkCircleFilled, DismissCircleFilled, InfoFilled, WarningFilled } from '@fluentui/react-icons';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 
 import type { ToastTitleProps, ToastTitleState } from './ToastTitle.types';
@@ -46,8 +46,11 @@ export const useToastTitle_unstable = (props: ToastTitleProps, ref: React.Ref<HT
       elementType: '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>,
         children: props.children,
         id: titleId,
         ...props,
diff --git a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx
index 7851218f963730..b8aabd7e8baa65 100644
--- a/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx
+++ b/packages/react-components/react-toast/src/components/Toaster/useToaster.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import {
   ExtractSlotProps,
   Slot,
-  getNativeElementProps,
+  getIntrinsicElementProps,
   useEventCallback,
   useMergedRefs,
   slot,
@@ -30,7 +30,9 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => {
   const announce = React.useCallback<Announce>((message, options) => announceRef.current(message, options), []);
   const { dir } = useFluent();
 
-  const rootProps = slot.always(getNativeElementProps('div', rest), { elementType: 'div' });
+  const rootProps = slot.always(getIntrinsicElementProps<ExtractSlotProps<Slot<'div'>>>('div', rest), {
+    elementType: 'div',
+  });
   const focusableGroupAttr = useFocusableGroup({
     tabBehavior: 'limited-trap-focus',
     ignoreDefaultKeydown: { Escape: true },
@@ -45,7 +47,7 @@ export const useToaster_unstable = (props: ToasterProps): ToasterState => {
   const usePositionSlot = (toastPosition: ToastPosition) => {
     const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);
     const { announceToast, toasterRef } = useToastAnnounce(announceProp ?? announce);
-    return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {
+    return slot.optional<ExtractSlotProps<Slot<'div'>>>(toastsToRender.has(toastPosition) ? rootProps : null, {
       defaultProps: {
         ref: useMergedRefs(focusManagementRef, toasterRef),
         children: toastsToRender.get(toastPosition)?.map(toast => (
diff --git a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
index 3f9eb39afd669e..8fc01395fe17ab 100644
--- a/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
+++ b/packages/react-components/react-toolbar/src/components/Toolbar/useToolbar.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEventCallback, useControllableState, getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { useEventCallback, useControllableState, getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import type { ToggableHandler, ToolbarProps, ToolbarState, UninitializedToolbarState } from './Toolbar.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 
@@ -31,10 +31,13 @@ export const useToolbar_unstable = (props: ToolbarProps, ref: React.Ref<HTMLElem
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         role: 'toolbar',
-        ref,
-        ...(vertical && { 'aria-orientation': 'vertical' }),
+        // 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>,
+        ...(vertical && ({ 'aria-orientation': 'vertical' } as const)),
         ...arrowNavigationProps,
         ...props,
       }),
diff --git a/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts b/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts
index 1dddb0c071ca0e..a93d5166447dfa 100644
--- a/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts
+++ b/packages/react-components/react-toolbar/src/components/ToolbarGroup/useToolbarGroup.ts
@@ -1,4 +1,4 @@
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';
 
@@ -16,7 +16,7 @@ export const useToolbarGroup_unstable = (
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {
+      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {
         ref,
         role: 'presentation',
         ...props,
diff --git a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
index 809c963d7a913b..913c1c1aff8225 100644
--- a/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';
 import { elementContains } from '@fluentui/react-portal';
 import type { TreeItemProps, TreeItemState } from './TreeItem.types';
 import { Space } from '@fluentui/keyboard-keys';
@@ -252,7 +252,7 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
     isAsideVisible,
     isActionsVisible,
     root: slot.always(
-      getNativeElementProps(as, {
+      getIntrinsicElementProps(as, {
         tabIndex: -1,
         [dataTreeItemValueAttrName]: value,
         ...rest,
@@ -272,7 +272,7 @@ export function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDi
         onMouseOut: handleActionsInvisible,
         onBlur: handleActionsInvisible,
         onChange: handleChange,
-      }),
+      } as const),
       { elementType: 'div' },
     ),
   };
diff --git a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
index 7b81ad5a2f2988..0d4e8a981281c7 100644
--- a/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
+++ b/packages/react-components/react-tree/src/components/TreeItemLayout/useTreeItemLayout.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {
   ExtractSlotProps,
-  getNativeElementProps,
+  getIntrinsicElementProps,
   isResolvedShorthand,
   useMergedRefs,
   slot,
@@ -26,7 +26,7 @@ export const useTreeItemLayout_unstable = (
   props: TreeItemLayoutProps,
   ref: React.Ref<HTMLElement>,
 ): TreeItemLayoutState => {
-  const { main, iconAfter, iconBefore, as = 'span' } = props;
+  const { main, iconAfter, iconBefore } = props;
 
   const layoutRef = useTreeItemContext_unstable(ctx => ctx.layoutRef);
   const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);
@@ -81,9 +81,18 @@ export const useTreeItemLayout_unstable = (
       selector: (selectionMode === 'multiselect' ? Checkbox : Radio) as React.ElementType<CheckboxProps | RadioProps>,
     },
     buttonContextValue: { size: 'small' },
-    root: slot.always(getNativeElementProps(as, { ...props, ref: useMergedRefs(ref, layoutRef) }), {
-      elementType: 'div',
-    }),
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        ...props,
+        // 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: useMergedRefs(ref, layoutRef) as React.Ref<HTMLDivElement>,
+      }),
+      {
+        elementType: 'div',
+      },
+    ),
     iconBefore: slot.optional(iconBefore, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),
     main: slot.always(main, { elementType: 'div' }),
     iconAfter: slot.optional(iconAfter, { defaultProps: { 'aria-hidden': true }, elementType: 'div' }),
diff --git a/packages/react-components/react-tree/src/hooks/useRootTree.ts b/packages/react-components/react-tree/src/hooks/useRootTree.ts
index 1bc905610109ed..7c19f54240996f 100644
--- a/packages/react-components/react-tree/src/hooks/useRootTree.ts
+++ b/packages/react-components/react-tree/src/hooks/useRootTree.ts
@@ -1,4 +1,4 @@
-import { SelectionMode, getNativeElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { SelectionMode, getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
 import type {
   TreeCheckedChangeData,
   TreeNavigationData_unstable,
@@ -20,20 +20,7 @@ import { createNextOpenItems } from './useControllableOpenItems';
  * @param ref - reference to root HTMLElement of tree
  */
 export function useRootTree(
-  props: Pick<
-    TreeProps,
-    | 'selectionMode'
-    | 'appearance'
-    | 'size'
-    | 'openItems'
-    | 'checkedItems'
-    | 'onOpenChange'
-    | 'onCheckedChange'
-    | 'onNavigation'
-    | 'aria-label'
-    | 'aria-labelledby'
-  >,
-
+  props: TreeProps,
   ref: React.Ref<HTMLElement>,
 ): Omit<TreeState & TreeContextValue, 'treeType'> {
   warnIfNoProperPropsRootTree(props);
@@ -98,8 +85,11 @@ export function useRootTree(
     checkedItems,
     requestTreeResponse,
     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>,
         role: 'tree',
         'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined,
         ...props,
diff --git a/packages/react-components/react-tree/src/hooks/useSubtree.ts b/packages/react-components/react-tree/src/hooks/useSubtree.ts
index d8bbce879a7b94..16c9921603e042 100644
--- a/packages/react-components/react-tree/src/hooks/useSubtree.ts
+++ b/packages/react-components/react-tree/src/hooks/useSubtree.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TreeProps, TreeState } from '../Tree';
 import { SubtreeContextValue, useTreeContext_unstable, useTreeItemContext_unstable } from '../contexts/index';
-import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';
 
 /**
  * Create the state required to render a sub-level tree.
@@ -10,7 +10,7 @@ import { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-util
  * @param ref - reference to root HTMLElement of tree
  */
 export function useSubtree(
-  props: Pick<TreeProps, 'appearance' | 'size'>,
+  props: TreeProps,
   ref: React.Ref<HTMLElement>,
 ): Omit<TreeState & SubtreeContextValue, 'treeType'> {
   const subtreeRef = useTreeItemContext_unstable(ctx => ctx.subtreeRef);
@@ -27,8 +27,11 @@ export function useSubtree(
     },
     level: parentLevel + 1,
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, subtreeRef),
+      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: useMergedRefs(ref, subtreeRef) as React.Ref<HTMLDivElement>,
         role: 'group',
         ...props,
       }),