next.config.mjs

import remarkGfm from "remark-gfm";
import createMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    mdxRs: true,
  },
};

const withMDX = createMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

I've enabled MDX and remark-gfm, and have the following markdown:

| Left | Centre | Right |
| :--- | :----: | ----: |
| 1    |   2    |     3 |

When I render it however, it shows as

| Left | Centre | Right | | :--- | :----: | ----: | | 1 | 2 | 3 |

Rather than properly rendering into a table. Any ideas?