How to use Hotkeys in functional components?

export function App() {
	const [isDark, setIsDark] = React.useState(true);

	const switchTheme = () => {
		console.log(111);

		setIsDark(!isDark);
	};

	const getClass = () => {
		return classNames('menu', {
			'dark-theme': isDark,
			'light-theme': !isDark
		});
	};

	const renderHotkeys = () => {
		return (
			<Hotkeys>
				<Hotkey label="Switch Theme" combo="ctrl+shift+space" global={true} onKeyDown={switchTheme} />
			</Hotkeys>
		);
	};

	return (
		<div className={getClass()}>
			<Button className="switch-view-btn" icon={IconNames.MENU} onClick={switchView} intent={Intent.SUCCESS} />
			<UserBlock isFull={isFull} />
			<Menu className="a2-menu-ul" items={items} navigationItems={navItems} isFull={isFull} />
		</div>
	);
}

HotkeysTarget(App as any);

ReactDOM.render(<App />, document.getElementById('lmenu-holder'));

I have to cast App to any, because

Argument of type ‘() => Element’ is not assignable to parameter of type ‘IConstructor<IHotkeysTargetComponent>’. Type ‘() => Element’ provides no match for the signature ‘new (…args: any[]): IHotkeysTargetComponent’

And in my console i see message

[Blueprint] @HotkeysTarget-decorated class should implement renderHotkeys.

[ae-draft]

Are there plans to support this use case? React offers a new technology hooks, but they can not be used in classes.

[jtiagodev]

Having the same issue. Have my entire project using React hooks and unable to use this…