example.tsx

export default function FocusGroup() {
  const items = [1, 2, 3, 4, 5]
  const [selectedIndex, setSelectedIndex] = useState(0)
  
  const { 
    containerProps, 
    itemProps,
  } = useFocusGroup<HTMLButtonElement>(items, index => selectedIndex === index)

  return (
    <ul {...containerProps}>
      {items.map((item, index) => (
        <li key={index}>
          <button onClick={() => setSelectedIndex(index)} {...itemProps(index)}> 
            Button #{item}
          </button>
        </li>
      ))}
    </ul>
  )
}

useFocusGroup.ts

function useFocusGroup<E extends HTMLElement>(
  list: unknown[],
  isSelected: (index: number) => boolean,
) {
  const [focusedIndex, setFocusedIndex] = useState<number>(null)
  const refList = useMemo(() => list.map(() => React.createRef<E>()), [list])

  function tabIndex(index: number) {
    return isSelected(index) ? 0 : -1
  }

  function addRef(index: number) {
    return refList[index]!
  }

  function onContainerKeyDown(event: React.KeyboardEvent<any>) {
    if (focusedIndex === null) return

    if (event.key === 'ArrowUp') {
      setFocusedIndex(Math.max(focusedIndex - 1, 0))
    }

    if (event.key === 'ArrowDown') {
      setFocusedIndex(Math.min(focusedIndex + 1, list.length))
    }
  }

  function onContainerFocus() {
    if (focusedIndex === null) {
      setFocusedIndex(0)
    }
  }

  function activeElementIsOneOfOurs() {
    return refList.map<any>(ref => ref.current).includes(document.activeElement)
  }

  useEffect(() => {
    if (!activeElementIsOneOfOurs()) return
    if (focusedIndex === null || !refList[focusedIndex]) return
    const currentRef = refList[focusedIndex].current

    if (!currentRef) return
    currentRef.focus()
  }, [refList, focusedIndex])

  return {
    containerProps: { onKeyDown: onContainerKeyDown, onFocus: onContainerFocus },
    itemProps: (index: number) => ({ tabIndex: tabIndex(index), ref: addRef(index) }),
  }
}