Adding multiple line break in react-markdown

Currently I'm using React and have content in my rich text in strapi CMS that is spaced out the way I want it in my markdown version, but as soon as I switch to preview, or view the content in my browser, the spaces go away. I have tried adding <br/> tags, but there was still no line breaks.

This is the content in my strapi markdown:

But this is the output on my webpage:

This is my current code:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
export default function name({ posts }) {
  return (
    <>
        <div>
          {posts.Title}
        </div>
      <div>
        <ReactMarkdown children={posts.Content} rehypePlugins={[rehypeRaw]} />
      </div>
    </>
  );
}

For adding multiple line break, this should do it:

import React from "react";
import "./styles.css";

import ReactMarkdown from "react-markdown";

export default function App() {
  const markdown = `hello
  \n  
  \n  
  \n  
  \n  
  \n
  world
  `;

  return (
    <div className="App">
      <ReactMarkdown source={markdown} />
    </div>
  );
}