How to target OwlCarousel generated class so to append a div and make it stick inside using React

Question

I'm fairly new to React and I want to use Owl Carousel 2. I'm trying to add a play button image to a div with a class name of .owl-dots which is generated by Owl Carousel.

I tried targeting .owl-dots in jsx:

render(){

const owlDots = document.querySelector('.owl-dots')
console.log(owlDots) // <div class='owl-dots'>...
...

The main problem now is that the play button doesn't stick. It disappears when owl carousel fires and starts the autoplay . My spider senses tells me to use another Lifecycle method. But which one? How do I approach this problem? I don't know where to start.

I'm stuck here

Effect that I want

import React, { Component } from "react";
import ReactDOM from "react-dom";
import OwlCarousel from "react-owl-carousel2";
import "./owl/owl.carousel.css";
import "./styles.css";

class App extends Component {

componentDidMount() {
  const owlDots = document.querySelector('.owl-dots')
  const newEl = document.createElement('div')
  newEl.classList.add('playPause')
  if (this.state.autoplay) {
    newEl.innerHTML = '<svg class="playbutton" 
    xmlns="http://www.w3.org/2000/svg"><title>play</title><use 
    xlink:href="#icon-play"></use></svg>'
  } else {
     newEl.innerHTML = '<svg class="pausebutton" 
     xmlns="http://www.w3.org/2000/svg"><title>pause</title><use 
     xlink:href=#icon-pause></use></svg>'
  }
  owlDots.append(newEl)
  console.log(owlDots) // <div class='owl-dots'>...
}

 render() {
 const options = {
  items: 1,
  rewind: true,
  dots: true,
  autoplay: true
};

return (
  <div className="App">
    <OwlCarousel options={options}>
      <div className="item">
        <img src="http://placehold.it/1600x900" alt="null" />
        <h1 className="owl-heading" style={{ fontSize: 100 }}>
          1
        </h1>
      </div>
      <div className="item">
        <img src="http://placehold.it/1600x900" alt="null" />
        <h1 className="owl-heading" style={{ fontSize: 100 }}>
          2
        </h1>
      </div>
    </OwlCarousel>
  </div>
 )}
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

You can view the code here --> CodeSandbox