How to fetch JSX content of blog data from mongoDB?

I have stored my Blog content for my NextJS app in MongoDB in JSX format which contains JSX syntax like tags and tags with Tailwind CSS.

Collection Name: blogs

{
        id: 1,
        slug: "my-post",
        featuredImage: "/assets/blog/img.jpg",
        alt: "image",
        width: "1400",
        height: "1050",
        title: "My First Post",
        content: <>

            <div >
           

                    <h2 className='text-3xl'>My First Post</h2>

                    <p>The sound is well balanced and they fit comfortably. You can hear every clap, hat, and shaker in a song or beat. They have a very nice frequency response of 15 - 20,000 Hz. This means you can hear all bass tones in a song up to the most high-pitched hats and shakers.</p>


                    <p>For any query, <a href="https://prashantvermamusic.com/contact-us">contact us</a>.</p>

                    <div className="buy-button">
                        <a href="https://amzn.to/39T9uri" target="_blank" rel="noreferrer noopener nofollow external">Check Price on Amazon.in</a>
                    </div>
                    <Link href="/blog/post">cdcd</Link>

                    <br />
                    <Image href={'assets/blog/img.jpg'}></Image>
     
                   
            </div>
     
        </>
    },

I am trying to fetch data using getStaticProps() and getStaticPaths() function but the content value is showing as it is. It is not rendering in JSX in nextjs app. Here is my [postslug].js

import Head from 'next/head'
import { useEffect } from 'react';
import { connectToDatabase } from "../../util/mongodb";



export async function getStaticPaths() {

    const { db } = await connectToDatabase();

    const res = await db
        .collection("blogs")
        .find({})
        .sort({ metacritic: -1 })
        .toArray();

    const blogs = JSON.parse(JSON.stringify(res));

    const paths = blogs.map((p) => {
        return {
            params: { postslug: p.slug }
        }
    });

   
    return {
        paths,
        fallback: false,
    };
}


export async function getStaticProps(context) {

    const reqslug = context.params.postslug;


    const { db } = await connectToDatabase();

    const res = await db
        .collection("blogs")
        .find({}).toArray()

    const post = JSON.parse(JSON.stringify(res));
    
        return {
            props: {
                reqpost: post
            },
        };   
}


const Post = ({reqpost}) => {

    return (
        <>
            {reqpost[0].content}
        
        </>

    )
}

export default Post;

I want to render that JSX code content in the NextJS app. And also Link and Image tags should be working fine with applied Tailwind CSS.