Новая линия с уценкой

Question

Я пытаюсь вытащить строку уценки из базы данных Firebase, а затем с помощьюact-markdown перевести ее в Компонент. Но строка уценки не отображается правильно. Я думаю, что проблема в том, чтобы начать с новой строки.

Я попытался объявить переменную, которую я поместил туда. оно работает. строка уценки, которая создается в Компоненте

Но строка уценки, которая извлекается из базы данных Firebase. это не показывает правильно. строка уценки, которая извлекается из базы данных Firebase

Вот мой код

export default function BlogTemplate() {
  const { id } = useParams();
  useFirestoreConnect([
    {
      collection: "communications",
      doc: id
    }
  ]);
  const post = useSelector(
    state =>
      state.firestore.data.communications &&
      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 (
      <Layout>
        <Container>
          <Content className="pt-5 pb-5">
            <ReactMarkdown source={input} />
            <ReactMarkdown source={postContent} />
          </Content>
        </Container>
      </Layout>
    );
  } else {
    return <p>Loading...</p>;
  }
}