How can I pass components from server files to svelte pages with Svelte5?

I am writing a blog site using mdsvex and SvelteKit5. My current +page.server.ts file tried to pass the rendered component, but it is now a function and not an object (link to docs) and therefore I get an error saying:

Cannot stringify a function (data.component)

import { slugFromPath } from '$lib/slugFromPath';import { error } from '@sveltejs/kit';export const load = async ({ params }) => {    const modules = import.meta.glob(`/src/posts/*.{md,svx,svelte.md}`);    let match: { path?: string; resolver?: App.MdsvexResolver } = {};    for (const [path, resolver] of Object.entries(modules)) {        if (slugFromPath(path) === params.slug) {            match = { path, resolver: resolver as unknown as App.MdsvexResolver };            break;        }    }    console.log(params.slug)    const post = await match?.resolver?.();    if (!post || !post.metadata.published) {        throw error(404); // Couldn't resolve the post    }    return {        component: post.default,        frontmatter: post.metadata    };};

My +page.svelte file is as follows:

<script lang="ts">    import type { SvelteComponentTyped } from 'svelte';    import PageHead from '$lib/components/PageHead.svelte';    import ArticleTitle from '$lib/components/ArticleTitle.svelte';    import ArticleMeta from '$lib/components/ArticleMeta.svelte';    let {data} = $props();    let component = $state(data.component);</script><PageHead title={data.frontmatter.title} description={data.frontmatter.description} /><ArticleTitle title={data.frontmatter.title} /><ArticleMeta author={data.frontmatter.author} date={data.frontmatter.date} /><svelte:component this={component} />

I can't find a way to pass the component as an object so that it can be assigned to the svelte:component tag. Is there a way of doing this in Svelte5?