React Markdown not render properly in React

Question

I am creating dev.to clone for react js practice when

trying to render markdown in react-markdown it doesn't render properly,

here it is:

Post.js

import React, { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import SyntexHighlight from '../../components/SyntexHighlight';


const Post = ({ post }: any) => {


  return (
    <main className="h-full bg-white rounded-md border">
      <header>
        .........
      </header>
      <div
        className=" leading-8 marker:text-black max-w-2xl mx-auto py-6 prose
          prose-lg prose-p:block prose-li:py-[0.5] prose-li:my-0 prose-a:text-blue-600
         hover:prose-a:text-blue-500 prose-code:text-sm prose-code:bg-gray-200 
          prose-code:p-1 prose-code:rounded prose-img:mx-auto       "
      >
        <ReactMarkdown components={SyntexHighlight}>{post.body}</ReactMarkdown>
      </div>

      <section className="border-t-2 px-8 py-4">
        ........
      </section>
    </main>
  );
};

export default Post;

SyntexHighlight.js

import React from 'react';
import { Prism } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

const SyntexHighlight = {
  code({ node, inline, className, ...props }: any) {
    const match = /language-(\w+)/.exec(className || '');
    return !inline && match ? (
      <Prism style={oneDark} language={match[1]} PreTag="div" className="codeStyle" {...props} />
    ) : (
      <code className={className} {...props} />
    );
  },
};

export default SyntexHighlight;

It doesn't render properly

markdown render problem

markdown render problem

markdown render problem

I tried "json2md" package after getting JSON string form node server still not working
when i try "json2md" data to separate variable

data variable

<div
        className=" leading-8 marker:text-black max-w-2xl mx-auto py-6 prose
          prose-lg prose-p:block prose-li:py-[0.5] prose-li:my-0 prose-a:text-blue-600
         hover:prose-a:text-blue-500 prose-code:text-sm prose-code:bg-gray-200 
          prose-code:p-1 prose-code:rounded prose-img:mx-auto       "
      >
        <ReactMarkdown components={SyntexHighlight}>{MarkdownFile}</ReactMarkdown>
      </div>

Now its working properly

it's working

it's working

it's working

i don't know what is the problem ???