title: How can I use an Openlayer 'overlay' inside React?
body: <p>I created a simple card with react and I want to display an overlay.
  But the overlay is not showing and I have no errors in the console.</p>
  
  <p>I declare the map in the constructor</p>
  
  <pre><code> // Declaration of the map
      this.olmap = new Map({
        target: null,
        layers: [this.osm],
        view: new View({
          center: this.state.center,
          zoom: this.state.zoom
        })
  
      })
  
      // Déclaration of the Marker
      this.marker = new Overlay({
        position: fromLonLat([1.3529599, 44.0221252]),
        positioning: "center-center",
        element: document.getElementById("marker"),
        stopEvent: false
      });
      //console.log(this.marker);
  
      // Adding to the Map Object
      this.olmap.addOverlay(this.marker);
  
  </code></pre>
  
  <p>and here is the rendering</p>
  
  <pre><code>render() {
  
      return (
        &lt;&gt;
          &lt;div id="map15" style={{ width: "100%", height: "360px" }} /&gt;
          &lt;div style={{ display: "none" }}&gt;
            {/* Marker */}
            &lt;div 
            id="marker" 
            title="Marker"
            style={{
              width: "20px",
              height: "20px",
              border: "1px solid #088",
              borderRadius: "10px",
              backgroundColor: "#0FF",
              opacity: "0.5"
            }}
            /&gt;
          &lt;/div&gt;
        &lt;/&gt;
      );
    }
  }
  </code></pre>