How to use the @mdx-js/react.useMDXComponents function in @mdx-js/react

export default ({
  code,
  scope = defaultScope,
  mdx,
  editable = true,
  className,
  ...props
}) => {
  const theme = useContext(ThemeContext)
  const components = useMDXComponents()

  const fullScope = { ...scope, ...components }
  delete fullScope.delete // TODO: Better handle this

  return (

module.exports = function MDXRenderer({
  scope,
  components,
  children,
  ...props
}) {
  const mdxComponents = useMDXComponents(components);
  const mdxScope = useMDXScope(scope);

  // Memoize the compiled component
  const End = React.useMemo(
    () => {
      if (!children) {
        return null;
      }

      const fullScope = {
        // React is here just in case the user doesn't pass them in
        // in a manual usage of the renderer
        React,
        mdx,
        ...mdxScope
      };

export function MDXRenderer({ scope, components, children, ...props }) {
  const mdxComponents = useMDXComponents(components);
  const mdxScope = useMDXScope(scope);

  if (!children) {
    return null;
  }

  const fullScope = {
    // React is here just in case the user doesn't pass them in
    // in a manual usage of the renderer
    React,
    mdx,
    ...mdxScope
  };

  // children is pre-compiled mdx
  children = children.replace(/_frontmatter: _frontmatter/gm, '');

export default ({ children, live, removeFragment }) => {
  const components = useMDXComponents();

  const liveProviderProps = {
    transformCode: code => (removeFragment ? code : `<>${code}`),
    scope: { mdx, ...components },
  };

  if (live) {
    return (