footnotes in mdx, nextJS, gray matter blog?

Question

I'm trying to make a blog and followed this tutorial to setup with next.js:https://gaudion.dev/blog/nextjs-mdx-blog

trying to render footnotes in a blog post rendered from MDX

eg.

---
title: footnotetest
date: "9th July 2024"
description: Welcome to my first blog post.
---

# Footnote Test

This is a sentence with a footnote.[^1]

[^1]: This is the footnote content.

this is the code responsible for rendering

import fs from "fs";
import path from "path";
import matter from "gray-matter";
import "/app/globals.css";

import { MDXRemote } from "next-mdx-remote/rsc";
import Carousel from "@/app/components/mdx/Carousel";
import CarouselTwo from "@/app/components/mdx/CarouselTwo";
import Youtube from "@/app/components/mdx/Youtube";
import HoverImageLink from "@/app/components/mdx/HoverImageLink";

export async function generateStaticParams() {
  const files = fs.readdirSync(path.join("blogs"));

  const paths = files.map((filename) => ({
    slug: filename.replace(".mdx", ""),
  }));

  return paths;
}

function getPost({ slug }: { slug: string }) {
  const markdownFile = fs.readFileSync(
    path.join("blogs", slug + ".mdx"),
    "utf-8"
  );

  const { data: frontMatter, content } = matter(markdownFile);

  return {
    frontMatter,
    slug,
    content,
  };
}

export default function Post({ params }: any) {
  const props = getPost(params);

  return (
    <article className="prose lg:prose-base lg:prose-mdlg prose-slate prose-!invert mx-auto ">
      <a className="text-black" href="http://localhost:3000/">
        ⏎
      </a>
      <h1>{props.frontMatter.title}</h1>

      <MDXRemote
        source={props.content}
        components={{ Carousel, CarouselTwo, Youtube, HoverImageLink }}
      />
    </article>
  );
}

but all I get out is this:

has anyone used this setup before and been able to render footnotes with mdx correctly?

tried modifying next.config.js

import remarkFootnotes from "remark-footnotes";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["js", "jsx", "ts", "tsx", "md", "mdx"],
  webpack: (config) => {
    config.module.rules.push({
      test: /\.mdx?$/,
      use: [
        {
          loader: "babel-loader",
          options: {
            presets: ["next/babel"],
          },
        },
        {
          loader: "@mdx-js/loader",
          options: {
            remarkPlugins: [remarkFootnotes],
          },
        },
      ],
    });

    return config;
  },
};

export default nextConfig;

based on chatGPT but no success.