diff --git a/packages/react/src/ActionBar/ActionBar.tsx b/packages/react/src/ActionBar/ActionBar.tsx
index 7f2745ef218..979caf12499 100644
--- a/packages/react/src/ActionBar/ActionBar.tsx
+++ b/packages/react/src/ActionBar/ActionBar.tsx
@@ -320,16 +320,19 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
   const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
   const containerRef = React.useRef<HTMLUListElement>(null)
 
-  useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
-    const navWidth = resizeObserverEntries[0].contentRect.width
-    const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
-    const hasActiveMenu = menuItemIds.size > 0
-
-    if (navWidth > 0) {
-      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
-      if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
-    }
-  }, navRef as RefObject<HTMLElement>)
+  useResizeObserver(
+    (resizeObserverEntries: ResizeObserverEntry[]) => {
+      const navWidth = resizeObserverEntries[0].contentRect.width
+      const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
+      const hasActiveMenu = menuItemIds.size > 0
+
+      if (navWidth > 0) {
+        const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap)
+        if (newMenuItemIds) setMenuItemIds(newMenuItemIds)
+      }
+    },
+    navRef as RefObject<HTMLElement | null>,
+  )
 
   const isVisibleChild = useCallback(
     (id: string) => {
@@ -554,7 +557,7 @@ const ActionBarGroupContext = React.createContext<{
 
 export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
   const backupRef = useRef<HTMLDivElement>(null)
-  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
+  const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement | null>
   const id = useId()
   const {registerChild, unregisterChild} = React.useContext(ActionBarContext)
 
@@ -576,7 +579,11 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
 
   return (
     <ActionBarGroupContext.Provider value={{groupId: id}}>
-      <div className={styles.Group} ref={ref}>
+      <div
+        className={styles.Group}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={ref}
+      >
         {children}
       </div>
     </ActionBarGroupContext.Provider>
@@ -586,7 +593,7 @@ export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, f
 export const ActionBarMenu = forwardRef(
   ({'aria-label': ariaLabel, icon, overflowIcon, items, ...props}: ActionBarMenuProps, forwardedRef) => {
     const backupRef = useRef<HTMLButtonElement>(null)
-    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement>
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLButtonElement | null>
     const id = useId()
     const {registerChild, unregisterChild, isVisibleChild} = React.useContext(ActionBarContext)
 
diff --git a/packages/react/src/ActionList/List.tsx b/packages/react/src/ActionList/List.tsx
index 0546d85abca..7f84acb856c 100644
--- a/packages/react/src/ActionList/List.tsx
+++ b/packages/react/src/ActionList/List.tsx
@@ -41,7 +41,7 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
 
   const ariaLabelledBy = slots.heading ? (slots.heading.props.id ?? headingId) : listLabelledBy
   const listRole = role || listRoleFromContainer
-  const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement>)
+  const listRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLUListElement | null>)
 
   let enableFocusZone = false
   if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer
@@ -66,17 +66,19 @@ const UnwrappedList = <As extends React.ElementType = 'ul'>(
       }}
     >
       {slots.heading}
-      <Component
-        className={clsx(classes.ActionList, className)}
-        role={listRole}
-        aria-labelledby={ariaLabelledBy}
-        ref={listRef}
-        data-dividers={showDividers}
-        data-variant={variant}
-        {...restProps}
-      >
-        {childrenWithoutSlots}
-      </Component>
+      {React.createElement(
+        Component,
+        {
+          className: clsx(classes.ActionList, className),
+          role: listRole,
+          'aria-labelledby': ariaLabelledBy,
+          ref: listRef,
+          'data-dividers': showDividers,
+          'data-variant': variant,
+          ...restProps,
+        },
+        childrenWithoutSlots,
+      )}
     </ListContext.Provider>
   )
 }
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
index ffc1ad10064..c0cd18f64ef 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -27,7 +27,7 @@ interface AnchoredOverlayPropsWithAnchor {
   /**
    * An override to the internal ref that will be spread on to the renderAnchor
    */
-  anchorRef?: React.RefObject<HTMLElement>
+  anchorRef?: React.RefObject<HTMLElement | null>
 
   /**
    * An override to the internal id that will be spread on to the renderAnchor
@@ -46,7 +46,7 @@ interface AnchoredOverlayPropsWithoutAnchor {
    * An override to the internal renderAnchor ref that will be used to position the overlay.
    * When renderAnchor is null this can be used to make an anchor that is detached from ActionMenu.
    */
-  anchorRef: React.RefObject<HTMLElement>
+  anchorRef: React.RefObject<HTMLElement | null>
   /**
    * An override to the internal id that will be spread on to the renderAnchor
    */
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index 55fa35d8389..cbd8400c293 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -462,7 +462,11 @@ export const CustomOverlayMenuAnchor = () => {
         <FormControl.Label htmlFor="autocompleteInput" id="autocompleteLabel">
           Default label
         </FormControl.Label>
-        <div ref={menuAnchorRef as React.RefObject<HTMLDivElement>} className={classes.AnchorContainer}>
+        <div
+          // @ts-expect-error [react-19] [TS2322]
+          ref={menuAnchorRef as React.RefObject<HTMLDivElement | null>}
+          className={classes.AnchorContainer}
+        >
           <Autocomplete>
             <Autocomplete.Input
               id="autocompleteInput"
@@ -522,7 +526,11 @@ export const InOverlayWithCustomScrollContainerRef = () => {
             <div className={classes.OverlayInputBar}>
               <Autocomplete.Input ref={inputRef} className={classes.OverlayInput} block aria-label="Search" />
             </div>
-            <div ref={scrollContainerRef as RefObject<HTMLDivElement>} className={classes.OverlayScroll}>
+            <div
+              // @ts-expect-error [react-19] [TS2322]
+              ref={scrollContainerRef as RefObject<HTMLDivElement | null>}
+              className={classes.OverlayScroll}
+            >
               <Autocomplete.Menu
                 items={items}
                 selectedItemIds={[]}
diff --git a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
index d72494a7545..bef6b87a547 100644
--- a/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
+++ b/packages/react/src/Autocomplete/AutocompleteOverlay.tsx
@@ -14,7 +14,7 @@ type AutocompleteOverlayInternalProps = {
   /**
    * The ref of the element that the position of the menu is based on. By default, the menu is positioned based on the text input
    */
-  menuAnchorRef?: React.RefObject<HTMLElement>
+  menuAnchorRef?: React.RefObject<HTMLElement | null>
   /**
    * Props to be spread on the internal `Overlay` component.
    */
@@ -60,7 +60,8 @@ function AutocompleteOverlay({
       preventFocusOnOpen={true}
       onClickOutside={closeOptionList}
       onEscape={closeOptionList}
-      ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
       top={position?.top}
       left={position?.left}
       className={classes.Overlay}
diff --git a/packages/react/src/AvatarStack/AvatarStack.tsx b/packages/react/src/AvatarStack/AvatarStack.tsx
index 9661161a24c..fe6c59f123c 100644
--- a/packages/react/src/AvatarStack/AvatarStack.tsx
+++ b/packages/react/src/AvatarStack/AvatarStack.tsx
@@ -38,7 +38,7 @@ const AvatarStackBody = ({
 }: {
   disableExpand: boolean | undefined
   hasInteractiveChildren: boolean | undefined
-  stackContainer: React.RefObject<HTMLDivElement>
+  stackContainer: React.RefObject<HTMLDivElement | null>
 } & React.ComponentPropsWithoutRef<'div'>) => {
   return (
     <div
@@ -51,6 +51,7 @@ const AvatarStackBody = ({
         classes.AvatarStackBody,
       )}
       tabIndex={!hasInteractiveChildren && !disableExpand ? 0 : undefined}
+      // @ts-expect-error [react-19] [TS2322]
       ref={stackContainer}
     >
       {children}
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index cd07d132175..f186248fb66 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -17,7 +17,7 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   forwardRef,
 ) {
   const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
-  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
+  const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement | null>)
 
   useFocusZone({
     containerRef: buttonRef,
@@ -27,7 +27,13 @@ const ButtonGroup = React.forwardRef(function ButtonGroup(
   })
 
   return (
-    <BaseComponent ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
+    <BaseComponent
+      // @ts-expect-error [react-19] [TS2322]
+      ref={buttonRef}
+      className={clsx(className, classes.ButtonGroup)}
+      role={role}
+      {...rest}
+    >
       {buttons}
     </BaseComponent>
   )
diff --git a/packages/react/src/Checkbox/Checkbox.stories.tsx b/packages/react/src/Checkbox/Checkbox.stories.tsx
index 1ffafd73c8e..c8dffa5f8d8 100644
--- a/packages/react/src/Checkbox/Checkbox.stories.tsx
+++ b/packages/react/src/Checkbox/Checkbox.stories.tsx
@@ -19,7 +19,13 @@ export const Playground = ({value: _value, checked, ...args}: FormControlArgs<Ch
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Checkbox value="default" checked={checked} {...args} />
+        <Checkbox
+          value="default"
+          checked={checked}
+          {...args}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={args.ref}
+        />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/Checkbox/Checkbox.tsx b/packages/react/src/Checkbox/Checkbox.tsx
index d54c372cd80..45ea0badaa7 100644
--- a/packages/react/src/Checkbox/Checkbox.tsx
+++ b/packages/react/src/Checkbox/Checkbox.tsx
@@ -20,7 +20,7 @@ export type CheckboxProps = {
   /**
    * Forward a ref to the underlying input element
    */
-  ref?: React.RefObject<HTMLInputElement>
+  ref?: React.RefObject<HTMLInputElement | null>
   /**
    * Indicates whether the checkbox must be checked
    */
@@ -44,7 +44,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     {checked, className, defaultChecked, indeterminate, disabled, onChange, required, validationStatus, value, ...rest},
     ref,
   ): ReactElement => {
-    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+    const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement | null>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {
       checkboxGroupContext.onChange && checkboxGroupContext.onChange(e)
@@ -84,7 +84,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     })
 
-    return <input {...inputProps} className={clsx(className, sharedClasses.Input, classes.Checkbox)} />
+    return (
+      <input
+        {...inputProps}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={inputProps.ref}
+        className={clsx(className, sharedClasses.Input, classes.Checkbox)}
+      />
+    )
   },
 )
 
diff --git a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
index e6e1cb6ffe3..f6f3ef3ef8b 100644
--- a/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
+++ b/packages/react/src/ConfirmationDialog/ConfirmationDialog.tsx
@@ -108,7 +108,11 @@ const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({foo
 
   // Must have exactly 2 buttons!
   return (
-    <div ref={footerRef as React.RefObject<HTMLDivElement>} className={classes.ConfirmationFooter}>
+    <div
+      // @ts-expect-error [react-19] [TS2322]
+      ref={footerRef as React.RefObject<HTMLDivElement | null>}
+      className={classes.ConfirmationFooter}
+    >
       <Dialog.Buttons buttons={footerButtons ?? []} />
     </div>
   )
diff --git a/packages/react/src/Details/Details.features.stories.tsx b/packages/react/src/Details/Details.features.stories.tsx
index d3cb107cddc..f9dde784139 100644
--- a/packages/react/src/Details/Details.features.stories.tsx
+++ b/packages/react/src/Details/Details.features.stories.tsx
@@ -9,8 +9,13 @@ export default {
 
 export const WithCustomSummary: StoryFn<typeof Details> = () => {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  const {ref, ...detailsProps} = getDetailsProps()
   return (
-    <Details {...getDetailsProps()}>
+    <Details
+      {...detailsProps}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={ref}
+    >
       <summary>Custom see Details</summary>
       This is some content
     </Details>
diff --git a/packages/react/src/Details/Details.stories.tsx b/packages/react/src/Details/Details.stories.tsx
index 9c1d44c4ee4..d3673322cf3 100644
--- a/packages/react/src/Details/Details.stories.tsx
+++ b/packages/react/src/Details/Details.stories.tsx
@@ -9,8 +9,13 @@ export default {
 } as Meta<typeof Details>
 export const Default: StoryFn<typeof Details> = () => {
   const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+  const {ref, ...detailsProps} = getDetailsProps()
   return (
-    <Details {...getDetailsProps()}>
+    <Details
+      {...detailsProps}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={ref}
+    >
       <Details.Summary as={Button}>See Details</Details.Summary>
       This is some content
     </Details>
diff --git a/packages/react/src/Details/__tests__/Details.test.tsx b/packages/react/src/Details/__tests__/Details.test.tsx
index ead5d97a041..3ee2b4af873 100644
--- a/packages/react/src/Details/__tests__/Details.test.tsx
+++ b/packages/react/src/Details/__tests__/Details.test.tsx
@@ -8,8 +8,14 @@ describe('Details', () => {
   it('Toggles when you click outside', async () => {
     const Component = () => {
       const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details data-testid="details" {...getDetailsProps()}>
+        <Details
+          data-testid="details"
+          {...detailsProps}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <Details.Summary>hi</Details.Summary>
         </Details>
       )
@@ -25,8 +31,14 @@ describe('Details', () => {
   it('Accurately passes down open state', async () => {
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()} data-testid="details">
+        <Details
+          {...detailsProps}
+          data-testid="details"
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
         </Details>
       )
@@ -45,8 +57,14 @@ describe('Details', () => {
     const CloseButton = (props: ButtonProps) => <Button {...props} />
     const Component = () => {
       const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()} data-testid="details">
+        <Details
+          {...detailsProps}
+          data-testid="details"
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <CloseButton onClick={() => setOpen(false)}>Close</CloseButton>
         </Details>
@@ -65,8 +83,13 @@ describe('Details', () => {
     const user = userEvent.setup()
     const Component = () => {
       const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
+      const {ref, ...detailsProps} = getDetailsProps()
       return (
-        <Details {...getDetailsProps()}>
+        <Details
+          {...detailsProps}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+        >
           <summary data-testid="summary">{open ? 'Open' : 'Closed'}</summary>
           <div>
             <Button variant="primary">test</Button>
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 301bc80304c..af7dfd8dc1d 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -44,7 +44,7 @@ export type DialogButtonProps = Omit<ButtonProps, 'content'> & {
    * A reference to the rendered Button’s DOM node, used together with
    * `autoFocus` for `focusTrap`’s `initialFocus`.
    */
-  ref?: React.RefObject<HTMLButtonElement>
+  ref?: React.RefObject<HTMLButtonElement | null>
 }
 
 /**
@@ -136,12 +136,12 @@ export interface DialogProps {
    * Return focus to this element when the Dialog closes,
    * instead of the element that had focus immediately before the Dialog opened
    */
-  returnFocusRef?: React.RefObject<HTMLElement>
+  returnFocusRef?: React.RefObject<HTMLElement | null>
 
   /**
    * The element to focus when the Dialog opens
    */
-  initialFocusRef?: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
 
   /**
    * Additional class names to apply to the dialog
@@ -215,7 +215,10 @@ const DefaultFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerBu
     focusInStrategy: 'closest',
   })
   return footerButtons ? (
-    <Dialog.Footer ref={footerRef as React.RefObject<HTMLDivElement>}>
+    <Dialog.Footer
+      // @ts-expect-error [react-19] [TS2322]
+      ref={footerRef as React.RefObject<HTMLDivElement | null>}
+    >
       <Dialog.Buttons buttons={footerButtons} />
     </Dialog.Footer>
   ) : null
@@ -408,6 +411,7 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
             {...buttonProps}
             // 'normal' value is equivalent to 'default', this is used for backwards compatibility
             variant={buttonType === 'normal' ? 'default' : buttonType}
+            // @ts-expect-error [react-19] [TS2322]
             ref={autoFocus && autoFocusCount === 0 ? (autoFocusCount++, autoFocusRef) : null}
           >
             {content}
diff --git a/packages/react/src/FilteredActionList/FilteredActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionList.tsx
index d6d3fe6dfec..9db3c59876e 100644
--- a/packages/react/src/FilteredActionList/FilteredActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionList.tsx
@@ -33,9 +33,9 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
   filterValue?: string
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void
   onListContainerRefChanged?: (ref: HTMLElement | null) => void
-  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void
+  onInputRefChanged?: (ref: React.RefObject<HTMLInputElement | null>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
-  inputRef?: React.RefObject<HTMLInputElement>
+  inputRef?: React.RefObject<HTMLInputElement | null>
   message?: React.ReactNode
   messageText?: {
     title: string
@@ -341,6 +341,7 @@ export function FilteredActionList({
     <div ref={inputAndListContainerRef} className={clsx(className, classes.Root)} data-testid="filtered-action-list">
       <div className={classes.Header}>
         <TextInput
+          // @ts-expect-error [react-19] [TS2322]
           ref={inputRef}
           block
           width="auto"
diff --git a/packages/react/src/FilteredActionList/useAnnouncements.tsx b/packages/react/src/FilteredActionList/useAnnouncements.tsx
index 697b1232e4e..23dabe32cf0 100644
--- a/packages/react/src/FilteredActionList/useAnnouncements.tsx
+++ b/packages/react/src/FilteredActionList/useAnnouncements.tsx
@@ -21,7 +21,7 @@ const useFirstRender = () => {
 
 //TODO remove this when we remove usingRemoveActiveDescendant
 const getItemWithActiveDescendant = (
-  listRef: React.RefObject<HTMLUListElement>,
+  listRef: React.RefObject<HTMLUListElement | null>,
   items: FilteredActionListProps['items'],
 ) => {
   const listElement = listRef.current
@@ -43,8 +43,8 @@ const getItemWithActiveDescendant = (
 
 export const useAnnouncements = (
   items: FilteredActionListProps['items'],
-  listContainerRef: React.RefObject<HTMLUListElement>,
-  inputRef: React.RefObject<HTMLInputElement>,
+  listContainerRef: React.RefObject<HTMLUListElement | null>,
+  inputRef: React.RefObject<HTMLInputElement | null>,
   enabled: boolean = true,
   loading: boolean = false,
   message?: {title: string; description: string},
diff --git a/packages/react/src/LabelGroup/LabelGroup.tsx b/packages/react/src/LabelGroup/LabelGroup.tsx
index 2c59e38b841..2def704e1ec 100644
--- a/packages/react/src/LabelGroup/LabelGroup.tsx
+++ b/packages/react/src/LabelGroup/LabelGroup.tsx
@@ -19,12 +19,12 @@ export type LabelGroupProps = {
 // Calculates the width of the overlay to cover the labels/tokens and the expand button.
 const getOverlayWidth = (
   buttonClientRect: DOMRect,
-  containerRef: React.RefObject<HTMLElement>,
+  containerRef: React.RefObject<HTMLElement | null>,
   overlayPaddingPx: number,
 ) => overlayPaddingPx + buttonClientRect.right - (containerRef.current?.getBoundingClientRect().left || 0)
 
 const InlineToggle: React.FC<{
-  collapseButtonRef: React.RefObject<HTMLButtonElement>
+  collapseButtonRef: React.RefObject<HTMLButtonElement | null>
   collapseInlineExpandedChildren: () => void
   expandButtonRef: React.RefCallback<HTMLButtonElement>
   hiddenItemIds: string[]
@@ -40,7 +40,13 @@ const InlineToggle: React.FC<{
   showAllTokensInline,
 }) =>
   isOverflowShown ? (
-    <Button ref={collapseButtonRef} onClick={collapseInlineExpandedChildren} size="small" variant="invisible">
+    <Button
+      // @ts-expect-error [react-19] [TS2322]
+      ref={collapseButtonRef}
+      onClick={collapseInlineExpandedChildren}
+      size="small"
+      variant="invisible"
+    >
       Show less
     </Button>
   ) : hiddenItemIds.length ? (
@@ -81,7 +87,7 @@ const OverlayToggle: React.FC<
       align="start"
       side="inside-right"
       // expandButtonRef satisfies React.RefObject<HTMLButtonElement> because we manually set `.current` in the `useCallback` above
-      anchorRef={expandButtonRef as unknown as React.RefObject<HTMLButtonElement>}
+      anchorRef={expandButtonRef as unknown as React.RefObject<HTMLButtonElement | null>}
       anchorOffset={overlayPaddingPx * -1}
       alignmentOffset={overlayPaddingPx * -1}
       renderAnchor={props => (
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 399078d4e37..b3f3ad7d0f6 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -137,14 +137,14 @@ export const BaseOverlay = React.forwardRef(
 
 type ContainerProps = {
   anchorSide?: AnchorSide
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
-  initialFocusRef?: React.RefObject<HTMLElement>
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
+  initialFocusRef?: React.RefObject<HTMLElement | null>
   onClickOutside: (e: TouchOrMouseEvent) => void
   onEscape: (e: KeyboardEvent) => void
   portalContainerName?: string
   preventOverflow?: boolean
   preventFocusOnOpen?: boolean
-  returnFocusRef: React.RefObject<HTMLElement>
+  returnFocusRef: React.RefObject<HTMLElement | null>
 }
 
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>
diff --git a/packages/react/src/Overlay/Overlay.types.test.tsx b/packages/react/src/Overlay/Overlay.types.test.tsx
index 613438c8c25..210d9589c2c 100644
--- a/packages/react/src/Overlay/Overlay.types.test.tsx
+++ b/packages/react/src/Overlay/Overlay.types.test.tsx
@@ -1,26 +1,26 @@
 import type React from 'react'
 import Overlay from './Overlay'
 
-export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement | null>) {
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
 }
 
-export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement | null>) {
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
 }
 
-export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
+export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement | null>) {
   // @ts-expect-error href should not be allowed on a <div>
   return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
 }
 
-export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
+export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement | null>) {
   return (
     <Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
   )
 }
 
-export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
+export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement | null>) {
   return (
     <Overlay
       returnFocusRef={ref}
diff --git a/packages/react/src/PageHeader/PageHeader.tsx b/packages/react/src/PageHeader/PageHeader.tsx
index 0a333c5bcf0..5181f412d5b 100644
--- a/packages/react/src/PageHeader/PageHeader.tsx
+++ b/packages/react/src/PageHeader/PageHeader.tsx
@@ -49,7 +49,7 @@ export type PageHeaderProps = {
 
 const Root = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageHeaderProps>>(
   ({children, className, as: BaseComponent = 'div', 'aria-label': ariaLabel, role, hasBorder}, forwardedRef) => {
-    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+    const rootRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement | null>)
 
     const isInteractive = (element: HTMLElement) => {
       return (
@@ -205,10 +205,11 @@ export type TitleAreaProps = {
 
 const TitleArea = React.forwardRef<HTMLDivElement, React.PropsWithChildren<TitleAreaProps>>(
   ({children, className, hidden = false, variant = 'medium'}, forwardedRef) => {
-    const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement>)
+    const titleAreaRef = useProvidedRefOrCreate<HTMLDivElement>(forwardedRef as React.RefObject<HTMLDivElement | null>)
     return (
       <div
         className={clsx(classes.TitleArea, className)}
+        // @ts-expect-error [react-19] [TS2322]
         ref={titleAreaRef}
         data-component="TitleArea"
         {...getResponsiveAttributes('size-variant', variant)}
diff --git a/packages/react/src/PageLayout/PageLayout.tsx b/packages/react/src/PageLayout/PageLayout.tsx
index 29afbe4477a..d9a066a65af 100644
--- a/packages/react/src/PageLayout/PageLayout.tsx
+++ b/packages/react/src/PageLayout/PageLayout.tsx
@@ -32,7 +32,7 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
-  paneRef: React.RefObject<HTMLDivElement>
+  paneRef: React.RefObject<HTMLDivElement | null>
 }>({
   padding: 'normal',
   rowGap: 'normal',
@@ -682,6 +682,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
           position={positionProp}
         />
         <div
+          // @ts-expect-error [react-19] [TS2322]
           ref={paneRef}
           {...(hasOverflow ? overflowProps : {})}
           {...labelProp}
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 6eb3a0d9fea..a6a61d2a9cc 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -5,7 +5,7 @@ import React, {useRef} from 'react'
 import {useOnOutsideClick} from '../hooks'
 
 // Stable empty array reference to avoid unnecessary re-renders
-const EMPTY_IGNORE_CLICK_REFS: React.RefObject<HTMLElement>[] = []
+const EMPTY_IGNORE_CLICK_REFS: React.RefObject<HTMLElement | null>[] = []
 
 type CaretPosition =
   | 'top'
@@ -62,7 +62,7 @@ export type PopoverContentProps = {
   /*
    * Refs to elements that should be ignored when detecting outside clicks
    */
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
 } & HTMLProps<HTMLDivElement>
 
 const PopoverContent: React.FC<React.PropsWithChildren<PopoverContentProps>> = ({
diff --git a/packages/react/src/Radio/Radio.stories.tsx b/packages/react/src/Radio/Radio.stories.tsx
index c7be73a83f4..fb0ccae8a96 100644
--- a/packages/react/src/Radio/Radio.stories.tsx
+++ b/packages/react/src/Radio/Radio.stories.tsx
@@ -16,13 +16,19 @@ export default {
   parameters: {controls: {exclude: excludedControlKeys}},
 } as Meta
 
-export const Playground = ({value: _value, ...args}: FormControlArgs<RadioProps>) => {
+export const Playground = ({value: _value, ref, ...args}: FormControlArgs<RadioProps>) => {
   const {parentArgs, labelArgs, captionArgs} = getFormControlArgsByChildComponent(args)
 
   return (
     <form>
       <FormControl {...parentArgs}>
-        <Radio name="default-radio-name" value="default" {...args} />
+        <Radio
+          name="default-radio-name"
+          value="default"
+          // @ts-expect-error [react-19] [TS2322]
+          ref={ref}
+          {...args}
+        />
         <FormControl.Label {...labelArgs} />
         {captionArgs.children && <FormControl.Caption {...captionArgs} />}
       </FormControl>
diff --git a/packages/react/src/Radio/Radio.tsx b/packages/react/src/Radio/Radio.tsx
index 16a98b94a53..2dc8e53ba72 100644
--- a/packages/react/src/Radio/Radio.tsx
+++ b/packages/react/src/Radio/Radio.tsx
@@ -27,7 +27,7 @@ export type RadioProps = {
   /**
    * Forward a ref to the underlying input element
    */
-  ref?: React.RefObject<HTMLInputElement>
+  ref?: React.RefObject<HTMLInputElement | null>
   /**
    * Indicates whether the radio button must be checked before the form can be submitted
    */
@@ -71,6 +71,7 @@ const Radio = React.forwardRef<HTMLInputElement, RadioProps>(
         type="radio"
         value={value}
         name={name}
+        // @ts-expect-error [react-19] [TS2322]
         ref={ref}
         disabled={disabled}
         checked={checked}
diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
index 8fe2e158fed..79d751ccf55 100644
--- a/packages/react/src/SelectPanel/SelectPanel.tsx
+++ b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -198,7 +198,7 @@ function Panel({
   const loadingDelayTimeoutId = useRef<number | null>(null)
   const loadingManagedInternally = loading === undefined
   const loadingManagedExternally = !loadingManagedInternally
-  const [inputRef, setInputRef] = React.useState<React.RefObject<HTMLInputElement> | null>(null)
+  const [inputRef, setInputRef] = React.useState<React.RefObject<HTMLInputElement | null> | null>(null)
   const [listContainerElement, setListContainerElement] = useState<HTMLElement | null>(null)
   const [needsNoItemsAnnouncement, setNeedsNoItemsAnnouncement] = useState<boolean>(false)
   const isNarrowScreenSize = useResponsiveValue({narrow: true, regular: false, wide: false}, false)
@@ -241,7 +241,7 @@ function Panel({
   )
 
   const onInputRefChanged = useCallback(
-    (ref: React.RefObject<HTMLInputElement>) => {
+    (ref: React.RefObject<HTMLInputElement | null>) => {
       setInputRef(ref)
     },
     [setInputRef],
diff --git a/packages/react/src/Skeleton/SkeletonBox.tsx b/packages/react/src/Skeleton/SkeletonBox.tsx
index eb52dc7800b..72f759c41c5 100644
--- a/packages/react/src/Skeleton/SkeletonBox.tsx
+++ b/packages/react/src/Skeleton/SkeletonBox.tsx
@@ -18,7 +18,8 @@ export const SkeletonBox = React.forwardRef<HTMLElement, SkeletonBoxProps>(funct
 ) {
   return (
     <div
-      ref={ref as React.RefObject<HTMLDivElement>}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={ref as React.RefObject<HTMLDivElement | null>}
       className={clsx(className, classes.SkeletonBox)}
       style={{height, width, ...(style || {})}}
       {...props}
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 876e130160f..c9e41f752a2 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -51,7 +51,11 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   )
 
   return (
-    <div {...rest} ref={navRef as React.RefObject<HTMLDivElement>}>
+    <div
+      {...rest}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={navRef as React.RefObject<HTMLDivElement | null>}
+    >
       <nav aria-label={ariaLabel} className={styles.TabNavNav}>
         <div role="tablist" className={styles.TabNavTabList}>
           {children}
diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx
index 5aa61e3040a..5cb991c2601 100644
--- a/packages/react/src/TextInput/TextInput.tsx
+++ b/packages/react/src/TextInput/TextInput.tsx
@@ -90,7 +90,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
     ref,
   ) => {
     const [isInputFocused, setIsInputFocused] = useState<boolean>(false)
-    const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
+    const inputRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement | null>)
     // this class is necessary to style FilterSearch, plz no touchy!
     const wrapperClasses = clsx(className, 'TextInput-wrapper')
     const showLeadingLoadingIndicator =
@@ -157,6 +157,7 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
           {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
         </TextInputInnerVisualSlot>
         <UnstyledTextInput
+          // @ts-expect-error [react-19] [TS2322]
           ref={inputRef}
           disabled={disabled}
           onFocus={handleInputFocus}
diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 03d90d0d25b..15d4dbf7fcb 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -281,7 +281,8 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
         {typeof LeadingVisual !== 'string' && isValidElementType(LeadingVisual) ? <LeadingVisual /> : LeadingVisual}
       </TextInputInnerVisualSlot>
       <div
-        ref={containerRef as RefObject<HTMLDivElement>}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={containerRef as RefObject<HTMLDivElement | null>}
         className={styles.Container}
         data-prevent-token-wrapping={preventTokenWrapping}
       >
diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
index 3fba58ec114..1fea93f22cd 100644
--- a/packages/react/src/TooltipV2/Tooltip.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -50,7 +50,7 @@ type TriggerPropsType = Pick<
   | 'onTouchCancel'
   | 'onTouchEnd'
 > & {
-  ref?: React.RefObject<HTMLElement>
+  ref?: React.RefObject<HTMLElement | null>
 }
 
 // map tooltip direction to anchoredPosition props
@@ -124,7 +124,7 @@ export const Tooltip: ForwardRefExoticComponent<
   ) => {
     const tooltipId = useId(id)
     const child = Children.only(children)
-    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement>)
+    const triggerRef = useProvidedRefOrCreate(forwardedRef as React.RefObject<HTMLElement | null>)
     const tooltipElRef = useRef<HTMLDivElement>(null)
 
     const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)
diff --git a/packages/react/src/TreeView/useRovingTabIndex.ts b/packages/react/src/TreeView/useRovingTabIndex.ts
index ff6af01870d..4e5abd3a20b 100644
--- a/packages/react/src/TreeView/useRovingTabIndex.ts
+++ b/packages/react/src/TreeView/useRovingTabIndex.ts
@@ -6,8 +6,8 @@ export function useRovingTabIndex({
   containerRef,
   mouseDownRef,
 }: {
-  containerRef: React.RefObject<HTMLElement>
-  mouseDownRef: React.RefObject<boolean>
+  containerRef: React.RefObject<HTMLElement | null>
+  mouseDownRef: React.RefObject<boolean | null>
 }) {
   // TODO: Initialize focus to the aria-current item if it exists
   useFocusZone({
diff --git a/packages/react/src/TreeView/useTypeahead.ts b/packages/react/src/TreeView/useTypeahead.ts
index cfd5f35f6d4..a43844eb0f6 100644
--- a/packages/react/src/TreeView/useTypeahead.ts
+++ b/packages/react/src/TreeView/useTypeahead.ts
@@ -3,7 +3,7 @@ import useSafeTimeout from '../hooks/useSafeTimeout'
 import {getAccessibleName} from './shared'
 
 type TypeaheadOptions = {
-  containerRef: React.RefObject<HTMLElement>
+  containerRef: React.RefObject<HTMLElement | null>
   onFocusChange: (element: Element) => void
 }
 
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.tsx b/packages/react/src/UnderlineNav/UnderlineNav.tsx
index 2f6386c9a47..36bace9fc22 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.tsx
@@ -151,7 +151,7 @@ export const UnderlineNav = forwardRef(
     forwardedRef,
   ) => {
     const backupRef = useRef<HTMLElement>(null)
-    const navRef = (forwardedRef ?? backupRef) as RefObject<HTMLElement>
+    const navRef = (forwardedRef ?? backupRef) as RefObject<HTMLElement | null>
     const listRef = useRef<HTMLUListElement>(null)
     const moreMenuRef = useRef<HTMLLIElement>(null)
     const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
@@ -286,19 +286,22 @@ export const UnderlineNav = forwardRef(
 
     useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
 
-    useResizeObserver((resizeObserverEntries: ResizeObserverEntry[]) => {
-      const navWidth = resizeObserverEntries[0].contentRect.width
-      const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
-      navWidth !== 0 &&
-        overflowEffect(
-          navWidth,
-          moreMenuWidth,
-          validChildren,
-          childWidthArray,
-          noIconChildWidthArray,
-          updateListAndMenu,
-        )
-    }, navRef as RefObject<HTMLElement>)
+    useResizeObserver(
+      (resizeObserverEntries: ResizeObserverEntry[]) => {
+        const navWidth = resizeObserverEntries[0].contentRect.width
+        const moreMenuWidth = moreMenuRef.current?.getBoundingClientRect().width ?? 0
+        navWidth !== 0 &&
+          overflowEffect(
+            navWidth,
+            moreMenuWidth,
+            validChildren,
+            childWidthArray,
+            noIconChildWidthArray,
+            updateListAndMenu,
+          )
+      },
+      navRef as RefObject<HTMLElement | null>,
+    )
 
     // Compute menuInlineStyles if needed
     let menuInlineStyles: React.CSSProperties = {...baseMenuInlineStyles}
diff --git a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
index 963f7c033f1..55cbef21af7 100644
--- a/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNavItem.tsx
@@ -53,7 +53,7 @@ export const UnderlineNavItem = forwardRef(
     forwardedRef,
   ) => {
     const backupRef = useRef<HTMLElement>(null)
-    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
+    const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement | null>
     const {setChildrenWidth, setNoIconChildrenWidth, loadingCounters, iconsVisible} = useContext(UnderlineNavContext)
 
     useLayoutEffect(() => {
diff --git a/packages/react/src/deprecated/DialogV1/Dialog.tsx b/packages/react/src/deprecated/DialogV1/Dialog.tsx
index b39af5aa2da..caad7a4ab2c 100644
--- a/packages/react/src/deprecated/DialogV1/Dialog.tsx
+++ b/packages/react/src/deprecated/DialogV1/Dialog.tsx
@@ -35,8 +35,8 @@ function DialogHeader({children, className, as: Component = 'div', ...rest}: Dia
 type InternalDialogProps = {
   isOpen?: boolean
   onDismiss?: () => void
-  initialFocusRef?: React.RefObject<HTMLElement>
-  returnFocusRef?: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  returnFocusRef?: React.RefObject<HTMLElement | null>
   as?: React.ElementType
 } & StyledDialogBaseProps &
   HTMLAttributes<HTMLDivElement>
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index f1fd2fcc16b..3e4e4d2c286 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -63,7 +63,7 @@ export type SelectPanelProps = {
 
   defaultOpen?: boolean
   open?: boolean
-  anchorRef?: React.RefObject<HTMLButtonElement>
+  anchorRef?: React.RefObject<HTMLButtonElement | null>
   anchoredPositionSettings?: Partial<PositionSettings>
 
   onCancel?: () => void
@@ -539,7 +539,13 @@ const SecondaryCheckbox: React.FC<CheckboxProps> = ({id, children, className, ..
 
   return (
     <div className={classes.SecondaryCheckbox}>
-      <Checkbox id={checkboxId} className={clsx(classes.Checkbox, className)} {...props} />
+      <Checkbox
+        id={checkboxId}
+        className={clsx(classes.Checkbox, className)}
+        {...props}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={props.ref}
+      />
       <InputLabel htmlFor={checkboxId} className={classes.SmallText}>
         {children}
       </InputLabel>
diff --git a/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx b/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
index df2d7a518e4..e7f37934aed 100644
--- a/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
+++ b/packages/react/src/experimental/Tabs/Tabs.examples.stories.tsx
@@ -17,7 +17,13 @@ const CustomTabList = (props: React.PropsWithChildren) => {
 
   return (
     <div style={{width: '200px'}}>
-      <ActionList {...tabListProps}>{props.children}</ActionList>
+      <ActionList
+        {...tabListProps}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={tabListProps.ref}
+      >
+        {props.children}
+      </ActionList>
     </div>
   )
 }
diff --git a/packages/react/src/experimental/Tabs/Tabs.tsx b/packages/react/src/experimental/Tabs/Tabs.tsx
index 71fe02c0e4b..6bfbef67792 100644
--- a/packages/react/src/experimental/Tabs/Tabs.tsx
+++ b/packages/react/src/experimental/Tabs/Tabs.tsx
@@ -105,7 +105,7 @@ type TabListProps = Labelled & React.HTMLAttributes<HTMLElement>
 function useTabList<T extends HTMLElement>(
   props: TabListProps & {
     /** Optional ref to use for the tablist. If none is provided, one will be generated automatically */
-    ref?: React.RefObject<T>
+    ref?: React.RefObject<T | null>
   },
 ): {
   /** Props to be spread onto the tablist element */
@@ -114,7 +114,7 @@ function useTabList<T extends HTMLElement>(
     'aria-orientation': AriaAttributes['aria-orientation']
     'aria-label': AriaAttributes['aria-label']
     'aria-labelledby': AriaAttributes['aria-labelledby']
-    ref: React.RefObject<T>
+    ref: React.RefObject<T | null>
     role: 'tablist'
   }
 } {
@@ -186,7 +186,12 @@ function TabList({children, ...rest}: TabListProps) {
   const {tabListProps} = useTabList<HTMLDivElement>(rest)
 
   return (
-    <div {...rest} {...tabListProps}>
+    <div
+      {...rest}
+      {...tabListProps}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={tabListProps.ref}
+    >
       {children}
     </div>
   )
diff --git a/packages/react/src/hooks/useAnchoredPosition.ts b/packages/react/src/hooks/useAnchoredPosition.ts
index e4e54f61c51..32777aad1d7 100644
--- a/packages/react/src/hooks/useAnchoredPosition.ts
+++ b/packages/react/src/hooks/useAnchoredPosition.ts
@@ -6,8 +6,8 @@ import {useResizeObserver} from './useResizeObserver'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export interface AnchoredPositionHookSettings extends Partial<PositionSettings> {
-  floatingElementRef?: React.RefObject<Element>
-  anchorElementRef?: React.RefObject<Element>
+  floatingElementRef?: React.RefObject<Element | null>
+  anchorElementRef?: React.RefObject<Element | null>
   pinPosition?: boolean
   onPositionChange?: (position: AnchorPosition | undefined) => void
 }
@@ -25,8 +25,8 @@ export function useAnchoredPosition(
   settings?: AnchoredPositionHookSettings,
   dependencies: React.DependencyList = [],
 ): {
-  floatingElementRef: React.RefObject<Element>
-  anchorElementRef: React.RefObject<Element>
+  floatingElementRef: React.RefObject<Element | null>
+  anchorElementRef: React.RefObject<Element | null>
   position: AnchorPosition | undefined
 } {
   const floatingElementRef = useProvidedRefOrCreate(settings?.floatingElementRef)
@@ -98,7 +98,7 @@ export function useAnchoredPosition(
   useLayoutEffect(updatePosition, [updatePosition])
 
   useResizeObserver(updatePosition) // watches for changes in window size
-  useResizeObserver(updatePosition, floatingElementRef as React.RefObject<HTMLElement>) // watches for changes in floating element size
+  useResizeObserver(updatePosition, floatingElementRef as React.RefObject<HTMLElement | null>) // watches for changes in floating element size
 
   return {
     floatingElementRef,
diff --git a/packages/react/src/hooks/useDetails.tsx b/packages/react/src/hooks/useDetails.tsx
index 17e1daf6b87..fc6a3d5dd8c 100644
--- a/packages/react/src/hooks/useDetails.tsx
+++ b/packages/react/src/hooks/useDetails.tsx
@@ -1,7 +1,7 @@
 import {useCallback, useEffect, useState, useRef} from 'react'
 
 type UseDetailsParameters = {
-  ref?: React.RefObject<HTMLDetailsElement>
+  ref?: React.RefObject<HTMLDetailsElement | null>
   closeOnOutsideClick?: boolean
   defaultOpen?: boolean
   onClickOutside?: (event: MouseEvent) => void
diff --git a/packages/react/src/hooks/useDialog.ts b/packages/react/src/hooks/useDialog.ts
index f744d3aa500..4a91b3c56c9 100644
--- a/packages/react/src/hooks/useDialog.ts
+++ b/packages/react/src/hooks/useDialog.ts
@@ -13,13 +13,13 @@ function focusable(el: Element) {
 }
 
 type UseDialogParameters = {
-  modalRef: React.RefObject<HTMLElement>
-  overlayRef: React.RefObject<HTMLElement>
+  modalRef: React.RefObject<HTMLElement | null>
+  overlayRef: React.RefObject<HTMLElement | null>
   isOpen?: boolean
   onDismiss?: () => void
-  initialFocusRef?: React.RefObject<HTMLElement>
-  closeButtonRef?: React.RefObject<HTMLElement>
-  returnFocusRef?: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  closeButtonRef?: React.RefObject<HTMLElement | null>
+  returnFocusRef?: React.RefObject<HTMLElement | null>
 }
 
 function useDialog({
diff --git a/packages/react/src/hooks/useFocusTrap.ts b/packages/react/src/hooks/useFocusTrap.ts
index 62fbc68e636..ab599d7fb92 100644
--- a/packages/react/src/hooks/useFocusTrap.ts
+++ b/packages/react/src/hooks/useFocusTrap.ts
@@ -7,13 +7,13 @@ export interface FocusTrapHookSettings {
    * Ref that will be used for the trapping container. If not provided, one will
    * be created by this hook and returned.
    */
-  containerRef?: React.RefObject<HTMLElement>
+  containerRef?: React.RefObject<HTMLElement | null>
 
   /**
    * Ref for the element that should receive focus when the focus trap is first enabled. If
    * not provided, one will be created by this hook and returned. Its use is optional.
    */
-  initialFocusRef?: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
 
   /**
    * Set to true to disable the focus trap and clean up listeners. Can be re-enabled at
@@ -33,7 +33,7 @@ export interface FocusTrapHookSettings {
    *
    * Overrides restoreFocusOnCleanUp
    */
-  returnFocusRef?: React.RefObject<HTMLElement>
+  returnFocusRef?: React.RefObject<HTMLElement | null>
 }
 
 /**
@@ -44,7 +44,7 @@ export interface FocusTrapHookSettings {
 export function useFocusTrap(
   settings?: FocusTrapHookSettings,
   dependencies: React.DependencyList = [],
-): {containerRef: React.RefObject<HTMLElement>; initialFocusRef: React.RefObject<HTMLElement>} {
+): {containerRef: React.RefObject<HTMLElement | null>; initialFocusRef: React.RefObject<HTMLElement | null>} {
   const containerRef = useProvidedRefOrCreate(settings?.containerRef)
   const initialFocusRef = useProvidedRefOrCreate(settings?.initialFocusRef)
   const disabled = settings?.disabled
diff --git a/packages/react/src/hooks/useFocusZone.ts b/packages/react/src/hooks/useFocusZone.ts
index 71b49a01708..a4e5a7bce4d 100644
--- a/packages/react/src/hooks/useFocusZone.ts
+++ b/packages/react/src/hooks/useFocusZone.ts
@@ -10,13 +10,13 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
    * Optional ref for the container that holds all elements participating in arrow key focus.
    * If one is not passed, we will create one for you and return it from the hook.
    */
-  containerRef?: React.RefObject<HTMLElement>
+  containerRef?: React.RefObject<HTMLElement | null>
 
   /**
    * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
    * element. If a ref object is not passed, we will create one for you.
    */
-  activeDescendantFocus?: boolean | React.RefObject<HTMLElement>
+  activeDescendantFocus?: boolean | React.RefObject<HTMLElement | null>
 
   /**
    * Set to true to disable the focus zone and clean up listeners. Can be re-enabled at
@@ -28,7 +28,10 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
 export function useFocusZone(
   settings: FocusZoneHookSettings = {},
   dependencies: React.DependencyList = [],
-): {containerRef: React.RefObject<HTMLElement>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
+): {
+  containerRef: React.RefObject<HTMLElement | null>
+  activeDescendantControlRef: React.RefObject<HTMLElement | null>
+} {
   const containerRef = useProvidedRefOrCreate(settings.containerRef)
   const useActiveDescendant = !!settings.activeDescendantFocus
   const passedActiveDescendantRef =
diff --git a/packages/react/src/hooks/useMenuInitialFocus.ts b/packages/react/src/hooks/useMenuInitialFocus.ts
index 3897796d8a0..20e0af08292 100644
--- a/packages/react/src/hooks/useMenuInitialFocus.ts
+++ b/packages/react/src/hooks/useMenuInitialFocus.ts
@@ -3,8 +3,8 @@ import {iterateFocusableElements} from '@primer/behaviors/utils'
 
 export const useMenuInitialFocus = (
   open: boolean,
-  containerRef?: React.RefObject<HTMLElement>,
-  anchorRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
+  anchorRef?: React.RefObject<HTMLElement | null>,
 ) => {
   /**
    * We need to pick the first element to focus based on how the menu was opened,
diff --git a/packages/react/src/hooks/useMenuKeyboardNavigation.ts b/packages/react/src/hooks/useMenuKeyboardNavigation.ts
index 96150189354..16192f2e228 100644
--- a/packages/react/src/hooks/useMenuKeyboardNavigation.ts
+++ b/packages/react/src/hooks/useMenuKeyboardNavigation.ts
@@ -14,8 +14,8 @@ import type {MenuCloseHandler} from '../ActionMenu'
 export const useMenuKeyboardNavigation = (
   open: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef?: React.RefObject<HTMLElement>,
-  anchorRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
+  anchorRef?: React.RefObject<HTMLElement | null>,
   isSubmenu: boolean = false,
 ) => {
   useMenuInitialFocus(open, containerRef, anchorRef)
@@ -32,8 +32,8 @@ export const useMenuKeyboardNavigation = (
 const useCloseMenuOnTab = (
   open: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef?: React.RefObject<HTMLElement>,
-  anchorRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
+  anchorRef?: React.RefObject<HTMLElement | null>,
 ) => {
   React.useEffect(() => {
     const container = containerRef?.current
@@ -59,7 +59,7 @@ const useCloseSubmenuOnArrow = (
   open: boolean,
   isSubmenu: boolean,
   onClose: MenuCloseHandler | undefined,
-  containerRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
 ) => {
   React.useEffect(() => {
     const container = containerRef?.current
@@ -81,8 +81,8 @@ const useCloseSubmenuOnArrow = (
  */
 const useMoveFocusToMenuItem = (
   open: boolean,
-  containerRef?: React.RefObject<HTMLElement>,
-  anchorRef?: React.RefObject<HTMLElement>,
+  containerRef?: React.RefObject<HTMLElement | null>,
+  anchorRef?: React.RefObject<HTMLElement | null>,
 ) => {
   React.useEffect(() => {
     const container = containerRef?.current
diff --git a/packages/react/src/hooks/useMnemonics.ts b/packages/react/src/hooks/useMnemonics.ts
index 7c417a3c267..7f79e67001d 100644
--- a/packages/react/src/hooks/useMnemonics.ts
+++ b/packages/react/src/hooks/useMnemonics.ts
@@ -8,7 +8,7 @@ import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
  * typically appearing in a menu title, menu item, or the text of a button.
  */
 
-export const useMnemonics = (open: boolean, providedRef?: React.RefObject<HTMLElement>) => {
+export const useMnemonics = (open: boolean, providedRef?: React.RefObject<HTMLElement | null>) => {
   const containerRef = useProvidedRefOrCreate(providedRef)
 
   React.useEffect(
diff --git a/packages/react/src/hooks/useOnOutsideClick.tsx b/packages/react/src/hooks/useOnOutsideClick.tsx
index 36dab73bdf9..7bbf341aa71 100644
--- a/packages/react/src/hooks/useOnOutsideClick.tsx
+++ b/packages/react/src/hooks/useOnOutsideClick.tsx
@@ -5,8 +5,8 @@ export type TouchOrMouseEvent = MouseEvent | TouchEvent
 type TouchOrMouseEventCallback = (event: TouchOrMouseEvent) => boolean | undefined
 
 export type UseOnOutsideClickSettings = {
-  containerRef: React.RefObject<HTMLDivElement> | React.RefObject<HTMLUListElement>
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
+  containerRef: React.RefObject<HTMLDivElement | null> | React.RefObject<HTMLUListElement | null>
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
   onClickOutside: (e: TouchOrMouseEvent) => void
 }
 
diff --git a/packages/react/src/hooks/useOpenAndCloseFocus.ts b/packages/react/src/hooks/useOpenAndCloseFocus.ts
index 06cccfe0f2f..fd804b30b7b 100644
--- a/packages/react/src/hooks/useOpenAndCloseFocus.ts
+++ b/packages/react/src/hooks/useOpenAndCloseFocus.ts
@@ -3,9 +3,9 @@ import {useEffect} from 'react'
 import {iterateFocusableElements} from '@primer/behaviors/utils'
 
 export type UseOpenAndCloseFocusSettings = {
-  initialFocusRef?: React.RefObject<HTMLElement>
-  containerRef: React.RefObject<HTMLElement>
-  returnFocusRef: React.RefObject<HTMLElement>
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  containerRef: React.RefObject<HTMLElement | null>
+  returnFocusRef: React.RefObject<HTMLElement | null>
   preventFocusOnOpen?: boolean
 }
 
diff --git a/packages/react/src/hooks/useOverflow.ts b/packages/react/src/hooks/useOverflow.ts
index 0c394d095e5..9443124fdd2 100644
--- a/packages/react/src/hooks/useOverflow.ts
+++ b/packages/react/src/hooks/useOverflow.ts
@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-export function useOverflow<T extends HTMLElement>(ref: React.RefObject<T>) {
+export function useOverflow<T extends HTMLElement>(ref: React.RefObject<T | null>) {
   const [hasOverflow, setHasOverflow] = useState(false)
 
   useEffect(() => {
diff --git a/packages/react/src/hooks/useOverlay.tsx b/packages/react/src/hooks/useOverlay.tsx
index 41fb3fc73a2..888c0dd002c 100644
--- a/packages/react/src/hooks/useOverlay.tsx
+++ b/packages/react/src/hooks/useOverlay.tsx
@@ -5,17 +5,17 @@ import {useOnEscapePress} from './useOnEscapePress'
 import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 
 export type UseOverlaySettings = {
-  ignoreClickRefs?: React.RefObject<HTMLElement>[]
-  initialFocusRef?: React.RefObject<HTMLElement>
-  returnFocusRef: React.RefObject<HTMLElement>
+  ignoreClickRefs?: React.RefObject<HTMLElement | null>[]
+  initialFocusRef?: React.RefObject<HTMLElement | null>
+  returnFocusRef: React.RefObject<HTMLElement | null>
   onEscape: (e: KeyboardEvent) => void
   onClickOutside: (e: TouchOrMouseEvent) => void
-  overlayRef?: React.RefObject<HTMLDivElement>
+  overlayRef?: React.RefObject<HTMLDivElement | null>
   preventFocusOnOpen?: boolean
 }
 
 export type OverlayReturnProps = {
-  ref: React.RefObject<HTMLDivElement>
+  ref: React.RefObject<HTMLDivElement | null>
 }
 
 export const useOverlay = ({
diff --git a/packages/react/src/hooks/useProvidedRefOrCreate.ts b/packages/react/src/hooks/useProvidedRefOrCreate.ts
index b9fa481232d..bfd209cbde2 100644
--- a/packages/react/src/hooks/useProvidedRefOrCreate.ts
+++ b/packages/react/src/hooks/useProvidedRefOrCreate.ts
@@ -8,7 +8,7 @@ import React from 'react'
  * @param providedRef The ref to use - if undefined, will use the ref from a call to React.useRef
  * @type TRef The type of the RefObject which should be created.
  */
-export function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef>): React.RefObject<TRef> {
+export function useProvidedRefOrCreate<TRef>(providedRef?: React.RefObject<TRef | null>): React.RefObject<TRef | null> {
   const createdRef = React.useRef<TRef>(null)
   return providedRef ?? createdRef
 }
diff --git a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
index ccaa0e8e048..11becf147d7 100644
--- a/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
+++ b/packages/react/src/hooks/useRefObjectAsForwardedRef.ts
@@ -8,6 +8,6 @@ import {useImperativeHandle} from 'react'
  *
  * **NOTE**: The `refObject` should be passed to the underlying element, NOT the `forwardedRef`.
  */
-export function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T>): void {
+export function useRefObjectAsForwardedRef<T>(forwardedRef: ForwardedRef<T>, refObject: RefObject<T | null>): void {
   useImperativeHandle<T | null, T | null>(forwardedRef, () => refObject.current)
 }
diff --git a/packages/react/src/hooks/useRenderForcingRef.ts b/packages/react/src/hooks/useRenderForcingRef.ts
index a3e86d015e2..35ee4ce0665 100644
--- a/packages/react/src/hooks/useRenderForcingRef.ts
+++ b/packages/react/src/hooks/useRenderForcingRef.ts
@@ -23,5 +23,5 @@ export function useRenderForcingRef<TRef>(value?: TRef) {
     ref.current = refCurrent
   }, [refCurrent])
 
-  return [ref as RefObject<TRef>, setRef] as const
+  return [ref as RefObject<TRef | null>, setRef] as const
 }
diff --git a/packages/react/src/hooks/useResizeObserver.ts b/packages/react/src/hooks/useResizeObserver.ts
index c170fa5478e..704673af082 100644
--- a/packages/react/src/hooks/useResizeObserver.ts
+++ b/packages/react/src/hooks/useResizeObserver.ts
@@ -11,7 +11,7 @@ export interface ResizeObserverEntry {
 
 export function useResizeObserver<T extends HTMLElement>(
   callback: ResizeObserverCallback,
-  target?: RefObject<T>,
+  target?: RefObject<T | null>,
   depsArray: unknown[] = [],
 ) {
   const [targetClientRect, setTargetClientRect] = useState<DOMRect | null>(null)
diff --git a/packages/react/src/hooks/useScrollFlash.ts b/packages/react/src/hooks/useScrollFlash.ts
index ad8e211d42d..a22658826a6 100644
--- a/packages/react/src/hooks/useScrollFlash.ts
+++ b/packages/react/src/hooks/useScrollFlash.ts
@@ -4,7 +4,7 @@ import {useEffect} from 'react'
  * This hook will flash the scrollbars for a ref of a container that has scrollable overflow
  * @param scrollContainerRef The ref of the scrollable content
  */
-export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLElement>) {
+export default function useScrollFlash(scrollContainerRef: React.RefObject<HTMLElement | null>) {
   // https://adxlv.computer/projects/flash-scrollers/
   useEffect(() => {
     const scrollContainer = scrollContainerRef.current
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
index 7516a0cd4f1..f7c13f7482b 100644
--- a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
+++ b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -17,7 +17,7 @@ type UnderlineWrapperProps<As extends React.ElementType> = {
   slot?: string
   as?: As
   className?: string
-  ref?: React.Ref<HTMLElement>
+  ref?: React.Ref<HTMLElement | null>
 }
 
 export const UnderlineWrapper = forwardRef((props, ref) => {
diff --git a/packages/react/src/internal/hooks/useFocus.ts b/packages/react/src/internal/hooks/useFocus.ts
index 5ca0f4598c1..41f19988767 100644
--- a/packages/react/src/internal/hooks/useFocus.ts
+++ b/packages/react/src/internal/hooks/useFocus.ts
@@ -1,7 +1,7 @@
 import {type RefObject, useEffect, useState} from 'react'
 
 export function useFocus() {
-  const [focusTarget, setFocusTarget] = useState<HTMLElement | RefObject<HTMLElement> | null>(null)
+  const [focusTarget, setFocusTarget] = useState<HTMLElement | RefObject<HTMLElement | null> | null>(null)
 
   useEffect(() => {
     if (focusTarget === null) {
diff --git a/packages/react/src/stories/useAnchoredPosition.stories.tsx b/packages/react/src/stories/useAnchoredPosition.stories.tsx
index b312d8a5348..d9e6de02b9b 100644
--- a/packages/react/src/stories/useAnchoredPosition.stories.tsx
+++ b/packages/react/src/stories/useAnchoredPosition.stories.tsx
@@ -137,7 +137,8 @@ export const UseAnchoredPosition = (args: any) => {
         left={args.anchorX ?? 0}
         width={args.anchorWidth}
         height={args.anchorHeight}
-        ref={anchorElementRef as React.RefObject<HTMLDivElement>}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={anchorElementRef as React.RefObject<HTMLDivElement | null>}
       >
         Anchor Element
       </Anchor>
@@ -146,7 +147,8 @@ export const UseAnchoredPosition = (args: any) => {
         left={position?.left ?? 0}
         width={args.floatWidth ?? 150}
         height={args.floatHeight ?? 150}
-        ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
       >
         Floating element
       </Float>
@@ -160,9 +162,14 @@ export const CenteredOnScreen = () => {
   })
   // The outer Position element simply fills all available space
   return (
-    <div className={classes.FullSizeAnchor} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
+    <div
+      className={classes.FullSizeAnchor}
+      // @ts-expect-error [react-19] [TS2322]
+      ref={anchorElementRef as React.RefObject<HTMLDivElement | null>}
+    >
       <Float
-        ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+        // @ts-expect-error [react-19] [TS2322]
+        ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
         top={position?.top ?? 0}
         left={position?.left ?? 0}
       >
@@ -205,7 +212,8 @@ export const ComplexAncestry = () => {
               left={position?.left ?? 0}
               width={150}
               height={220}
-              ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+              // @ts-expect-error [react-19] [TS2322]
+              ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
             >
               Floating element
             </Float>
@@ -214,7 +222,11 @@ export const ComplexAncestry = () => {
         <div className={classes.TallContainer}>
           Anchor element container. This element is really tall to demonstrate behavior within a scrollable clipping
           container.
-          <div className={classes.AnchorElement} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
+          <div
+            className={classes.AnchorElement}
+            // @ts-expect-error [react-19] [TS2322]
+            ref={anchorElementRef as React.RefObject<HTMLDivElement | null>}
+          >
             Anchor Element
           </div>
         </div>
@@ -288,13 +300,19 @@ export const WithPortal = () => {
           with <code>useAnchoredPosition</code>, we can break out of this constraint.
         </p>
         <div className={classes.ButtonContainer}>
-          <Button variant="primary" onClick={toggleMenu} ref={anchorElementRef as React.RefObject<HTMLButtonElement>}>
+          <Button
+            variant="primary"
+            onClick={toggleMenu}
+            // @ts-expect-error [react-19] [TS2322]
+            ref={anchorElementRef as React.RefObject<HTMLButtonElement | null>}
+          >
             Show the overlay!
           </Button>
           {showMenu ? (
             <Portal>
               <Float
-                ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+                // @ts-expect-error [react-19] [TS2322]
+                ref={floatingElementRef as React.RefObject<HTMLDivElement | null>}
                 style={{top: `${position?.top ?? 0}px`, left: `${position?.left ?? 0}px`}}
                 width={250}
                 height={400}
diff --git a/packages/react/src/stories/useFocusTrap.stories.tsx b/packages/react/src/stories/useFocusTrap.stories.tsx
index 6df61bdf5e6..f762ccd163e 100644
--- a/packages/react/src/stories/useFocusTrap.stories.tsx
+++ b/packages/react/src/stories/useFocusTrap.stories.tsx
@@ -59,7 +59,11 @@ export const FocusTrap = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.TrapZone} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZone}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.</strong>
           <Stack direction="vertical" gap="normal">
             <MarginButton>Durian</MarginButton>
@@ -102,7 +106,11 @@ export const RestoreFocus = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.TrapZone} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZone}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.</strong>
           <Stack direction="vertical" gap="normal">
             <MarginButton>Durian</MarginButton>
@@ -150,11 +158,20 @@ export const CustomInitialFocus = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.TrapZone} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZone}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.</strong>
           <Stack direction="vertical" gap="normal">
             <MarginButton>Durian</MarginButton>
-            <MarginButton ref={initialFocusRef as React.RefObject<HTMLButtonElement>}>Elderberry</MarginButton>
+            <MarginButton
+              // @ts-expect-error [react-19] [TS2322]
+              ref={initialFocusRef as React.RefObject<HTMLButtonElement | null>}
+            >
+              Elderberry
+            </MarginButton>
             <MarginButton>Fig</MarginButton>
           </Stack>
         </div>
@@ -217,7 +234,11 @@ export const DynamicFocusTrapContents = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.TrapZone} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZone}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Trap zone! Press SPACE to {trapEnabled ? 'deactivate' : 'activate'}.</strong>
           <Stack direction="vertical" gap="normal">
             <ToggleableButton name="Durian"></ToggleableButton>
@@ -287,7 +308,11 @@ export const MultipleFocusTraps = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.TrapZoneSmall} ref={containerRef1 as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZoneSmall}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef1 as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>
             Trap zone ({trapEnabled1 ? 'enabled' : 'disabled'})! Press <code>1</code> to toggle.
           </strong>
@@ -300,7 +325,11 @@ export const MultipleFocusTraps = () => {
         <MarginButton>Grapefruit</MarginButton>
         <MarginButton>Honeydew</MarginButton>
         <MarginButton>Jackfruit</MarginButton>
-        <div className={classes.TrapZoneSmall} ref={containerRef2 as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.TrapZoneSmall}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef2 as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>
             Trap zone ({trapEnabled2 ? 'enabled' : 'disabled'})! Press <code>2</code> to toggle.
           </strong>
diff --git a/packages/react/src/stories/useFocusZone.stories.tsx b/packages/react/src/stories/useFocusZone.stories.tsx
index d602d164e06..d406d45a960 100644
--- a/packages/react/src/stories/useFocusZone.stories.tsx
+++ b/packages/react/src/stories/useFocusZone.stories.tsx
@@ -42,7 +42,11 @@ export const BasicFocusZone = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.BorderedContainer} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Use Up Arrow, Down Arrow, Home, and End to move focus within this box.</strong>
           <div className={classes.FlexColumnContainer}>
             <MarginButton>Durian</MarginButton>
@@ -81,7 +85,11 @@ export const FocusOutBehavior = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.BorderedContainer} ref={containerRef1 as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef1 as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>
             Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends.
           </strong>
@@ -92,7 +100,11 @@ export const FocusOutBehavior = () => {
             <MarginButton>Fig</MarginButton>
           </div>
         </div>
-        <div className={classes.BorderedContainer} ref={containerRef2 as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef2 as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular.</strong>
 
           <div className={classes.FlexRowContainer}>
@@ -181,7 +193,11 @@ export const CustomFocusMovement = () => {
 
         <div className={classes.BorderedContainer}>
           <strong>Use arrow keys to move focus within this box.</strong>
-          <div className={classes.GridContainer} ref={containerRef as React.RefObject<HTMLDivElement>}>
+          <div
+            className={classes.GridContainer}
+            // @ts-expect-error [react-19] [TS2322]
+            ref={containerRef as React.RefObject<HTMLDivElement | null>}
+          >
             <MarginButton>Banana</MarginButton>
             <MarginButton>Cantaloupe</MarginButton>
             <MarginButton>Durian</MarginButton>
@@ -243,7 +259,11 @@ export const FocusInStrategy = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.BorderedContainer} ref={firstContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={firstContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>&ldquo;First&rdquo; strategy (focus first focusable element)</strong>
           <div className={classes.FlexRowContainer}>
             <MarginButton>Banana</MarginButton>
@@ -251,7 +271,11 @@ export const FocusInStrategy = () => {
             <MarginButton>Durian</MarginButton>
           </div>
         </div>
-        <div className={classes.BorderedContainer} ref={closestContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={closestContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>&ldquo;Closest&rdquo; strategy (focus first or last depending on focus direction)</strong>
           <div className={classes.FlexRowContainer}>
             <MarginButton>Elderberry</MarginButton>
@@ -259,7 +283,11 @@ export const FocusInStrategy = () => {
             <MarginButton>Grapefruit</MarginButton>
           </div>
         </div>
-        <div className={classes.BorderedContainer} ref={prevContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={prevContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>&ldquo;Previous&rdquo; strategy (most recently focused element)</strong>
           <div className={classes.FlexRowContainer}>
             <MarginButton>Honeydew</MarginButton>
@@ -267,7 +295,11 @@ export const FocusInStrategy = () => {
             <MarginButton>Kiwi</MarginButton>
           </div>
         </div>
-        <div className={classes.BorderedContainer} ref={customContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={customContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>&ldquo;Custom&rdquo; strategy (choose randomly for this example)</strong>
           <div className={classes.FlexRowContainer}>
             <MarginButton>Lemon</MarginButton>
@@ -316,7 +348,11 @@ export const SpecialSituations = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.BorderedContainer} ref={vContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={vContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong id="focus-label">Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab</strong>
           <div className={classes.FlexColumnContainer}>
             <input
@@ -339,7 +375,11 @@ export const SpecialSituations = () => {
             ></textarea>
           </div>
         </div>
-        <div className={classes.BorderedContainer} ref={hContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={hContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <label htmlFor="focus-input">
             <strong>Use Left Arrow and Right Arrow to move focus within this box. Focus is circular.</strong>
           </label>
@@ -400,7 +440,11 @@ export const ChangingSubtree = () => {
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
         <MarginButton>Cantaloupe</MarginButton>
-        <div className={classes.BorderedContainer} ref={containerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={containerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Bound keys: Arrow Up and Arrow Down</strong>
           <div className={classes.FlexColumnContainer}>{buttons}</div>
         </div>
@@ -439,11 +483,19 @@ export const NestedZones = () => {
         <div className={classes.AbsoluteTopRight}>Last key pressed: {lastKey}</div>
         <MarginButton>Apple</MarginButton>
         <MarginButton>Banana</MarginButton>
-        <div className={classes.BorderedContainer} ref={outerContainerRef as React.RefObject<HTMLDivElement>}>
+        <div
+          className={classes.BorderedContainer}
+          // @ts-expect-error [react-19] [TS2322]
+          ref={outerContainerRef as React.RefObject<HTMLDivElement | null>}
+        >
           <strong>Bound keys: Arrow Up and Arrow Down</strong>
           <br />
           <MarginButton>Cantaloupe</MarginButton>
-          <div className={classes.BorderedContainer} ref={innerContainerRef as React.RefObject<HTMLDivElement>}>
+          <div
+            className={classes.BorderedContainer}
+            // @ts-expect-error [react-19] [TS2322]
+            ref={innerContainerRef as React.RefObject<HTMLDivElement | null>}
+          >
             <strong>Additional Bound keys: Arrow Left and Arrow Right</strong>
             <div className={classes.FlexColumnContainer} id="list">
               <MarginButton>Durian</MarginButton>
@@ -504,7 +556,8 @@ export const ActiveDescendant = () => {
           </label>
           <div className={classes.FlexColumnContainer}>
             <input
-              ref={controllingElementRef as React.RefObject<HTMLInputElement>}
+              // @ts-expect-error [react-19] [TS2322]
+              ref={controllingElementRef as React.RefObject<HTMLInputElement | null>}
               type="text"
               defaultValue="Focus remains here."
               aria-controls="list"
@@ -513,7 +566,8 @@ export const ActiveDescendant = () => {
             <div
               className={classes.FlexColumnContainer}
               id="list"
-              ref={containerRef as React.RefObject<HTMLDivElement>}
+              // @ts-expect-error [react-19] [TS2322]
+              ref={containerRef as React.RefObject<HTMLDivElement | null>}
             >
               <MarginButton>Durian</MarginButton>
               <MarginButton>Elderberry</MarginButton>
diff --git a/script/setup-react-19.mts b/script/setup-react-19.mts
index ace7279d572..858403ef3d7 100644
--- a/script/setup-react-19.mts
+++ b/script/setup-react-19.mts
@@ -44,3 +44,16 @@ for (const packageJsonPath of packageJsonPaths) {
 }
 
 execSync('npm install', {stdio: 'inherit'})
+
+// Strip files of ts-expect-error comments that are no longer needed
+const comment = `// @ts-expect-error [react-19] [TS2322]`
+
+const files = glob.sync('packages/react/src/**/*.tsx', {
+  ignore: ['**/node_modules/**', '**/dist/**', '**/lib/**', '**/lib-esm/**', '**/.next/**', '**/storybook-static/**'],
+})
+
+for (const filepath of files) {
+  const contents = fs.readFileSync(filepath, 'utf8')
+  const updated = contents.replaceAll(comment, '')
+  fs.writeFileSync(filepath, updated, 'utf8')
+}
diff --git a/tsconfig.json b/tsconfig.json
index 5c091e4d3ae..b61152c3ffd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
   "include": [
     "@types/**/*.ts",
     "script/**/*.ts",
+    "script/**/*.mts",
     "e2e/**/*.ts",
     "playwright.config.ts"
   ]