my markdonw frontmatter is rendering on my page, how do i not render it

markdown.mdx
----
id: 'upload-python-lambda'
title: Deploying Python Script on AWS Lambda
date: '2023-07-01'
----

# Deploying Python Script on AWS Lambda

page.tsx
import dynamic from 'next/dynamic';
import Link from 'next/link';

type Params = {
    id: string
}

type Props = {
    params: Params
}

export default async function Post ({params}: Props) {
    const BlogPost = dynamic(() => import(`../../articles/${params.id}.mdx`), {
        loading: () => <p>Loading ...</p>,
    });

    return (
        <main className="min-h-screen bg-zinc-50 p-24 dark:bg-zinc-950">
            <Link href='../blog'>Back</Link>
            <BlogPost/>
        </main>
    )
}

mdx-components.tsx
import type { MDXComponents } from 'mdx/types';

export function useMDXComponents(components: MDXComponents): MDXComponents {
    return { 
        h1: (props) => <h1 {...props} className="mb-4 text-4xl font-bold" />,
        p: (props) => <p {...props} className="mb-4" />,
        pre: (props) => (
            <pre {...props} className="rounded-lg border-2 border-zinc-500 p-4" />    
        ),
        ...components 
    };
}