React中的Openlayers弹出窗口|如何？

import 'ol/ol.css';
import { Map, Overlay } from 'ol';
import OverlayPositioning from 'ol/OverlayPositioning';

constructor(props) {
  super(props);
  this.map = null;
  this.overlay = null;
}

componentDidMount() {
  this.initMap();
  this.initOverlay();
}

initMap() {
  this.map = new Map({
    target: 'map-container', // 地图容器的DOM元素id
    layers: [
      // 添加你需要的地图图层
    ],
    view: new View({
      // 设置地图的初始视图
    })
  });
}

initOverlay() {
  this.overlay = new Overlay({
    element: document.getElementById('popup'), // 弹出窗口的DOM元素id
    positioning: OverlayPositioning.BOTTOM_CENTER, // 弹出窗口的位置
    stopEvent: false // 允许地图交互事件继续触发
  });
  this.map.addOverlay(this.overlay);
}

showPopup() {
  const coordinate = [x, y]; // 弹出窗口的位置坐标
  this.overlay.setPosition(coordinate);
  this.overlay.setElement(document.getElementById('popup'));
}

hidePopup() {
  this.overlay.setElement(null);
}