I'm trying to achieve a uniform layout across all my pages in mdx so for that i'm using a mdx-layout.tsx file according to the nextjs documentation and then wrapping the contents of the markdown content inside the layout for all the pages. This is my layout code so far.

import { Anton } from "next/font/google";
const anton = Anton({subsets: ["latin"], weight:["400"]});

export default function MdxLayout({ children }: { children: React.ReactNode }) {
    return (
        <>
       <div className="flex flex-row h-full w-full space-x-5">
                {/* Table of contents */}
                <div className="h-full w-1/6">
                    <h1 className={`${anton.className} text-white`}>
                        Table of contents
                    </h1>
                </div>
                {/* The content */}
                <div className="flex flex-row w-full" style={{ color: 'red' }}>
                    {children}
                </div>
        </div>
        </>
    )
}

And this is my mdx page

---
title: Hi, Test!
description: test??
tags: frameworks,development
image: react.png
slug: 2024/test
publishDate: '06-10-2024'
---

import MdxLayout from '@/components/mdx-layout'

export const metadata = {
  title: 'Test!',
  description: 'this is the description',
  tags: ['test', 'development'],
};

# Title {metadata.title}
# description {metadata.description}
# tags {metadata.tags}
 
You this cool?

export default function MDXPage({ children }) {
  return <MdxLayout>{children}</MdxLayout>
}

The thing is the markdown is being rendered in a single line, that is like this

Title Test!description this is the descriptiontags testdevelopmentYou this cool?

Like this but in a single line. how can i make the it respect the new lines that i have in my markdown file?

Thanks.