diff --git a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
index 54df57ca385..88fef067919 100644
--- a/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
+++ b/packages/react/src/TextInputWithTokens/TextInputWithTokens.tsx
@@ -1,4 +1,4 @@
-import {FocusKeys} from '@primer/behaviors'
+import {FocusKeys, type Direction} from '@primer/behaviors'
 import {isFocusable} from '@primer/behaviors/utils'
 import {omit} from '@styled-system/props'
 import type {FocusEventHandler, KeyboardEventHandler, MouseEventHandler, RefObject} from 'react'
@@ -107,14 +107,14 @@ function TextInputWithTokensInnerComponent<TokenComponentType extends AnyReactCo
   useRefObjectAsForwardedRef(forwardedRef, ref)
   const [selectedTokenIndex, setSelectedTokenIndex] = useState<number | undefined>()
   const [tokensAreTruncated, setTokensAreTruncated] = useState<boolean>(Boolean(visibleTokenCount))
-  const {containerRef} = useFocusZone(
+  const {containerRef} = useFocusZone<HTMLDivElement>(
     {
       focusOutBehavior: 'wrap',
       bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
       focusableElementFilter: element => {
         return !element.getAttributeNames().includes('aria-hidden')
       },
-      getNextFocusable: direction => {
+      getNextFocusable: (direction: Direction, from?: Element, event?: KeyboardEvent): HTMLElement | undefined => {
         if (!selectedTokenIndex && selectedTokenIndex !== 0) {
           return undefined
         }
diff --git a/packages/react/src/hooks/useFocusZone.ts b/packages/react/src/hooks/useFocusZone.ts
index 71b49a01708..36604634670 100644
--- a/packages/react/src/hooks/useFocusZone.ts
+++ b/packages/react/src/hooks/useFocusZone.ts
@@ -5,12 +5,13 @@ import {useProvidedRefOrCreate} from './useProvidedRefOrCreate'
 export {FocusKeys} from '@primer/behaviors'
 export type {Direction} from '@primer/behaviors'
 
-export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
+export interface FocusZoneHookSettings<T extends HTMLElement = HTMLElement>
+  extends Omit<FocusZoneSettings, 'activeDescendantControl'> {
   /**
    * 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<T>
 
   /**
    * If using the "active descendant" focus pattern, pass `true` or a ref to the controlling
@@ -25,11 +26,11 @@ export interface FocusZoneHookSettings extends Omit<FocusZoneSettings, 'activeDe
   disabled?: boolean
 }
 
-export function useFocusZone(
-  settings: FocusZoneHookSettings = {},
+export function useFocusZone<T extends HTMLElement>(
+  settings: FocusZoneHookSettings<T> = {},
   dependencies: React.DependencyList = [],
-): {containerRef: React.RefObject<HTMLElement>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
-  const containerRef = useProvidedRefOrCreate(settings.containerRef)
+): {containerRef: React.RefObject<T>; activeDescendantControlRef: React.RefObject<HTMLElement>} {
+  const containerRef = useProvidedRefOrCreate<T>(settings.containerRef)
   const useActiveDescendant = !!settings.activeDescendantFocus
   const passedActiveDescendantRef =
     typeof settings.activeDescendantFocus === 'boolean' || !settings.activeDescendantFocus