How to combine next.js + mdx + katex?

Question

In my next.js project my goal is to render katex equations from mdx file. However my equations are just not rendering. I have the following setup

in my page.tsx is

import HelloWorld from './hello.mdx'
import 'katex/dist/katex.min.css'

export default function Home() {
  return (
    <>
      <HelloWorld />
    </>
  )
}

In my next.config.mjs I have the following

import createMDX from '@next/mdx'
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}
 
const withMDX = createMDX({
  options: {
    extension: /\.mdx?$/,
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [rehypeKatex],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  },
})
export default withMDX(nextConfig)

Lastly in my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    mdxRs: true,
  },
}
 
const withMDX = require('@next/mdx')()
module.exports = withMDX(nextConfig)