The markdown is successfully rendered as the text in the following image, but the alignment in the section is not upto the mark. How can I fix it?

enter image description here

I was expecting the alignment to be correct.
Here is the code for the Markdown Formatter:

// import React from 'react';
import Markdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';

const ResFormatter = ({ answer }) => {
  // You can customize the rendering as needed by providing a custom renderer
  // or using additional props for `Markdown` component here.

  return (
    <>
      {/* <Markdown>{answer}</Markdown> */}
      <Markdown
        children={answer}
        components={{
          code(props) {
            const { children, className, node, ...rest } = props;
            const match = /language-(w+)/.exec(className || '');
            return match ? (
              <SyntaxHighlighter
                {...rest}
                children={String(children).replace(/n$/, '')}
                style={dark}
                language={match[1]}
                PreTag='div'
              />
            ) : (
              <code {...rest} className={className}>
                {children}
              </code>
            );
          },
        }}
      />
    </>
  );
};

export default ResFormatter;