Using Markdown, in React, to render the output of a JSON API

Question

I'm trying to use Markdown to render the output of a Json API, in the chat conversation of this GitHub project: https://github.com/doingthisalright/chatgpt-langchain-qna-on-your-docs

But I can't make it fully work: e.g. the bullet and numbered lists render correctly.

I added these import in the Conversation.tsx:

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

And I changed the div for the AI answers this way:

               <div className={styles.messageAvatarContainer}>
                  {message.role === "AI" && ""}
                </div>
                <div style={{ textAlign: message.role === "AI" ? 'start' : 'end' }}>
                    <ReactMarkdown remarkPlugins={[remarkGfm]} children={unskipNewlines(message.content)} />
                </div>

It seems to be partially fine: bold is correctly rendered. But the lists (bullet or number) just do not display correctly. It seems to be due to the fact that JSON skip the newlines, so I added a function:

function unskipNewlines(text: string): string {
    return text.replace(/\\n/g, '\n');
}

Still that doesn't render correctly... any suggestion?

Thanks!