React Component not rendering source content when is part of another component and warning

问题

I am using MDX to display a component and its contents. I was able to get help from a SO member to get things moving along, however when using MDX + Gatsby components are not rendering as expected. Here you can see a minimal project working:

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

<ShowHtml>
  <Test />
</ShowHtml>

using gatsby-browser.js we are able to provide the components through 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>;
};

Another thing to note is that a warning is displayed mentioning that the components are not being imported, and that is only for those that are being used as children:

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

来源：https://stackoverflow.com/questions/60309226/react-component-not-rendering-source-content-when-is-part-of-another-component-a