How to use taboola in react

I developing react app which should have taboola content. Of course I have embed code of taboola.

<script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({ article: 'auto' });
    !function (e, f, u, i) {
      if (!document.getElementById(i)) {
        e.async = 1;
        e.src = u;
        e.id = i;
        f.parentNode.insertBefore(e, f);
      }
    }(document.createElement('script'),
      document.getElementsByTagName('script')[0],
      '//cdn.taboola.com/libtrc/.../loader.js',
      'tb_loader_script');
    if (window.performance && typeof window.performance.mark == 'function') { window.performance.mark('tbl_ic'); }
  </script>

<div id="taboola-below-article-thumbnails"></div>
  <script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({
      mode: 'thumbnails-a',
      container: 'taboola-below-article-thumbnails',
      placement: 'Below Article Thumbnails',
      target_type: 'mix'
    });
  </script>

<script type="text/javascript">
    window._taboola = window._taboola || [];
    _taboola.push({ flush: true });
  </script>

I tested this code in native html script. And it worked well. But when I try to use it react environment, it doesn't show content sometimes.

This is my react code

class TaboolaContainer extends React.Component {
  applyTaboola = () => {
    if (document.getElementById("taboola-below-article-thumbnails").innerHTML.length) return;
    window._taboola = window._taboola || [];
    window._taboola.push({
      mode: "thumbnails-a",
      container: "taboola-below-article-thumbnails",
      placement: "Below Article Thumbnails",
      target_type: 'mix'

    });
    window._taboola.push({ flush: true });
  }

  componentDidMount = () => {
    this.applyTaboola();
  }

  render() {
    return (
      <div className="taboola-section">
        <div id="taboola-below-article-thumbnails"></div>
      </div>
    )
  }
}

How can I use taboola in react more efficiently?