Problem with rendering markdown in NextJS/React

once again I am trying to render markdown in NextJS/React. For some reason my code didn't work, here it is:

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';
const PostContent = () => {
    const source = `
        # Hello, world!
        ---
        ~this doesn't work.~
    `
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;

Rather than rendering markdown, it outputs the text as normal and as if it were JSON:

Can anyone tell me why this is happening and how to solve it? Thanks!

I can't provide anymore details as this is all the code.

You need to remove the first empty line and all the spaces at the beginning of each line. It might look weird - but that is what ReactMarkdown expects you to do.

Your component will end up looking like this: notice the "strange" spacing inside the backticked text.

import ReactMarkdown from "react-markdown";
import gfm from 'remark-gfm';

const PostContent = () => {

    const source = `
# Hello, world!
---
~this doesn't work.~
`
    return (
        <ReactMarkdown remarkPlugins={[gfm]} children={source} />
    );
};

export default PostContent;