MDX loader only working on top level directory

Question

In the "Create Next App" section about rendering markdown they have us make posts.js that uses remark to parse the .md files.

In the guide for adding .mdx support they initialize it in next.config.js but don't address the changes needed in posts.js. I think that's why mdx support is working in pages > my-page.mdx but not posts > my-post.mdx which uses posts.js to render.

relevant function:

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.mdx`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();

  // Combine the data with the id and contentHtml
  return {
    id,
    contentHtml,
    ...matterResult.data,
  };

How can I update the getPostData to parse mdx? (MDX page in the docs using next.config.js)