I dont want to render the frontmatter of mdx file

"use client";


import { useEffect, useState } from "react";
import { usePathname } from "next/navigation";


export default function Page() {
  const [Post, setPost] = useState<React.ComponentType | null>(null);
  const pathname = usePathname();
  const slug = pathname.split("/")[2];

  useEffect(() => {
    // Dynamically import the MDX file after the component mounts
    import(`@/content/markdown/${slug}.mdx`)
      .then((module) => setPost(() => module.default))
      .catch((err) => console.error("Error loading MDX:", err));
  }, [slug]);

  return (
    <div className="min-h-screen bg-white text-primary text-4xl flex flex-col items-center justify-center mx-auto">
      {Post ? (
        <div>
          <Post />
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}