diff --git a/.changeset/treeview-item-as-prop.md b/.changeset/treeview-item-as-prop.md
new file mode 100644
index 00000000000..66d38f641ef
--- /dev/null
+++ b/.changeset/treeview-item-as-prop.md
@@ -0,0 +1,14 @@
+---
+'@primer/react': minor
+---
+
+Add support for the `as` prop on `TreeView.Item`. This enables rendering the
+treeitem as a different element (e.g. `as="a"` for native anchors, or a custom
+router-link component) while preserving all existing keyboard, focus, and ARIA
+behavior.
+
+When `as` is omitted, the existing markup is unchanged: an `<li>` is rendered
+as the `role="treeitem"` element. When `as` is provided, the polymorphic
+element is rendered as the treeitem and is wrapped in an `<li role="none">`
+so the markup remains valid (a `<ul role="tree">` may only directly contain
+`<li>` elements).
diff --git a/packages/react/src/TreeView/TreeView.docs.json b/packages/react/src/TreeView/TreeView.docs.json
index bb91a06ab37..fcef9f6d8af 100644
--- a/packages/react/src/TreeView/TreeView.docs.json
+++ b/packages/react/src/TreeView/TreeView.docs.json
@@ -137,6 +137,12 @@
         {
           "name": "ref",
           "type": "React.Ref<HTMLElement>"
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "'li'",
+          "description": "The element type to render the tree item as. When set to a different element type or component, the polymorphic element is rendered with `role=\"treeitem\"` and is wrapped in an `li` element with `role=\"none\"` so the markup remains valid inside a `ul` with `role=\"tree\"`."
         }
       ]
     },
@@ -226,4 +232,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/react/src/TreeView/TreeView.features.stories.tsx b/packages/react/src/TreeView/TreeView.features.stories.tsx
index f3b390d54a4..b8555bab842 100644
--- a/packages/react/src/TreeView/TreeView.features.stories.tsx
+++ b/packages/react/src/TreeView/TreeView.features.stories.tsx
@@ -1101,4 +1101,47 @@ export const MultilineItems: StoryFn = () => (
   </nav>
 )
 
+const CustomRouterLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement> & {to: string}
+>(({to, children, ...props}, ref) => (
+  <a ref={ref} href={to} data-custom-link {...props}>
+    {children}
+  </a>
+))
+CustomRouterLink.displayName = 'CustomRouterLink'
+
+export const AsProp: StoryFn = () => (
+  <nav aria-label="Docs">
+    <TreeView aria-label="Docs">
+      <TreeView.Item id="overview" as="a" href="#overview">
+        <TreeView.LeadingVisual>
+          <FileIcon />
+        </TreeView.LeadingVisual>
+        Overview (native anchor)
+      </TreeView.Item>
+      <TreeView.Item id="guides" defaultExpanded>
+        <TreeView.LeadingVisual>
+          <TreeView.DirectoryIcon />
+        </TreeView.LeadingVisual>
+        Guides
+        <TreeView.SubTree>
+          <TreeView.Item id="guides/install" as={CustomRouterLink} to="/guides/install">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            Install (router link)
+          </TreeView.Item>
+          <TreeView.Item id="guides/setup" as={CustomRouterLink} to="/guides/setup">
+            <TreeView.LeadingVisual>
+              <FileIcon />
+            </TreeView.LeadingVisual>
+            Setup (router link)
+          </TreeView.Item>
+        </TreeView.SubTree>
+      </TreeView.Item>
+    </TreeView>
+  </nav>
+)
+
 export default meta
diff --git a/packages/react/src/TreeView/TreeView.test.tsx b/packages/react/src/TreeView/TreeView.test.tsx
index d52cfb7f76c..139fe132346 100644
--- a/packages/react/src/TreeView/TreeView.test.tsx
+++ b/packages/react/src/TreeView/TreeView.test.tsx
@@ -369,6 +369,134 @@ describe('Markup', () => {
     })
     expect(item1).toHaveFocus()
   })
+
+  describe('as prop', () => {
+    it('renders as an `li` by default', () => {
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item id="item-1">Item 1</TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      expect(item.tagName).toBe('LI')
+    })
+
+    it('renders as the element specified by `as`', () => {
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="a" href="#item-1" id="item-1">
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      expect(item.tagName).toBe('A')
+      expect(item).toHaveAttribute('href', '#item-1')
+    })
+
+    it('wraps the polymorphic element in an `li role="none"` to keep markup valid', () => {
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="a" href="#item-1" id="item-1">
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      const wrapper = item.parentElement
+      expect(wrapper?.tagName).toBe('LI')
+      expect(wrapper).toHaveAttribute('role', 'none')
+    })
+
+    it('does not add an extra `li role="none"` wrapper when `as="li"`', () => {
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="li" id="item-1">
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      expect(item.tagName).toBe('LI')
+      // The treeitem should be a direct child of the tree (`<ul>`), not wrapped
+      // in an outer `<li role="none">`.
+      expect(item.parentElement).toHaveAttribute('role', 'tree')
+    })
+
+    it('supports polymorphic Item with custom component via `as`', () => {
+      const CustomLink = React.forwardRef<
+        HTMLAnchorElement,
+        React.AnchorHTMLAttributes<HTMLAnchorElement> & {custom: boolean}
+      >(({children, custom, ...props}, ref) => (
+        <a ref={ref} data-custom-link={custom} {...props}>
+          {children}
+        </a>
+      ))
+      CustomLink.displayName = 'CustomLink'
+
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as={CustomLink} href="#docs" custom={true} id="item-docs">
+            Docs
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Docs/})
+      expect(item.tagName).toBe('A')
+      expect(item).toHaveAttribute('href', '#docs')
+      expect(item).toHaveAttribute('data-custom-link', 'true')
+    })
+
+    it('preserves treeitem role, tabIndex, and aria attributes when `as` is provided', () => {
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="a" href="#item-1" id="item-1" current>
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      expect(item).toHaveAttribute('role', 'treeitem')
+      expect(item).toHaveAttribute('tabindex', '0')
+      expect(item).toHaveAttribute('aria-current', 'true')
+      expect(item).toHaveAttribute('aria-level', '1')
+    })
+
+    it('forwards ref to the element specified by `as`', () => {
+      const ref = React.createRef<HTMLAnchorElement>()
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="a" href="#item-1" id="item-1" ref={ref}>
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      expect(ref.current).not.toBeNull()
+      expect(ref.current?.tagName).toBe('A')
+    })
+
+    it('calls onSelect when the polymorphic element is clicked', () => {
+      const onSelect = vi.fn()
+      render(
+        <TreeView aria-label="Test tree">
+          <TreeView.Item as="a" href="#item-1" id="item-1" onSelect={onSelect}>
+            Item 1
+          </TreeView.Item>
+        </TreeView>,
+      )
+
+      const item = screen.getByRole('treeitem', {name: /Item 1/})
+      fireEvent.click(item)
+      expect(onSelect).toHaveBeenCalledTimes(1)
+    })
+  })
 })
 
 describe('Keyboard interactions', () => {
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index 495bb8cf26e..3338c6371d2 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -30,6 +30,7 @@ import {Tooltip} from '../TooltipV2'
 import {isSlot} from '../utils/is-slot'
 import type {FCWithSlotMarker} from '../utils/types'
 import {AriaStatus} from '../live-region'
+import {fixedForwardRef, type DistributiveOmit} from '../utils/modern-polymorphic'
 
 // ----------------------------------------------------------------------------
 // Context
@@ -205,7 +206,7 @@ Root.displayName = 'TreeView'
 // ----------------------------------------------------------------------------
 // TreeView.Item
 
-export type TreeViewItemProps = {
+type TreeViewItemBaseProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby']
   id: string
@@ -220,8 +221,23 @@ export type TreeViewItemProps = {
   secondaryActions?: TreeViewSecondaryActions[]
 }
 
-const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
-  (
+// We build this type manually (instead of using `PolymorphicProps`) so we can omit
+// `ref` and `onSelect` from the underlying element's props:
+// - `ref` is provided solely by `fixedForwardRef` (typed as `Ref<unknown>`), preserving
+//   backward compatibility with consumers that pass `Ref<HTMLElement>` rather than the
+//   intrinsic element's ref type (e.g. `Ref<HTMLLIElement>` for the default `<li>`).
+// - Our custom `onSelect` (typed against `HTMLElement`) replaces the native
+//   `ReactEventHandler<HTMLLIElement>` that would otherwise be intersected in
+//   and conflict with existing consumers.
+// `DistributiveOmit` keeps the omit distributing over `as` union types.
+export type TreeViewItemProps<As extends React.ElementType = 'li'> = DistributiveOmit<
+  React.ComponentPropsWithoutRef<React.ElementType extends As ? 'li' : As>,
+  'as' | 'onSelect'
+> &
+  TreeViewItemBaseProps & {as?: As}
+
+const ItemImpl = fixedForwardRef(
+  <As extends React.ElementType = 'li'>(
     {
       id: itemId,
       containIntrinsicSize,
@@ -235,9 +251,20 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       secondaryActions,
-    },
-    ref,
+      as: Component,
+      ...restProps
+    }: TreeViewItemProps<As>,
+    ref: React.ForwardedRef<unknown>,
   ) => {
+    // When `as` is provided (and resolves to something other than the default
+    // `'li'`), we render the polymorphic element as the `role="treeitem"` and
+    // wrap it in an `<li role="none">` so the markup remains valid (a
+    // `<ul role="tree">` may only directly contain `<li>` elements). When `as`
+    // is omitted, or explicitly set to `'li'`, we render an `<li>` directly as
+    // the treeitem to preserve the historical DOM shape and ref typing for
+    // existing consumers and to avoid nesting `<li>` inside `<li>`.
+    const ItemElement = (Component ?? 'li') as React.ElementType
+    const isPolymorphic = Component !== undefined && Component !== 'li'
     const [slots, rest] = useSlots(children, {
       leadingAction: LeadingAction,
       leadingVisual: LeadingVisual,
@@ -269,7 +296,6 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
 
     // Set the expanded state and cache it
     const setIsExpandedWithCache = React.useCallback(
-      // eslint-disable-next-line react-hooks/preserve-manual-memoization
       (newIsExpanded: boolean) => {
         setIsExpanded(newIsExpanded)
         expandedStateCache.current?.set(itemId, newIsExpanded)
@@ -344,6 +370,115 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
     const shortcut = `Shift+${platform === 'apple' ? 'Meta' : 'Control'}+U`
     const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, platform)}) for more actions.`
 
+    const itemElement = (
+      // @ts-ignore TypeScript can't infer that the `ref` here is compatible
+      // with every possible polymorphic `ItemElement` (it's typed as
+      // `Ref<unknown>` by `fixedForwardRef`), so we cast at the boundary.
+      <ItemElement
+        {...restProps}
+        className={clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem)}
+        ref={ref as React.ForwardedRef<HTMLElement>}
+        tabIndex={0}
+        id={itemId}
+        role="treeitem"
+        aria-label={
+          secondaryActions ? (ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined) : ariaLabel
+        }
+        aria-labelledby={
+          ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim()
+        }
+        aria-describedby={ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined}
+        aria-level={level}
+        aria-expanded={(isSubTreeEmpty && (!isExpanded || !hasSubTree)) || expanded === null ? undefined : isExpanded}
+        aria-current={isCurrentItem ? 'true' : undefined}
+        aria-selected={isFocused ? 'true' : 'false'}
+        data-has-leading-action={slots.leadingAction ? true : undefined}
+        data-loading={isLoadingPlaceholder ? true : undefined}
+        onKeyDown={handleKeyDown}
+        onFocus={(event: React.FocusEvent<HTMLElement>) => {
+          // Defer scroll to the next animation frame so that rapid keyboard
+          // navigation (held key) coalesces into a single reflow per frame
+          scrollElementIntoView(event.currentTarget.firstElementChild)
+
+          // Set the focused state
+          setIsFocused(true)
+
+          // Prevent focus event from bubbling up to parent items
+          event.stopPropagation()
+        }}
+        onBlur={() => setIsFocused(false)}
+        onClick={(event: React.MouseEvent<HTMLElement>) => {
+          if (onSelect) {
+            onSelect(event)
+          } else {
+            toggle(event)
+          }
+          event.stopPropagation()
+        }}
+        onAuxClick={(event: React.MouseEvent<HTMLElement>) => {
+          if (onSelect && event.button === 1) {
+            onSelect(event)
+          }
+          event.stopPropagation()
+        }}
+      >
+        <div
+          className={clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer)}
+          style={{
+            // @ts-ignore CSS custom property
+            '--level': level,
+            contentVisibility: containIntrinsicSize ? 'auto' : undefined,
+            containIntrinsicSize,
+          }}
+        >
+          <div style={{gridArea: 'spacer', display: 'flex'}}>
+            <LevelIndicatorLines level={level} />
+          </div>
+          {slots.leadingAction}
+          {hasSubTree ? (
+            // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
+            // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
+            // This has specific advice that the chevron be available only to pointer event.
+            // If they take up a button role, they become unnecessary and numerous tab stops.
+
+            <div
+              className={clsx(
+                'PRIVATE_TreeView-item-toggle',
+                onSelect && 'PRIVATE_TreeView-item-toggle--hover',
+                level === 1 && 'PRIVATE_TreeView-item-toggle--end',
+                classes.TreeViewItemToggle,
+                classes.TreeViewItemToggleHover,
+                classes.TreeViewItemToggleEnd,
+              )}
+              onClick={event => {
+                if (onSelect) {
+                  toggle(event)
+                }
+              }}
+            >
+              {isExpanded ? <ChevronDownIcon size={TOGGLE_ICON_SIZE} /> : <ChevronRightIcon size={TOGGLE_ICON_SIZE} />}
+            </div>
+          ) : null}
+          <div id={labelId} className={clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent)}>
+            {slots.leadingVisual}
+            <span className={clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText)}>
+              {childrenWithoutSubTree}
+            </span>
+            {slots.trailingVisual}
+          </div>
+          {secondaryActions ? (
+            <>
+              <TrailingAction items={secondaryActions} shortcutText={trailingActionShortcutText} />
+              {actionCommandPressed ? (
+                <ActionDialog items={secondaryActions} onClose={() => setActionCommandPressed(false)} />
+              ) : null}
+            </>
+          ) : null}
+        </div>
+        {subTree}
+      </ItemElement>
+    )
+
     return (
       <ItemContext.Provider
         value={{
@@ -358,118 +493,14 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
           trailingActionId,
         }}
       >
-        {/* @ts-ignore Box doesn't have type support for `ref` used in combination with `as` */}
-        <li
-          className={clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem)}
-          ref={ref as React.ForwardedRef<HTMLLIElement>}
-          tabIndex={0}
-          id={itemId}
-          role="treeitem"
-          aria-label={
-            secondaryActions ? (ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined) : ariaLabel
-          }
-          aria-labelledby={
-            ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim()
-          }
-          aria-describedby={ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined}
-          aria-level={level}
-          aria-expanded={(isSubTreeEmpty && (!isExpanded || !hasSubTree)) || expanded === null ? undefined : isExpanded}
-          aria-current={isCurrentItem ? 'true' : undefined}
-          aria-selected={isFocused ? 'true' : 'false'}
-          data-has-leading-action={slots.leadingAction ? true : undefined}
-          data-loading={isLoadingPlaceholder ? true : undefined}
-          onKeyDown={handleKeyDown}
-          onFocus={event => {
-            // Defer scroll to the next animation frame so that rapid keyboard
-            // navigation (held key) coalesces into a single reflow per frame
-            scrollElementIntoView(event.currentTarget.firstElementChild)
-
-            // Set the focused state
-            setIsFocused(true)
-
-            // Prevent focus event from bubbling up to parent items
-            event.stopPropagation()
-          }}
-          onBlur={() => setIsFocused(false)}
-          onClick={event => {
-            if (onSelect) {
-              onSelect(event)
-            } else {
-              toggle(event)
-            }
-            event.stopPropagation()
-          }}
-          onAuxClick={event => {
-            if (onSelect && event.button === 1) {
-              onSelect(event)
-            }
-            event.stopPropagation()
-          }}
-        >
-          <div
-            className={clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer)}
-            style={{
-              // @ts-ignore CSS custom property
-              '--level': level,
-              contentVisibility: containIntrinsicSize ? 'auto' : undefined,
-              containIntrinsicSize,
-            }}
-          >
-            <div style={{gridArea: 'spacer', display: 'flex'}}>
-              <LevelIndicatorLines level={level} />
-            </div>
-            {slots.leadingAction}
-            {hasSubTree ? (
-              // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
-              // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
-              // This has specific advice that the chevron be available only to pointer event.
-              // If they take up a button role, they become unnecessary and numerous tab stops.
-
-              <div
-                className={clsx(
-                  'PRIVATE_TreeView-item-toggle',
-                  onSelect && 'PRIVATE_TreeView-item-toggle--hover',
-                  level === 1 && 'PRIVATE_TreeView-item-toggle--end',
-                  classes.TreeViewItemToggle,
-                  classes.TreeViewItemToggleHover,
-                  classes.TreeViewItemToggleEnd,
-                )}
-                onClick={event => {
-                  if (onSelect) {
-                    toggle(event)
-                  }
-                }}
-              >
-                {isExpanded ? (
-                  <ChevronDownIcon size={TOGGLE_ICON_SIZE} />
-                ) : (
-                  <ChevronRightIcon size={TOGGLE_ICON_SIZE} />
-                )}
-              </div>
-            ) : null}
-            <div id={labelId} className={clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent)}>
-              {slots.leadingVisual}
-              <span className={clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText)}>
-                {childrenWithoutSubTree}
-              </span>
-              {slots.trailingVisual}
-            </div>
-            {secondaryActions ? (
-              <>
-                <TrailingAction items={secondaryActions} shortcutText={trailingActionShortcutText} />
-                {actionCommandPressed ? (
-                  <ActionDialog items={secondaryActions} onClose={() => setActionCommandPressed(false)} />
-                ) : null}
-              </>
-            ) : null}
-          </div>
-          {subTree}
-        </li>
+        {isPolymorphic ? <li role="none">{itemElement}</li> : itemElement}
       </ItemContext.Provider>
     )
   },
 )
 
+const Item = Object.assign(ItemImpl, {displayName: 'TreeView.Item'})
+
 /** Lines to indicate the depth of an item in a TreeView */
 const LevelIndicatorLines: React.FC<{level: number}> = ({level}) => {
   return (
@@ -481,8 +512,6 @@ const LevelIndicatorLines: React.FC<{level: number}> = ({level}) => {
   )
 }
 
-Item.displayName = 'TreeView.Item'
-
 // ----------------------------------------------------------------------------
 // TreeView.SubTree
 
@@ -655,7 +684,7 @@ const LoadingItem = React.forwardRef<HTMLElement, LoadingItemProps>(({count}, re
   if (count) {
     return (
       <LoadingPlaceholderContext.Provider value={true}>
-        <Item id={itemId} ref={ref}>
+        <Item id={itemId} ref={ref as React.Ref<HTMLLIElement>}>
           {Array.from({length: count}).map((_, i) => {
             return <SkeletonItem aria-hidden={true} key={i} />
           })}
@@ -667,7 +696,7 @@ const LoadingItem = React.forwardRef<HTMLElement, LoadingItemProps>(({count}, re
 
   return (
     <LoadingPlaceholderContext.Provider value={true}>
-      <Item id={itemId} ref={ref}>
+      <Item id={itemId} ref={ref as React.Ref<HTMLLIElement>}>
         <LeadingVisual>
           <Spinner size="small" />
         </LeadingVisual>
@@ -679,7 +708,7 @@ const LoadingItem = React.forwardRef<HTMLElement, LoadingItemProps>(({count}, re
 
 const EmptyItem = React.forwardRef<HTMLElement>((props, ref) => {
   return (
-    <Item expanded={null} id={useId()} ref={ref}>
+    <Item expanded={null} id={useId()} ref={ref as React.Ref<HTMLLIElement>}>
       <Text className="fgColor-muted">No items found</Text>
     </Item>
   )
diff --git a/packages/react/src/utils/modern-polymorphic.ts b/packages/react/src/utils/modern-polymorphic.ts
index d29e9e14f24..62ca5ea264b 100644
--- a/packages/react/src/utils/modern-polymorphic.ts
+++ b/packages/react/src/utils/modern-polymorphic.ts
@@ -6,7 +6,7 @@ import type {ComponentPropsWithRef, ElementType} from 'react'
 /**
  * Distributive Omit utility type that works correctly with union types
  */
-type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends unknown ? Omit<T, TOmitted> : never
+export type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends unknown ? Omit<T, TOmitted> : never
 
 /**
  * Fixed version of forwardRef that provides better type inference for polymorphic components