How to get remark plugins to work in Next13 MDX?

Summary

I'm trying to get remark plugins to work. In this example, github flavored markdown. I'm following these docs: https://beta.nextjs.org/docs/guides/mdx#remark-and-rehype-plugins

My next.config.mjs looks like this..

import { remarkPlugins } from "./lib/mdx/remark.mjs";
import nextMDX from "@next/mdx";

const withMDX = nextMDX({
  options: {
    remarkPlugins,
  },
});

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx", "js", "jsx", "mdx"],
  experimental: {
    appDir: true,
    mdxRs: true,
  },
}

export default withMDX(nextConfig);

and the ./lib/mdx/remark.mjs file looks like this:

import { mdxAnnotations } from 'mdx-annotations'
import remarkGfm from 'remark-gfm'

export const remarkPlugins = [mdxAnnotations.remark, remarkGfm]

When I try to run some markdown like a table or strikethrough in messages.mdx, it doesn't render properly

## Strikethrough

~one~ or ~~two~~ tildes.

## Table

| a | b  |  c |  d  |
| - | :- | -: | :-: |

Additional information

Note that my next.config.mjs is slightly different than the documentation's implementation. This is because it's not clear to me the fulll scope of how the documentation handles nextConfig.

Doc says next.config.mjs should be like...

import addMdx from '@next/mdx';

addMdx(nextConfig, {
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
    // If you use `MDXProvider`, uncomment the following line.
    // providerImportSource: "@mdx-js/react",
  }
})

export default {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: true,
  }
}

As per the answer here, you need to turn off mdxRs in order for mdx plugins to work.

import addMdx from '@next/mdx';

addMdx(nextConfig, {
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  }
})

export default {
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'mdx'],
  experimental: {
    appDir: true,
    mdxRs: false, // <-- HERE
  }
}