title: New line with react-markdown
body: <p>I am trying to pull the markdown string from firebase database then using react-markdown to render it into Component. But the markdown string doesn't show correctly. I think the problem is due to start with new line.</p>
  
  <p>I tried to declare the variable I put markdown in there. it works. 
  <a href="https://i.stack.imgur.com/S29sz.png" rel="nofollow noreferrer">markdown string which is created in Component</a></p>
  
  <p>But the markdown string which is pulled from firebase database. it doesn't show correctly.
  <a href="https://i.stack.imgur.com/InnTf.png" rel="nofollow noreferrer">markdown string which is pulled from firebase database</a></p>
  
  <p>Here is my code</p>
  
  <pre><code>export default function BlogTemplate() {
    const { id } = useParams();
    useFirestoreConnect([
      {
        collection: "communications",
        doc: id
      }
    ]);
    const post = useSelector(
      state =&gt;
        state.firestore.data.communications &amp;&amp;
        state.firestore.data.communications[id]
    );
  
    if (post) {
      const input =
        "# This is a header\n\nAnd this is a paragraph \n\n # This is header again"; // this is a markdown string created in Component
      const postContent = post.content; // This is the markdown string pulled from firebase database
      return (
        &lt;Layout&gt;
          &lt;Container&gt;
            &lt;Content className="pt-5 pb-5"&gt;
              &lt;ReactMarkdown source={input} /&gt;
              &lt;ReactMarkdown source={postContent} /&gt;
            &lt;/Content&gt;
          &lt;/Container&gt;
        &lt;/Layout&gt;
      );
    } else {
      return &lt;p&gt;Loading...&lt;/p&gt;;
    }
  }
  </code></pre>