gray-matter and markdown-to-jsx is not working

Question

I am reading a .md file then trying to generate HTML. Here is my code

import matter from "gray-matter";
import fs from "fs";
import Markdown from "markdown-to-jsx";

function getBlogContent(category, blog) {
   const file = `./public/blogs/${category}/${blog}.md`;
   const content = fs.readFileSync(file, "utf-8");
   return matter(content);
}

export default function Blog({ params }) {
   const { category, blog } = params;
   const content = getBlogContent(category, blog);
   console.log(content);
   return (
      <div>
         <div>{params.blog}</div>
         <Markdown>{content.content}</Markdown>
      </div>
   )
}

Here is the generated HTML

<div>
    <div>post 1</div>
    <div>
        <h1 id="this-is-post-1">this is post 1</h1>
        <h2 id="some-lines">some lines</h2>
        <p>
            <code>code goes here</code>
        </p>
    </div>
</div>

The generated HTML tags are correct. But styles are not applied. I mean all the text are plain text instead of having Header, Code styling.

This is a Nextjs project with Tailwind configured. I am using all the default configuration of the latest Nextjs project. Is there any configuration required to get the styles of the HTML tags? What is wrong here?