`RadioGroup` tab behavior incorrect when using `useFocusableGroup`

Expected Behavior

When using Fluent UI v9 RadioGroup with react-tabster's useFocusableGroup RadioGroup native tabbing and keyboard behavior should be preserved.

Observed Behavior

When using useFocusableGroup with RadioGroup the native tabbing and keyboard behavior is overridden in unexpected ways.

In particular, with Tabster:

1. Each option in RadioGroup is a tab stop (i.e., tab presses move between the options) when the RadioGroup should be a single tab stop.
   1. Options are only supposed to be navigable with the arrow keys when using the keyboard. Arrow keys still work with Tabster.
2. When RadioGroup has a selected option tabbing or shift-tabbing to the RadioGroup from a different focusable element focuses the first or last option in the RadioGroup respectively. It should focus the selected option.

Example

Codesandbox Example

Related Issues

Fluent UI v8's ChoiceGroup had a similar issue with FocusTrapZone.

• ChoiceGroup focus conflict when it's the first component inside a focus zone