How to use the @wordpress/compose.useKeyboardShortcut function in @wordpress/compose

const selectedIndex = regions.indexOf( document.activeElement );
				if ( selectedIndex !== -1 ) {
					let nextIndex = selectedIndex + offset;
					nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
					nextIndex = nextIndex === regions.length ? 0 : nextIndex;
					nextRegion = regions[ nextIndex ];
				}

				nextRegion.focus();
				setIsFocusingRegions( true );
			}
			const focusPrevious = useCallback( () => focusRegion( -1 ), [ container ] );
			const focusNext = useCallback( () => focusRegion( 1 ), [ container ] );

			useKeyboardShortcut( shortcuts.previous, focusPrevious, { bindGlobal: true } );
			useKeyboardShortcut( shortcuts.next, focusNext, { bindGlobal: true } );

			// Disable reason: Clicking the editor should dismiss the regions focus style
			/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
			return (
				<div> setIsFocusingRegions( false ) }
				&gt;
					
				</div>
			);
			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
		};
	}, 'navigateRegions'

let nextRegion = regions[ 0 ];
				const selectedIndex = regions.indexOf( document.activeElement );
				if ( selectedIndex !== -1 ) {
					let nextIndex = selectedIndex + offset;
					nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex;
					nextIndex = nextIndex === regions.length ? 0 : nextIndex;
					nextRegion = regions[ nextIndex ];
				}

				nextRegion.focus();
				setIsFocusingRegions( true );
			}
			const focusPrevious = useCallback( () => focusRegion( -1 ), [ container ] );
			const focusNext = useCallback( () => focusRegion( 1 ), [ container ] );

			useKeyboardShortcut( shortcuts.previous, focusPrevious, { bindGlobal: true } );
			useKeyboardShortcut( shortcuts.next, focusNext, { bindGlobal: true } );

			// Disable reason: Clicking the editor should dismiss the regions focus style
			/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
			return (
				<div> setIsFocusingRegions( false ) }
				&gt;
					
				</div>
			);
			/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
		};
	}, 'navigateRegions'

return {
			combination: select( 'core/keyboard-shortcuts' ).getShortcutKeyCombination( name ),
			aliases: select( 'core/keyboard-shortcuts' ).getShortcutAliases( name ),
		};
	}, [ name ] );

	const shortcutKeys = useMemo( () => {
		const shortcuts = compact( [ combination, ...aliases ] );
		return shortcuts.map( ( shortcut ) => {
			return shortcut.modifier ?
				rawShortcut[ shortcut.modifier ]( shortcut.character ) :
				shortcut.character;
		} );
	}, [ combination, aliases ] );

	useKeyboardShortcut( shortcutKeys, callback, options );
}

function KeyboardShortcut( { target, callback, shortcut, bindGlobal, eventName } ) {
	useKeyboardShortcut( shortcut, callback, {
		bindGlobal,
		target,
		eventName,
	} );

	return null;
}