import Image from "next/image";
import Link from "next/link";
import { serialize } from "next-mdx-remote/serialize";
import { MDXRemote } from "next-mdx-remote";
import * as FirestoreService from "@/services/firestore";
import Head from "next/head";
import { InferGetStaticPropsType } from "next";
export default async function BlogPost() {
  // const blogID = props.blogID;
  // const blogID = "1c4nTG18P8DiolX1tPsB";
  // const blogDocument = (await FirestoreService.getBlogPost(blogID)).data();

  const components = {
    Head,
  };

  // MDX text - can be from a local file, database, anywhere
  const source = "Some **mdx** text, with a component <Test />";
  const mdxSource = await serialize(source);
  console.log(mdxSource.frontmatter);

  return (
    <section className="flex min-h-screen w-full flex-col items-center  bg-bright dark:bg-dark overflow-hidden relative px-4 max-w-screen-lg mx-auto flex-auto text-dark">
      <MDXRemote {...mdxSource} components={components} />
    </section>
  );
}

Unhandled Runtime Error
Error: Cannot read properties of null (reading 'useState')