diff --git a/change/@fluentui-react-accordion-da96054b-7136-42a7-ac6d-414fea0b6b65.json b/change/@fluentui-react-accordion-da96054b-7136-42a7-ac6d-414fea0b6b65.json
new file mode 100644
index 00000000000000..07ccbe7400fd92
--- /dev/null
+++ b/change/@fluentui-react-accordion-da96054b-7136-42a7-ac6d-414fea0b6b65.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-accordion",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-4ba7a74c-8fd9-44bb-842a-1dd69086c3ce.json b/change/@fluentui-react-avatar-4ba7a74c-8fd9-44bb-842a-1dd69086c3ce.json
new file mode 100644
index 00000000000000..5b6935396b7bc5
--- /dev/null
+++ b/change/@fluentui-react-avatar-4ba7a74c-8fd9-44bb-842a-1dd69086c3ce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-avatar",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-d6fb089f-2386-424d-8ce1-027679d56a71.json b/change/@fluentui-react-badge-d6fb089f-2386-424d-8ce1-027679d56a71.json
new file mode 100644
index 00000000000000..5d2e0eb3e0daa1
--- /dev/null
+++ b/change/@fluentui-react-badge-d6fb089f-2386-424d-8ce1-027679d56a71.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-badge",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-button-135115d3-b8e1-4480-b943-58134a7abc7e.json b/change/@fluentui-react-button-135115d3-b8e1-4480-b943-58134a7abc7e.json
new file mode 100644
index 00000000000000..c5e15014270adc
--- /dev/null
+++ b/change/@fluentui-react-button-135115d3-b8e1-4480-b943-58134a7abc7e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-button",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-combobox-e9f8e327-18b2-47c7-b98b-ba6b97f6c49a.json b/change/@fluentui-react-combobox-e9f8e327-18b2-47c7-b98b-ba6b97f6c49a.json
new file mode 100644
index 00000000000000..daeb74c394e947
--- /dev/null
+++ b/change/@fluentui-react-combobox-e9f8e327-18b2-47c7-b98b-ba6b97f6c49a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-combobox",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-3c54f6d9-b3ba-440e-857b-c8a98694f6b0.json b/change/@fluentui-react-divider-3c54f6d9-b3ba-440e-857b-c8a98694f6b0.json
new file mode 100644
index 00000000000000..0d342d365a9303
--- /dev/null
+++ b/change/@fluentui-react-divider-3c54f6d9-b3ba-440e-857b-c8a98694f6b0.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-divider",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-field-dfb42534-33af-44e2-8b87-45c79ff3f2ea.json b/change/@fluentui-react-field-dfb42534-33af-44e2-8b87-45c79ff3f2ea.json
new file mode 100644
index 00000000000000..3ae01d44541364
--- /dev/null
+++ b/change/@fluentui-react-field-dfb42534-33af-44e2-8b87-45c79ff3f2ea.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-field",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-infobutton-f34028f8-860a-4867-a737-9b01cd3ebd32.json b/change/@fluentui-react-infobutton-f34028f8-860a-4867-a737-9b01cd3ebd32.json
new file mode 100644
index 00000000000000..040b4d9668aec8
--- /dev/null
+++ b/change/@fluentui-react-infobutton-f34028f8-860a-4867-a737-9b01cd3ebd32.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-infobutton",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-c4aabe5a-88e4-4190-8dd7-c53dbcee2a12.json b/change/@fluentui-react-label-c4aabe5a-88e4-4190-8dd7-c53dbcee2a12.json
new file mode 100644
index 00000000000000..32bc86abf8893c
--- /dev/null
+++ b/change/@fluentui-react-label-c4aabe5a-88e4-4190-8dd7-c53dbcee2a12.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-label",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-dff9f9ba-59f5-49e9-a035-2aaf6b0094a6.json b/change/@fluentui-react-link-dff9f9ba-59f5-49e9-a035-2aaf6b0094a6.json
new file mode 100644
index 00000000000000..710f649a1cf41c
--- /dev/null
+++ b/change/@fluentui-react-link-dff9f9ba-59f5-49e9-a035-2aaf6b0094a6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-link",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-persona-95cb7b00-21a8-4ad7-bda2-73f1c1a72367.json b/change/@fluentui-react-persona-95cb7b00-21a8-4ad7-bda2-73f1c1a72367.json
new file mode 100644
index 00000000000000..29998adcf5187f
--- /dev/null
+++ b/change/@fluentui-react-persona-95cb7b00-21a8-4ad7-bda2-73f1c1a72367.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-persona",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-progress-035327cf-4f4c-4517-afa1-a772b600b45f.json b/change/@fluentui-react-progress-035327cf-4f4c-4517-afa1-a772b600b45f.json
new file mode 100644
index 00000000000000..6fad65fb4cbf20
--- /dev/null
+++ b/change/@fluentui-react-progress-035327cf-4f4c-4517-afa1-a772b600b45f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-progress",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-28fde45f-831b-4515-8b37-74d2f84083fd.json b/change/@fluentui-react-radio-28fde45f-831b-4515-8b37-74d2f84083fd.json
new file mode 100644
index 00000000000000..431a757c6bb156
--- /dev/null
+++ b/change/@fluentui-react-radio-28fde45f-831b-4515-8b37-74d2f84083fd.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-radio",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-skeleton-85e30e6f-c1a8-452b-8f4b-07ce412ea7d7.json b/change/@fluentui-react-skeleton-85e30e6f-c1a8-452b-8f4b-07ce412ea7d7.json
new file mode 100644
index 00000000000000..34941379f34b04
--- /dev/null
+++ b/change/@fluentui-react-skeleton-85e30e6f-c1a8-452b-8f4b-07ce412ea7d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-skeleton",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-spinner-ed893b27-4bbc-4df0-8f05-9c930c0b5f5e.json b/change/@fluentui-react-spinner-ed893b27-4bbc-4df0-8f05-9c930c0b5f5e.json
new file mode 100644
index 00000000000000..a4065aab5fb85c
--- /dev/null
+++ b/change/@fluentui-react-spinner-ed893b27-4bbc-4df0-8f05-9c930c0b5f5e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-spinner",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-9716ccb1-4434-4f71-a340-334312d84b0b.json b/change/@fluentui-react-tabs-9716ccb1-4434-4f71-a340-334312d84b0b.json
new file mode 100644
index 00000000000000..44a53bfa28978a
--- /dev/null
+++ b/change/@fluentui-react-tabs-9716ccb1-4434-4f71-a340-334312d84b0b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: migrate from getNativeElementProps to getIntrinsicElementProps",
+  "packageName": "@fluentui/react-tabs",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts
index 62e0724868067a..2c7e70babefc75 100644
--- a/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts
+++ b/packages/react-components/react-accordion/src/components/Accordion/useAccordion.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
 import type { AccordionProps, AccordionState } from './Accordion.types';
 import type { AccordionItemValue } from '../AccordionItem/AccordionItem.types';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
@@ -49,10 +49,13 @@ export const useAccordion_unstable = <Value = AccordionItemValue>(
       root: 'div',
     },
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ...props,
         ...(navigation ? arrowNavigationProps : undefined),
-        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-accordion/src/components/AccordionHeader/useAccordionHeader.tsx b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.tsx
index 753e78776a88dd..dc1e6f14ce82a6 100644
--- a/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.tsx
+++ b/packages/react-components/react-accordion/src/components/AccordionHeader/useAccordionHeader.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, isResolvedShorthand, useEventCallback, slot } from '@fluentui/react-utilities';
 import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
 import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
@@ -16,7 +16,7 @@ export const useAccordionHeader_unstable = (
   props: AccordionHeaderProps,
   ref: React.Ref<HTMLElement>,
 ): AccordionHeaderState => {
-  const { as, icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
+  const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start' } = props;
   const { value, disabled, open } = useAccordionItemContext_unstable();
   const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);
 
@@ -51,8 +51,11 @@ export const useAccordionHeader_unstable = (
       icon: 'div',
     },
     root: slot.always(
-      getNativeElementProps(as || '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-accordion/src/components/AccordionItem/useAccordionItem.ts b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts
index 34d7cb82c6c873..8640a747bba0ef 100644
--- a/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionItem/useAccordionItem.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot, useEventCallback } from '@fluentui/react-utilities';
 import type { AccordionItemProps, AccordionItemState } from './AccordionItem.types';
 import type { AccordionToggleEvent } from '../Accordion/Accordion.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
@@ -27,6 +27,15 @@ export const useAccordionItem_unstable = (
     components: {
       root: 'div',
     },
-    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' },
+    ),
   };
 };
diff --git a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanel.ts b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanel.ts
index 579c66cc319798..12bbd7377a061c 100644
--- a/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanel.ts
+++ b/packages/react-components/react-accordion/src/components/AccordionPanel/useAccordionPanel.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 { useTabsterAttributes } from '@fluentui/react-tabster';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import type { AccordionPanelProps, AccordionPanelState } from './AccordionPanel.types';
@@ -24,8 +24,11 @@ export const useAccordionPanel_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,
         ...(navigation && focusableProps),
       }),
diff --git a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
index f2921b22a911c7..bc95e9080c2945 100644
--- a/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
+++ b/packages/react-components/react-avatar/src/components/Avatar/useAvatar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, mergeCallbacks, useId, slot } from '@fluentui/react-utilities';
 import { getInitials } from '../../utils/index';
 import type { AvatarNamedColor, AvatarProps, AvatarState } from './Avatar.types';
 import { PersonRegular } from '@fluentui/react-icons';
@@ -33,7 +33,7 @@ export const useAvatar_unstable = (props: AvatarProps, ref: React.Ref<HTMLElemen
   const baseId = useId('avatar-');
 
   const root: AvatarState['root'] = slot.always(
-    getNativeElementProps(
+    getIntrinsicElementProps(
       'span',
       {
         role: 'img',
diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx
index ebec9929a772eb..4fcc95a04a5f92 100644
--- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.tsx
+++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroup.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 { AvatarGroupProps, AvatarGroupState } from './AvatarGroup.types';
 
 /**
@@ -15,12 +15,15 @@ export const useAvatarGroup_unstable = (props: AvatarGroupProps, ref: React.Ref<
   const { layout = 'spread', size = defaultAvatarGroupSize } = props;
 
   const root = slot.always(
-    getNativeElementProps(
+    getIntrinsicElementProps(
       'div',
       {
         role: 'group',
         ...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>,
       },
       ['size'],
     ),
diff --git a/packages/react-components/react-badge/src/components/Badge/useBadge.ts b/packages/react-components/react-badge/src/components/Badge/useBadge.ts
index aaa38669bc4bea..2159c9679333d8 100644
--- a/packages/react-components/react-badge/src/components/Badge/useBadge.ts
+++ b/packages/react-components/react-badge/src/components/Badge/useBadge.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 { BadgeProps, BadgeState } from './Badge.types';
 
 /**
@@ -25,8 +25,11 @@ export const useBadge_unstable = (props: BadgeProps, ref: React.Ref<HTMLElement>
       icon: 'span',
     },
     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-button/etc/react-button.api.md b/packages/react-components/react-button/etc/react-button.api.md
index 02c480a808bdcb..2a565c1a7b2060 100644
--- a/packages/react-components/react-button/etc/react-button.api.md
+++ b/packages/react-components/react-button/etc/react-button.api.md
@@ -106,7 +106,7 @@ export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 export const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
 // @public (undocumented)
-export type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
+export type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root' | 'as'> & Omit<MenuButtonProps, 'root' | 'as'>;
 
 // @public (undocumented)
 export type SplitButtonSlots = {
diff --git a/packages/react-components/react-button/src/components/Button/useButton.ts b/packages/react-components/react-button/src/components/Button/useButton.ts
index 6c66d2009382a3..116c0f00e02ac1 100644
--- a/packages/react-components/react-button/src/components/Button/useButton.ts
+++ b/packages/react-components/react-button/src/components/Button/useButton.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';
 import type { ButtonProps, ButtonState } from './Button.types';
 
@@ -36,7 +36,7 @@ export const useButton_unstable = (
     iconOnly: Boolean(iconShorthand?.children && !props.children), // Slots definition
     components: { root: 'button', icon: 'span' },
     root: slot.always(
-      getNativeElementProps(
+      getIntrinsicElementProps(
         as,
         useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {
           required: true,
diff --git a/packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts b/packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts
index 3d28fb6957df9f..6d67668ddef3b2 100644
--- a/packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/SplitButton.types.ts
@@ -21,8 +21,8 @@ export type SplitButtonSlots = {
 };
 
 export type SplitButtonProps = ComponentProps<SplitButtonSlots> &
-  Omit<ButtonProps, 'root'> &
-  Omit<MenuButtonProps, 'root'>;
+  Omit<ButtonProps, 'root' | 'as'> &
+  Omit<MenuButtonProps, 'root' | 'as'>;
 
 export type SplitButtonState = ComponentState<SplitButtonSlots> &
   Omit<ButtonState, 'components' | 'iconOnly' | 'root'> &
diff --git a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts
index e45f39a613e8d1..d554f6de11ee25 100644
--- a/packages/react-components/react-button/src/components/SplitButton/useSplitButton.ts
+++ b/packages/react-components/react-button/src/components/SplitButton/useSplitButton.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 { Button } from '../Button/Button';
 import { MenuButton } from '../MenuButton/MenuButton';
 import type { SplitButtonProps, SplitButtonState } from './SplitButton.types';
@@ -26,7 +26,6 @@ export const useSplitButton_unstable = (
     shape = 'rounded',
     size = 'medium',
   } = props;
-
   const baseId = useId('splitButton-');
 
   const menuButtonShorthand = slot.optional(menuButton, {
@@ -77,7 +76,7 @@ export const useSplitButton_unstable = (
     shape,
     size, // Slots definition
     components: { root: 'div', menuButton: MenuButton, primaryActionButton: Button },
-    root: slot.always(getNativeElementProps('div', { ref, ...props }), { elementType: 'div' }),
+    root: slot.always(getIntrinsicElementProps('div', { ref, ...props }), { elementType: 'div' }),
     menuButton: menuButtonShorthand,
     primaryActionButton: primaryActionButtonShorthand,
   };
diff --git a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
index 72aa8039ec8183..29b77cf5653a00 100644
--- a/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
+++ b/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   mergeCallbacks,
   useEventCallback,
   useMergedRefs,
@@ -94,8 +94,11 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
       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>,
         role: multiselect ? 'menu' : 'listbox',
         'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,
         'aria-multiselectable': multiselect,
diff --git a/packages/react-components/react-combobox/src/components/Option/useOption.tsx b/packages/react-components/react-combobox/src/components/Option/useOption.tsx
index 8b96c3285066f5..36483f64ca3432 100644
--- a/packages/react-components/react-combobox/src/components/Option/useOption.tsx
+++ b/packages/react-components/react-combobox/src/components/Option/useOption.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
 import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
@@ -116,9 +116,12 @@ export const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElemen
       checkIcon: 'span',
     },
     root: slot.always(
-      getNativeElementProps('div', {
-        ref: useMergedRefs(ref, optionRef),
-        'aria-disabled': disabled ? 'true' : undefined,
+      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, optionRef) as React.Ref<HTMLDivElement>,
+        'aria-disabled': disabled ? ('true' as const) : undefined,
         id,
         ...semanticProps,
         ...props,
diff --git a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts
index 68c6d37d47b120..675228c96aadfc 100644
--- a/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts
+++ b/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.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 { OptionGroupProps, OptionGroupState } from './OptionGroup.types';
 
 /**
@@ -21,8 +21,11 @@ export const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<
       label: 'span',
     },
     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: 'group',
         'aria-labelledby': label ? labelId : undefined,
         ...props,
diff --git a/packages/react-components/react-divider/src/components/Divider/useDivider.ts b/packages/react-components/react-divider/src/components/Divider/useDivider.ts
index 124c881e7d69af..4d2ad24d7cc427 100644
--- a/packages/react-components/react-divider/src/components/Divider/useDivider.ts
+++ b/packages/react-components/react-divider/src/components/Divider/useDivider.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 { DividerProps, DividerState } from './Divider.types';
 
 /**
@@ -25,13 +25,16 @@ export const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElem
     },
 
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         role: 'separator',
         'aria-orientation': vertical ? 'vertical' : 'horizontal',
         'aria-labelledby': props.children ? dividerId : undefined,
         ...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>,
+      } as const),
       { elementType: 'div' },
     ),
     wrapper: slot.always(wrapper, {
diff --git a/packages/react-components/react-field/src/components/Field/useField.tsx b/packages/react-components/react-field/src/components/Field/useField.tsx
index bf063d26589587..893be0ad29ae96 100644
--- a/packages/react-components/react-field/src/components/Field/useField.tsx
+++ b/packages/react-components/react-field/src/components/Field/useField.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import type { FieldProps, FieldState } from './Field.types';
 
 const validationMessageIcons = {
@@ -33,7 +33,7 @@ export const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivEleme
   const baseId = useId('field-');
   const generatedControlId = baseId + '__control';
 
-  const root = slot.always(getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {
+  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {
     elementType: 'div',
   });
   const label = slot.optional(props.label, {
diff --git a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
index a8c186b303b516..ddef14e305557c 100644
--- a/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
+++ b/packages/react-components/react-infobutton/src/components/InfoButton/useInfoButton.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DefaultInfoButtonIcon12, DefaultInfoButtonIcon16, DefaultInfoButtonIcon20 } from './DefaultInfoButtonIcons';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   mergeCallbacks,
   useControllableState,
   slot,
@@ -48,12 +48,15 @@ export const useInfoButton_unstable = (props: InfoButtonProps, ref: React.Ref<HT
     },
 
     root: slot.always(
-      getNativeElementProps('button', {
+      getIntrinsicElementProps('button', {
         children: infoButtonIconMap[size],
         type: 'button',
         'aria-label': 'information',
         ...props,
-        ref,
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
+        // 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<HTMLButtonElement>,
       }),
       { elementType: 'button' },
     ),
diff --git a/packages/react-components/react-label/src/components/Label/useLabel.tsx b/packages/react-components/react-label/src/components/Label/useLabel.tsx
index ad506dc16f3acf..55ef0ba1f6c6f7 100644
--- a/packages/react-components/react-label/src/components/Label/useLabel.tsx
+++ b/packages/react-components/react-label/src/components/Label/useLabel.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 { LabelProps, LabelState } from './Label.types';
 
 /**
@@ -22,6 +22,15 @@ export const useLabel_unstable = (props: LabelProps, ref: React.Ref<HTMLElement>
     weight,
     size,
     components: { root: 'label', required: 'span' },
-    root: slot.always(getNativeElementProps('label', { ref, ...props }), { elementType: 'label' }),
+    root: slot.always(
+      getIntrinsicElementProps('label', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLLabelElement`
+        // 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<HTMLLabelElement>,
+        ...props,
+      }),
+      { elementType: 'label' },
+    ),
   };
 };
diff --git a/packages/react-components/react-link/src/components/Link/useLink.ts b/packages/react-components/react-link/src/components/Link/useLink.ts
index 2548a7d2f04d0d..e85a020eaca6a7 100644
--- a/packages/react-components/react-link/src/components/Link/useLink.ts
+++ b/packages/react-components/react-link/src/components/Link/useLink.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 { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useLinkState_unstable } from './useLinkState';
 import type { LinkProps, LinkState } from './Link.types';
@@ -15,8 +15,11 @@ export const useLink_unstable = (
 ): LinkState => {
   const backgroundAppearance = useBackgroundAppearance();
   const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
-  const as = props.as || (props.href ? 'a' : 'button');
-  const type = as === 'button' ? 'button' : undefined;
+
+  const elementType = props.as || (props.href ? 'a' : 'button');
+
+  // Casting is required here as `as` prop would break the union between `a` and `button` types
+  const propsWithAssignedAs = { ...props, as: elementType } as LinkProps;
 
   const state: LinkState = {
     // Props passed at the top-level
@@ -27,17 +30,16 @@ export const useLink_unstable = (
 
     // Slots definition
     components: {
-      root: 'a',
+      root: elementType,
     },
 
     root: slot.always(
-      getNativeElementProps(as, {
+      getIntrinsicElementProps<LinkProps>(elementType, {
         ref,
-        type,
-        ...props,
-        as,
-      }),
-      { elementType: 'a' },
+        type: elementType === 'button' ? 'button' : undefined,
+        ...propsWithAssignedAs,
+      } as const),
+      { elementType },
     ),
     backgroundAppearance,
   };
diff --git a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
index e9e3dcd14a7b8e..fd0bf8cd8c8c80 100644
--- a/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
+++ b/packages/react-components/react-nav-preview/etc/react-nav-preview.api.md
@@ -72,13 +72,13 @@ export const renderNavLink_unstable: (state: NavLinkState) => JSX.Element;
 export const renderNavLinkGroup_unstable: (state: NavLinkGroupState) => JSX.Element;
 
 // @public
-export const useNav_unstable: (props: NavProps, ref: React_2.Ref<HTMLElement>) => NavState;
+export const useNav_unstable: (props: NavProps, ref: React_2.Ref<HTMLDivElement>) => NavState;
 
 // @public
-export const useNavLink_unstable: (props: NavLinkProps, ref: React_2.Ref<HTMLElement>) => NavLinkState;
+export const useNavLink_unstable: (props: NavLinkProps, ref: React_2.Ref<HTMLDivElement>) => NavLinkState;
 
 // @public
-export const useNavLinkGroup_unstable: (props: NavLinkGroupProps, ref: React_2.Ref<HTMLElement>) => NavLinkGroupState;
+export const useNavLinkGroup_unstable: (props: NavLinkGroupProps, ref: React_2.Ref<HTMLDivElement>) => NavLinkGroupState;
 
 // @public
 export const useNavLinkGroupStyles_unstable: (state: NavLinkGroupState) => NavLinkGroupState;
diff --git a/packages/react-components/react-nav-preview/src/components/Nav/useNav.ts b/packages/react-components/react-nav-preview/src/components/Nav/useNav.ts
index ef2eb8bd50afa9..976d0357631778 100644
--- a/packages/react-components/react-nav-preview/src/components/Nav/useNav.ts
+++ b/packages/react-components/react-nav-preview/src/components/Nav/useNav.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 { NavProps, NavState } from './Nav.types';
 
 /**
@@ -11,7 +11,7 @@ import type { NavProps, NavState } from './Nav.types';
  * @param props - props from this instance of Nav
  * @param ref - reference to root HTMLElement of Nav
  */
-export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLElement>): NavState => {
+export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLDivElement>): NavState => {
   return {
     // TODO add appropriate props/defaults
     components: {
@@ -21,7 +21,7 @@ export const useNav_unstable = (props: NavProps, ref: React.Ref<HTMLElement>): N
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-nav-preview/src/components/NavLink/useNavLink.ts b/packages/react-components/react-nav-preview/src/components/NavLink/useNavLink.ts
index a1d8256b8f13b0..ee871b2a087597 100644
--- a/packages/react-components/react-nav-preview/src/components/NavLink/useNavLink.ts
+++ b/packages/react-components/react-nav-preview/src/components/NavLink/useNavLink.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps } from '@fluentui/react-utilities';
 import type { NavLinkProps, NavLinkState } from './NavLink.types';
 
 /**
@@ -11,7 +11,7 @@ import type { NavLinkProps, NavLinkState } from './NavLink.types';
  * @param props - props from this instance of NavLink
  * @param ref - reference to root HTMLElement of NavLink
  */
-export const useNavLink_unstable = (props: NavLinkProps, ref: React.Ref<HTMLElement>): NavLinkState => {
+export const useNavLink_unstable = (props: NavLinkProps, ref: React.Ref<HTMLDivElement>): NavLinkState => {
   return {
     // TODO add appropriate props/defaults
     components: {
@@ -20,7 +20,7 @@ export const useNavLink_unstable = (props: NavLinkProps, ref: React.Ref<HTMLElem
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
+    root: getIntrinsicElementProps('div', {
       ref,
       ...props,
     }),
diff --git a/packages/react-components/react-nav-preview/src/components/NavLinkGroup/useNavLinkGroup.ts b/packages/react-components/react-nav-preview/src/components/NavLinkGroup/useNavLinkGroup.ts
index 7ea6cc770ff88c..3f6497440a6f2c 100644
--- a/packages/react-components/react-nav-preview/src/components/NavLinkGroup/useNavLinkGroup.ts
+++ b/packages/react-components/react-nav-preview/src/components/NavLinkGroup/useNavLinkGroup.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps } from '@fluentui/react-utilities';
 import type { NavLinkGroupProps, NavLinkGroupState } from './NavLinkGroup.types';
 
 /**
@@ -11,7 +11,10 @@ import type { NavLinkGroupProps, NavLinkGroupState } from './NavLinkGroup.types'
  * @param props - props from this instance of NavLinkGroup
  * @param ref - reference to root HTMLElement of NavLinkGroup
  */
-export const useNavLinkGroup_unstable = (props: NavLinkGroupProps, ref: React.Ref<HTMLElement>): NavLinkGroupState => {
+export const useNavLinkGroup_unstable = (
+  props: NavLinkGroupProps,
+  ref: React.Ref<HTMLDivElement>,
+): NavLinkGroupState => {
   return {
     // TODO add appropriate props/defaults
     components: {
@@ -20,7 +23,7 @@ export const useNavLinkGroup_unstable = (props: NavLinkGroupProps, ref: React.Re
     },
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
-    root: getNativeElementProps('div', {
+    root: getIntrinsicElementProps('div', {
       ref,
       ...props,
     }),
diff --git a/packages/react-components/react-persona/src/components/Persona/usePersona.ts b/packages/react-components/react-persona/src/components/Persona/usePersona.ts
index b252f733ed2f68..48038eaab3a95d 100644
--- a/packages/react-components/react-persona/src/components/Persona/usePersona.ts
+++ b/packages/react-components/react-persona/src/components/Persona/usePersona.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Avatar } from '@fluentui/react-avatar';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import type { PersonaProps, PersonaState } from './Persona.types';
 
@@ -44,11 +44,14 @@ export const usePersona_unstable = (props: PersonaProps, ref: React.Ref<HTMLElem
     },
 
     root: slot.always(
-      getNativeElementProps(
+      getIntrinsicElementProps(
         'div',
         {
           ...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>,
         },
         /* excludedPropNames */ ['name'],
       ),
diff --git a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx
index 7de8f042cafdeb..4d073e878be779 100644
--- a/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx
+++ b/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useFieldContext_unstable } from '@fluentui/react-field';
-import { getNativeElementProps, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { clampValue, clampMax } from '../../utils/index';
 import type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';
 
@@ -26,8 +26,11 @@ export const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<
   const value = clampValue(props.value, max);
 
   const 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: 'progressbar',
       'aria-valuemin': value !== undefined ? 0 : undefined,
       'aria-valuemax': value !== undefined ? max : undefined,
diff --git a/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts b/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts
index fbdea29edf870c..df32ad3c053dae 100644
--- a/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts
+++ b/packages/react-components/react-radio/src/components/RadioGroup/useRadioGroup.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { getNativeElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, isHTMLElement, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 import { RadioGroupProps, RadioGroupState } from './RadioGroup.types';
 
 /**
@@ -33,7 +33,7 @@ export const useRadioGroup_unstable = (props: RadioGroupProps, ref: React.Ref<HT
     root: {
       ref,
       role: 'radiogroup',
-      ...slot.always(getNativeElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {
+      ...slot.always(getIntrinsicElementProps('div', props, /*excludedPropNames:*/ ['onChange', 'name']), {
         elementType: 'div',
       }),
       onChange: useEventCallback(ev => {
diff --git a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
index d33c654ded7847..5f5ad91ae201f8 100644
--- a/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
+++ b/packages/react-components/react-rating-preview/etc/react-rating-preview.api.md
@@ -32,7 +32,7 @@ export type RatingState = ComponentState<RatingSlots>;
 export const renderRating_unstable: (state: RatingState) => JSX.Element;
 
 // @public
-export const useRating_unstable: (props: RatingProps, ref: React_2.Ref<HTMLElement>) => RatingState;
+export const useRating_unstable: (props: RatingProps, ref: React_2.Ref<HTMLDivElement>) => RatingState;
 
 // @public
 export const useRatingStyles_unstable: (state: RatingState) => RatingState;
diff --git a/packages/react-components/react-rating-preview/src/components/Rating/useRating.ts b/packages/react-components/react-rating-preview/src/components/Rating/useRating.ts
index 01a62a85e2ad03..8892897180a77b 100644
--- a/packages/react-components/react-rating-preview/src/components/Rating/useRating.ts
+++ b/packages/react-components/react-rating-preview/src/components/Rating/useRating.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 { RatingProps, RatingState } from './Rating.types';
 
 /**
@@ -11,7 +11,7 @@ import type { RatingProps, RatingState } from './Rating.types';
  * @param props - props from this instance of Rating
  * @param ref - reference to root HTMLElement of Rating
  */
-export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLElement>): RatingState => {
+export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLDivElement>): RatingState => {
   return {
     // TODO add appropriate props/defaults
     components: {
@@ -21,7 +21,7 @@ export const useRating_unstable = (props: RatingProps, ref: React.Ref<HTMLElemen
     // TODO add appropriate slots, for example:
     // mySlot: resolveShorthand(props.mySlot),
     root: slot.always(
-      getNativeElementProps('div', {
+      getIntrinsicElementProps('div', {
         ref,
         ...props,
       }),
diff --git a/packages/react-components/react-skeleton/src/components/Skeleton/useSkeleton.ts b/packages/react-components/react-skeleton/src/components/Skeleton/useSkeleton.ts
index 1c020c68dbbe7e..1605960d3342d6 100644
--- a/packages/react-components/react-skeleton/src/components/Skeleton/useSkeleton.ts
+++ b/packages/react-components/react-skeleton/src/components/Skeleton/useSkeleton.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 { SkeletonProps, SkeletonState } from './Skeleton.types';
 import { useSkeletonContext } from '../../contexts/SkeletonContext';
 
@@ -17,8 +17,11 @@ export const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLEl
   const { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque' } = props;
 
   const 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: 'progressbar',
       'aria-busy': true,
       'aria-label': 'Loading Content',
diff --git a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItem.tsx b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItem.tsx
index b60c82c6c6e8e9..bc180f6a5683c4 100644
--- a/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItem.tsx
+++ b/packages/react-components/react-skeleton/src/components/SkeletonItem/useSkeletonItem.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 { useSkeletonContext } from '../../contexts/SkeletonContext';
 import type { SkeletonItemProps, SkeletonItemState } from './SkeletonItem.types';
 
@@ -22,8 +22,11 @@ export const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Re
   } = props;
 
   const 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-spinner/src/components/Spinner/useSpinner.tsx b/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx
index 25326db6932339..7d989adda61d36 100644
--- a/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx
+++ b/packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';
 import type { SpinnerProps, SpinnerState } from './Spinner.types';
 import { Label } from '@fluentui/react-label';
 import { DefaultSvg } from './DefaultSvg';
@@ -21,9 +21,23 @@ export const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElem
   const baseId = useId('spinner');
 
   const { role = 'progressbar', tabIndex, ...rest } = props;
-  const nativeRoot = slot.always(getNativeElementProps('div', { ref, role, ...rest }, ['size']), {
-    elementType: 'div',
-  });
+  const nativeRoot = 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>,
+        role,
+        ...rest,
+      },
+      ['size'],
+    ),
+    {
+      elementType: 'div',
+    },
+  );
   const [isVisible, setIsVisible] = React.useState(true);
   const [setDelayTimeout, clearDelayTimeout] = useTimeout();
   React.useEffect(() => {
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/src/components/Tab/useTab.ts
index 2309cb2d81daa1..b3ba6b2eda2296 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTab.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTab.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   mergeCallbacks,
   useEventCallback,
   useMergedRefs,
@@ -56,13 +56,16 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
   return {
     components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },
     root: slot.always(
-      getNativeElementProps('button', {
-        ref: useMergedRefs(ref, innerRef),
+      getIntrinsicElementProps('button', {
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`
+        // 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<HTMLButtonElement>,
         role: 'tab',
         type: 'button',
         // aria-selected undefined indicates it is not selectable
         // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected
-        'aria-selected': disabled ? undefined : `${selected}`,
+        'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),
         ...props,
         disabled,
         onClick: onTabClick,
diff --git a/packages/react-components/react-tabs/src/components/TabList/useTabList.ts b/packages/react-components/react-tabs/src/components/TabList/useTabList.ts
index 494481ae4c0a2a..b07ea805adbf1d 100644
--- a/packages/react-components/react-tabs/src/components/TabList/useTabList.ts
+++ b/packages/react-components/react-tabs/src/components/TabList/useTabList.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import {
-  getNativeElementProps,
+  getIntrinsicElementProps,
   useControllableState,
   useEventCallback,
   useMergedRefs,
@@ -83,13 +83,16 @@ export const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElem
       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: 'tablist',
         'aria-orientation': vertical ? 'vertical' : 'horizontal',
         ...focusAttributes,
         ...props,
-      }),
+      } as const),
       { elementType: 'div' },
     ),
     appearance,