I am using React Markdown to render a markdown from the server and it is getting rendered without any fault but I am unable to manage the alignment

Question

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;