Reactでadsenseコードを代入しようした時にページが表示されない

Question

gatsbyjs（静的サイトジェネレーター）を利用して、ブログを作りましたが、①記事が表示されない、②Google adsenseを挿入しようと思うとエラーが発生する問題が起き、ご助言いただきたくお願いします。

やりたいこと

マークダウンファイル（記事）をにadsenseコードを代入した後（コード内のinsertAdsense）、componentDIdMountでadsbygoogleをpushし、記事内にアドセンス広告を表示したい

エラー内容

下記の３通りの出来事が起きており、
①問題なく記事内に広告が設置される
②記事タイトル等は表示されるが、記事コンテンツが表示されない
③記事が表示されず、画面が真っ白になる

②、③のエラー時には、「"adsbygoogle.push() error: All ins elements in the DOM with class=adsbygoogle already have ads in them."」というエラーが表示されます。

②、③が起きた場合でも、リロードすればきちんと表示されるので、コード実行の順番などが原因ではないかと思っています。（おそらく、dangerouslySetInnerHTMLで記事コンテンツが完全にセットされる前に、componentDidMountが起きているから②・③が起きているのか？とも思っておりますが、うまく行かず、、、）

問題が起きているサイト

https://englissu.com

コード（抜粋）

post.js側で、
記事コンテンツを取得（post）
⇨ insertAdsenseでマークダウンファイルのコンテンツ内にアドセンスコードを挿入
⇨ componentDidMountでadsbygoogleをpush
という大きな流れです。

post.js

import AdsenseRectangle from "../components/InsertAdsense"
import { insertAdsense } from "../components/InsertAdsense"



class BlogPostTemplate extends React.Component {
  constructor(props) {
    super(props)
    const post = this.props.data.markdownRemark
    const slug = this.props.pageContext
    const { temp1, numberOfAds } = insertAdsense(post.html, slug)
    this.state = { numberOfAdsense: numberOfAds }
  }

  componentDidMount() {
    if (window)
      for (let i = 0; i < this.state.numberOfAdsense + 1; i++) {
        (window.adsbygoogle = window.adsbygoogle || []).push({});
      }
  }

  render() {
    const post = this.props.data.markdownRemark

    const siteTitle = this.props.data.site.siteMetadata.title
    const { relatedPosts, slug } = this.props.pageContext

    const { post2, temp2 } = insertAdsense(post.html, slug)

    const { title, description, date, category, tags } = post.frontmatter

    const sizes = post.frontmatter.featuredImage
      ? post.frontmatter.featuredImage.childImageSharp.sizes
      : 0

    const { categories } = this.props.data.site.siteMetadata
    const categoryObject = categories.find(cat => {
      return cat.slug === category
    })
    const categoryColor = categoryObject ? categoryObject.color : "#555"

    return (
      <Layout location={this.props.location} title={siteTitle} pageAd={"true"}>
        <SEO title={title} description={description || post.excerpt} />
        <Helmet>
          <link
            rel="canonical"
            href={`https://englissu.com${this.props.location.pathname}`}
          />
        </Helmet>
        <PostJsonLd
          title={title}
          description={description || post.excerpt}
          date={date}
          url={this.props.location.href}
          categorySlug={category}
        />
        <Content>
          <ContentMain>
            <PostTitle>{title}</PostTitle>
            <Labels>
              <CategoryLabel slug={category} isLink="true" />
              {tags.map(({ tag }, index) => {
                return <TagLabel key={index} slug={tags[index]} isLink="true" />
              })}
            </Labels>
            <PostDate>{date}</PostDate>

            <FeaturedImage sizes={sizes} className="featured-image" />
            <PostContent
              categoryColor={categoryColor}
              categorySlug={category}
              dangerouslySetInnerHTML={{ __html: post2 }}

            <FollowBudge />
            <ShareButtons slug={slug} title={title} />
          </ContentMain>

          <AdsenseRectangle slug={slug} />

          <aside>
            <RelatedPosts posts={relatedPosts} />
          </aside>
        </Content>
      </Layout>
    )
  }
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query blogPostBySlug($slug: String!) {
          site {
          siteMetadata {
          title
        author
        categories {
          name
          slug
        color
      }
    }
  }

    markdownRemark(fields: {slug: {eq: $slug } }) {
          id
      excerpt(pruneLength: 160)
        html
      frontmatter {
          title
        description
        date(formatString: "YYYY.MM.DD")
        category
        tags
        featuredImage {
          childImageSharp {
          sizes(maxWidth: 630) {
          ...GatsbyImageSharpSizes
        }
        }
      }
    }
  }
}
`

insertAdsense.js

import React from 'react';

class Adsense extends React.Component {
  render() {
    return <div>{this.props.component}</div>;
  }
}

const Rectangle = (props) => {
  return (
    <ins
      className="adsbygoogle"
      style={{ display: 'block' }}
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'5-' + props.slug}
    />
  );
};

const AdsenseRectangle = (props) =>
  <Adsense
    component={<Rectangle slug={props.slug} />}
  />

export default AdsenseRectangle

const parser = typeof DOMParser !== "undefined" && new DOMParser()

export const insertAdsense = (html, slug) => {
  if (!parser) return html
  const dom = parser.parseFromString(html, "text/html")
  const eles = [].slice.call(dom.querySelectorAll(".adsense1, .adsense2, .adsense3, .adsense4"))

  const ad1 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'1-' + ${slug}}
    ></ins>
  `

  const ad2 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'2-' + ${slug}}
    ></ins>
  `

  const ad3 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true"
      key={'3-' + ${slug}}
    ></ins>
  `

  const ad4 = `
    <ins class="adsbygoogle"
      style="display: block;"
      data-ad-client="ca-pub-"
      data-ad-slot=""
      data-ad-format="auto"
      data-full-width-responsive="true
      key={'4-' + ${slug}}
    ></ins>
  `

  const ads = [ad1, ad2, ad3, ad4]
  const numberOfAds = eles.length;

  if (eles) {
    eles.map((ele, index) => (ele.innerHTML = ads[index]))
  }

  return { post2: dom.body.innerHTML, numberOfAds: numberOfAds }
}

初心者の汚いコードで大変申し訳ございませんが、お力添えのほどよろしくお願いします。