React Component не отображает исходный контент, когда является частью другого компонента, и выдает предупреждение

Question

Я использую MDX для отображения компонента и его содержимого. Мне удалось получить помощь от члена SO, чтобы продвинуться вперед, однако при использовании компонентов MDX + Gatsby рендеринг не выполняется должным образом. Здесь вы можете увидеть минимальный рабочий проект:

https://codesandbox.io/s/gatsby-starter-mdx-basic-21mif

<ShowHtml>
  <Test />
</ShowHtml>

с помощью gatsby-browser. js мы можем предоставить компоненты через MDXProvider

import React from "react";
import { MDXProvider } from "@mdx-js/react";
import ShowHtml from "./src/components/ShowHtml/ShowHtml";
import Test from "./src/components/Test/Test";

const components = {
  ShowHtml,
  Test
};

export const wrapRootElement = ({ element }) => {
  return <MDXProvider components={components}>{element}</MDXProvider>;
};

Еще один момент, на который следует обратить внимание: отображается предупреждение о том, что компоненты не импортируются, и только для тех, которые используются в качестве дочерних:

Component Test was not imported, exported, or provided by MDXProvider as global scope