fix: fix MDX handling in Page compoment

gatsby-node.mjs

@@ -49,10 +49,10 @@ export const createPages = async ({
   const allEdges = results.data.allMdx.edges;
 
   const blogEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "posts"
+    (edge) => edge.node.fields.source === "posts",
   );
   const pageEdges = allEdges.filter(
-    (edge) => edge.node.fields.source === "pages"
+    (edge) => edge.node.fields.source === "pages",
   );
 
   blogEdges.forEach((edge, index) => {
@@ -80,7 +80,7 @@ export const createPages = async ({
       component: path.resolve("./src/layouts/Page.tsx"),
       context: {
         id: edge.node.id,
-        slug: edge.node.slug,
+        slug: edge.node.fields.slug,
       },
     });
   });

src/layouts/Page.tsx

@@ -1,15 +1,19 @@
-import * as React from "react"
-import { graphql, PageProps } from "gatsby"
-import { MDXRenderer } from "gatsby-plugin-mdx"
-import Layout from "../components/organisms/Layout"
+import * as React from "react";
+import { graphql, PageProps } from "gatsby";
+import { MDXProvider } from "@mdx-js/react";
+import Layout from "../components/organisms/Layout";
 
-const Page = ({ data: { mdx }, path }: PageProps<Queries.PageQuery>) => (
+const mdxComponents = {};
+
+const Page = ({
+  data: { mdx },
+  path,
+  children,
+}: PageProps<Queries.PageQuery>) => (
   <Layout pageTitle={mdx?.frontmatter?.title ?? ""}>
-    <MDXRenderer>
-      {mdx?.body ?? ""}
-    </MDXRenderer>
+    <MDXProvider components={mdxComponents}>{children}</MDXProvider>
   </Layout>
-)
+);
 
 export const query = graphql`
   query Page($id: String) {
@@ -21,6 +25,6 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 
-export default Page
+export default Page;