Unable to show body of MDX files because Content is undefined.

[dusky sphinx]

I've been trying to get the body of my .mdx files to show on the page. I was able to do it fine with .md files, but for some reason .mdx files just don't work.

This is the code in question (note that the <Content /> should be loaded in the <slot /> tag of my BlogPage.layout:
FYI I have the mdx plugin.

import { type CollectionEntry, getCollection } from 'astro:content';
import BlogPost from '../../layouts/BlogPost.astro';

export async function getStaticPaths() {
const posts: CollectionEntry<'blog'>[] = await getCollection('blog');
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
}

// type Props = CollectionEntry<'blog'>;
const { post } = Astro.props;
console.log("Post:", post);

const {Content} = post.render();

// export async function setup() {
// ({ Content } = await post.render());
// console.log("Content", {Content});
// return { Content };
// }

---

<BlogPost {...post.data}>
<Content />
</BlogPost>

[dry glade]

const { Content } = await post.render();

You forget the await

[dusky sphinx]

Still getting an error: Cannot read properties of null (reading '$$slot'). I'm not sure why it's coming up null. The console.log is showing everything in the mdx file. Something seems to be wrong with the render.