I am trying to convert markdown and display it as react (html), but the generated html seems to overflow.

import { getPostBySlug } from "@/lib/api";
import markdownStyles from "./markdown-styles.module.css";
import { useLocale } from "next-intl";
import Image from "next/image";
import DateFormatter from "@/components/DateFormatter";
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'

export default async function Post({ params }: { params: { slug: string } }) {
    const lang = useLocale();
    const post = getPostBySlug(params.slug, lang, ["title", "author", "content", "date", "coverImage"]);

    return (
        <div className="container mx-auto min-h-fit">
            <div>
                <div className="w-full h-16 text-black dark:text-white">
                    <p className="text-2xl">{post.title}</p>
                    <p className="text-gray-400">{post.author}</p>
                    {post.coverImage && (
                        <Image
                            src={post.coverImage}
                            alt={`Cover Image for ${post.title}`}
                            width={500}
                            height={300}
                        />
                    )}
                    <p className="text-gray-400">
                        <DateFormatter dateString={post.date} />
                    </p>
                    <Markdown className={markdownStyles["markdown"]} remarkPlugins={[remarkGfm]}>
                        {post.content}
                    </Markdown>
                </div>
            </div>
        </div>
    );
}