Как я могу использовать Openlayer «наложение» внутри React?

Question

Я создал простую карту с реакцией и хочу показать оверлей.Но наложение не отображается, и у меня нет ошибок в консоли.

Я объявляю карту в конструкторе

 // 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);

, и здесь отображается рендеринг

render() {

    return (
      <>
        <div id="map15" style={{ width: "100%", height: "360px" }} />
        <div style={{ display: "none" }}>
          {/* Marker */}
          <div 
          id="marker" 
          title="Marker"
          style={{
            width: "20px",
            height: "20px",
            border: "1px solid #088",
            borderRadius: "10px",
            backgroundColor: "#0FF",
            opacity: "0.5"
          }}
          />
        </div>
      </>
    );
  }
}

Answer 1

Я наконец нашел решение, я переместил объявление маркера в componentDidMount

componentDidMount() {
    this.olmap.setTarget("map15");

    // Déclaration of the Marker
    this.marker = new Overlay({
      position: fromLonLat([-43.3307, -22.9201]),
      positioning: "center-center",
      element: document.getElementById("marker"),
      stopEvent: false
    });
    //console.log(this.marker);

    // Adding to the Map Object
    this.olmap.addOverlay(this.marker);
    console.log(this.olmap);
  }