Вызов хуков внутри 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 на нем вручную, но это похоже на грубую реализацию.

Изменить: я могу улучшить его еще больше, создав компонент-оболочку, 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.