ReactMarkdown does not render or display blog content

[Trushar10]

in the blog-template.js, using only { content } displays the blog content. But using the ReactMarkdown component displays nothing.

My repository link: portfolio

using { content } displays

# JavaScript Hard Parts ## Subtitle - first item - second item - third item > I'm baby dIY beard kogi tumeric butcher freegan. Schlitz vaporware everyday carry small batch, taxidermy deep v glossier iceland truffaut retro asymmetrical bitters tattooed post-ironic vape. Jean shorts blog edison bulb, yr tousled banjo lumbersexual 3 wolf moon squid artisan poutine typewriter. Cray pinterest master cleanse helvetica, godard heirloom taiyaki kinfolk hell of locavore. ``` allStrapiProjects { nodes { github id description title ```

I had not modified any text. Only uncommented it.

blog-template.js

import React from "react"
import { graphql, Link } from "gatsby"
import Layout from "../components/Layout"
import ReactMarkdown from "react-markdown"

const ComponentName = ({ data }) => {
  const { content } = data.blog

  return (
    <Layout>
      <section className="blog-template">
        <div className="section-center">
          <article className="blog-content">
            <ReactMarkdown source={content}></ReactMarkdown>
          </article>
          <Link to="/blog" className="btn center-btn">
            blog
          </Link>
        </div>
      </section>
    </Layout>
  )
}

export const query = graphql`
  query GetSingleBlog($slug: String) {
    blog: strapiBlogs(slug: { eq: $slug }) {
      content
    }
  }
`

export default ComponentName