How to use MDXjs as the body of the text in areas of the webpage?

I’m trying to make a blog website using Vite + React and Tailwind CSS, and MongoDB for the backend at the moment, and I want to use a markdown language like MDX to display the body and title, as well as any other info that might be on a blog page itself. However, I’m not really sure how to integrate MDX in this way, nor how to style the MDX using custom styling with CSS or something similar.

Here is my blogPage at the moment done with Typescript, React, and HTML/CSS.

import dummyBlogs from "../components/dummy-blogs.tsx";
import {useParams} from "react-router-dom";


const BlogPage = () => {
    const { blogID } = useParams();
    const content = dummyBlogs.find((blog) => blog.id === parseInt(blogID));
    return (
        <>
            <div>
                <div className={"flex-grow align-middle"}>
                    <h1 className={"text-center py-64 text-9xl font-extrabold tracking-widest bg-amber-400 mb-10"}>
                        {content.title}
                    </h1>
                </div>
            </div>
            <div>
                <p>
                    {content.body}
                </p>
                <div>
                    Like button (?)
                </div>
            </div>
        </>
    )
}

export default BlogPage;

and here is what dummyBlogs look like

const dummyBlogs = [
    {
        id: 1,
        title: "Lorem ipsum dolor sit amet",
        headerbg: "amber-400",
        body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris id magna ullamcorper egestas in non nunc. In at auctor arcu. Suspendisse diam metus, venenatis in quam quis, consectetur blandit mi. Duis lacinia ultrices mattis. Nunc placerat ligula sit amet magna gravida lobortis. Cras finibus ac risus vel sagittis. Vestibulum vel porttitor neque, a consectetur mi. Pellentesque varius semper convallis. Mauris sed elit finibus, luctus lectus ut, fermentum turpis.",
        footnotes: "*Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac mauris id magna",
        views: 123,
    },
    {
        id: 2,
        title: "Another Blog Post",
        headerbg: "blue-400",
        body: "This is another dummy blog post...",
        footnotes: "*Footnote for this blog post",
        views: 456,
    },
    {
        id: 3,
        title: "Another Blog Post",
        headerbg: "blue-400",
        body: "This is another dummy blog post 3...",
        footnotes: "*Footnote for this blog post",
        views: 728,
    },
    {
        id: 2,
        title: "Another Blog Post",
        headerbg: "blue-400",
        body: "This is another dummy blog post 4...",
        footnotes: "*Footnote for this blog post",
        views: 103,
    },
    // Add more dummy blog objects here
];

export default dummyBlogs;

How would I use MDX for the body, footnotes, and title, and have it be styled in the way that the CSS dictates – i.e bold, font size, and font family should look a certain way dictated by CSS?

I’m not sure how to even start