React markdown not getting displayed correctly using marked-react

Question

I want to display markdown content . When i use a third party website . I get the below image as the markdown response

markdown content on website

I m using marked-react (https://www.npmjs.com/package/marked-react) to display the markdown below is my code

<div className="p-1 h-[300px] overflow-y-scroll">
                      <Markdown gfm={true} breaks={true}>
                        {releaseNotes}
                      </Markdown>
                    </div>

But i get this as the output output obtained

I need the output in markdown content as displayed above

I even checked the data .It is markdown content . Any help is appreciated

I want ### to be represented as heading and - as bullet points .

This is the api response i m getting

{
  "content": "\n\n---\n### v0.7\n- Added Journey 1 tab 8 Research and Knowledge Bank.\n- Added bug reporting widget.\n- Added startup quotes display feature.\n- Added new icon pack and updated folder open and close icons.\n- Changed position of Delete project button.\n---\n### v0.69\n- Added journey 2.1 Getting your word out with brand marketing.\n- Added pdf sidebar.\n- Fixed some state errors in the pdf content.\n- Added minigator link in the profile dropdown.\n---\n\n",
  "date": "Tue, 15 Aug 2023 00:00:00 GMT",
  "success": true
}