How can I utilize the MDX provider in Gatsby effectively?

Question

Gatsby MDX provider is not working; pages do not appear in MDX format when displayed within a template or layout. The pages are displayed as plain text. Can you help with this ?

gatsby-config.ts

import type { GatsbyConfig } from "gatsby";

const config: GatsbyConfig = {
  siteMetadata: {
    title: `docs`,
    siteUrl: `https://www.yourdomain.tld`,
  },

  graphqlTypegen: true,
  plugins: [
    "gatsby-plugin-postcss",

    "gatsby-transformer-remark",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "docs",
        path: "./src/docs/",
      },
    },
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
      },
    },
  ],
};

export default config

mdx-template.tsx

import React from "react";
import { graphql } from "gatsby";
import { MDXProvider } from "@mdx-js/react";
import Layout from "../components/layout";

interface PageTemplateProps {
  data: {
    mdx: {
      frontmatter: {
        title: string;
      };
      body: string;
    };
  };
}

const MyH1: React.FC<React.HTMLProps<HTMLHeadingElement>> = (props) => (
  <h1 style={{ fontSize: "28px" }} {...props} />
);

const MyH2: React.FC<React.HTMLProps<HTMLHeadingElement>> = (props) => (
  <h2 style={{ fontSize: "24px" }} {...props} />
);

const MyParagraph: React.FC<React.HTMLProps<HTMLParagraphElement>> = (
  props
) => <p style={{ fontSize: "18px", lineHeight: 1.6 }} {...props} />;

const MyList: React.FC<React.HTMLProps<HTMLUListElement>> = (props) => (
  <ul style={{ marginLeft: "20px" }} {...props} />
);

const MyListItem: React.FC<React.HTMLProps<HTMLLIElement>> = (props) => (
  <li {...props} />
);

const components = {
  h1: MyH1,
  h2: MyH2,
  p: MyParagraph,
  ul: MyList,
  li: MyListItem,
};

export default function PageTemplate({ data }: PageTemplateProps) {
  return (
    <>
      <Layout>
        <div className="flex flex-col">
          <h1>{data?.mdx.frontmatter.title}</h1>
          <MDXProvider components={components}>{data?.mdx.body}</MDXProvider>
        </div>
      </Layout>
    </>
  );
}

export const query = graphql`
  query ($id: String!) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
      }
      body
    }
  }
`;

My MDX pages look like this, but I want them to appear in MDX format. I can't figure out how to do this. Can you help me?