Trying to split a larger MDX file into smaller components using next MDX remote

import fs from "fs"
import path from "path"
import { MDXRemote } from "next-mdx-remote/rsc"

export default function MdxSection({ slug, section }: { slug: string, section: number }) {
  const content = fs.readFileSync(
    path.join(
      process.cwd(),
      "*redacted*/learn/[...slug]",
      `${slug}.mdx`
    ),
    "utf8"
  )
  const contentArray = content.split("<br />")
  return <MDXRemote source={contentArray[section]} />
}

Running into an issue where the mdx-components I have in mdx-components.tsx don't seem to be available to the JSX rendered by MDXRemote. Is there a workaround for this?