Use MDXContext directly (#4267)

* Use MDXContext directly

* yolo

beta/src/components/Layout/LayoutPost.tsx

@@ -2,7 +2,8 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {MDXProvider} from '@mdx-js/react';
+// @ts-ignore
+import {MDXContext} from '@mdx-js/react';
 import recentPostsRouteTree from 'blogIndexRecent.json';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {ExternalLink} from 'components/ExternalLink';
@@ -87,7 +88,9 @@ function LayoutPost({meta, children}: LayoutPostProps) {
             </span>
           </p>
 
-          <MDXProvider components={MDXComponents}>{children}</MDXProvider>
+          <MDXContext.Provider value={MDXComponents}>
+            {children}
+          </MDXContext.Provider>
           <DocsPageFooter
             route={route}
             nextRoute={nextRoute}

beta/src/components/Layout/MarkdownPage.tsx

@@ -3,7 +3,8 @@
  */
 
 import * as React from 'react';
-import {MDXProvider} from '@mdx-js/react';
+// @ts-ignore
+import {MDXContext} from '@mdx-js/react';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {MDXComponents} from 'components/MDX/MDXComponents';
 import {Seo} from 'components/Seo';
@@ -135,9 +136,9 @@ export function MarkdownPage<
         )}
         <div className="px-5 sm:px-12">
           <div className="max-w-7xl mx-auto">
-            <MDXProvider components={MDXComponents}>
+            <MDXContext.Provider value={MDXComponents}>
               {finalChildren}
-            </MDXProvider>
+            </MDXContext.Provider>
           </div>
           <DocsPageFooter
             route={route}