Вызов крюков внутри MDX

Question

Я документирую хук, который я создал с помощью MDX, и я хочу создать кнопку, которая - при нажатии - запускает этот хук.

По сути, мне нужно это

import { useMyHook } from './myHook';

# My hook
My hook is great. Check it out by clicking below:

{() => {
  const { triggerSomeAction } = useMyHook();
  return <button onClick={triggerSomeAction}>Click to demo</button>;
}}

Great right? It triggers some action when you click it!

По сути, я хочу создать встроенный компонент функции и вызвать его. Какой лучший способ добиться этого?

Я могу обернуть свое выражение в React.Fragment и вызвать React.createElement вручную, но это выглядит как грубая реализация.

Редактировать: Iможно улучшить его еще больше, создав компонент-оболочку InlineComponent и обернув в него свой код:

import { useMyHook } from './myHook';
import InlineComponent from './InlineComponent';

# My hook
My hook is great. Check it out by clicking below:

<InlineComponent>
  {() => {
    const { triggerSomeAction } = useMyHook();
    return <button onClick={triggerSomeAction}>Click to demo</button>;
  }}
</InlineComponent>

Great right? It triggers some action when you click it!

Реализация будет просто

const InlineComponent = ({ children }) => React.createElement(children);

Однако это выглядит такстранный обходной путь для чего-то, что может быть каким-то образом встроено в структуру MDX.