I'm creating a blog site (inspired by @Multiflora rose seed chalcid 's recent blog site template) and I need to add few rehype plugins to the project

import type { NextConfig } from "next";
import createMDX from "@next/mdx";
import rehypeSlug from "rehype-slug";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeAutolinkHeadings from "rehype-autolink-headings";

const nextConfig: NextConfig = {
  /* config options here */
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
  experimental: {
    mdxRs: true,
  },
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [],
    rehypePlugins: [],
  },
});

export default withMDX(nextConfig);

how to configure these plugins here
and one more thing if I'm using these plugins do I have to remove

 experimental: {
    mdxRs: true,
  },

this configuration part ?