reactjs - React で openlayers 情報ウィンドウを表示する

Question

ユーザーが地図に表示されているマーカーの 1 つをクリックすると、情報ウィンドウ (オーバーレイ ポップアップ) を表示しようとしています。コードは次のとおりです。

export const Home = () => {
  const { centerPoint, zoomValue, testSites } = useContext(AppContext);
  const [layer, setLayer] = useState<VectorLayer>(new VectorLayer({}));
  const [popup, setPopup] = useState<Overlay>(new Overlay({}));
  const popupRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
  const [map] = useState(
    new Map({
      interactions: defaultInteractions().extend([
        new DragRotateAndZoom()
      ]),
      controls: defaultControls().extend([
        new ScaleLine({
          units: 'imperial'
        })
      ]),
      target: '',
      layers: [new TileLayer({
        source: new SourceOSM()
      })],
      view: new View({
        center: fromLonLat([centerPoint.longitude, centerPoint.latitude]),
        zoom: zoomValue
      })
    })
  );

  useEffect(() => {
    map.setTarget('map');
    map.on('click', (event) => {
      const feature = map.forEachFeatureAtPixel(event.pixel, (feature) => {
        return feature;
      });

      if (feature) {
        popup.setPosition(event.coordinate);
        if (contentRef.current) {
          contentRef.current.innerHTML = '<p>' + feature.getProperties().name + '</p>';
        }
      }
    });
    map.on('pointermove', (event) => {
      if (!event.dragging) {
        map.getTargetElement().style.cursor = map.hasFeatureAtPixel(map.getEventPixel(event.originalEvent)) ? 'pointer' : '';
      }
    });

    setPopup(new Overlay({
      element: popupRef.current,
      positioning: 'bottom-center' as OverlayPositioning,
      stopEvent: false,
      offset: [9, 9],
    }));
  }, [map]);

  useEffect(() => {
    map.addOverlay(popup);
  }, [popup, map]);

  useEffect(() => {
    if (testSites.length) {
      const features: Feature[] = [];
      testSites.forEach((testSite: TestSite) => {
        const feature = new Feature({
          geometry: new Point(fromLonLat([testSite.longitude, testSite.latitude])),
          name: testSite.name,
          address: testSite.address,
          city: testSite.city,
          state: testSite.state,
          notes: testSite.notes
        });

        feature.setStyle(new Style({
          image: new Icon({
            src: 'images/site.png'
          })
        }));
        features.push(feature);
      });
      setLayer(new VectorLayer({
        source: new VectorSource({
          features: features
        })
      }));
      if (layer.getProperties().source !== null) {
        map.addLayer(layer);
      }
    }
    map.getView().animate({zoom: zoomValue}, {center: fromLonLat([centerPoint.longitude, centerPoint.latitude])}, {duration: 1000});
  }, [centerPoint, zoomValue, map, testSites]);

  return (
    <div className="map-wrapper">
      <div id="map"></div>
      <div id="popup" className="map-popup" ref={popupRef}>
        <div id="popup-content" ref={contentRef}></div>
      </div>
    </div>
  );
};

機能アイコンのクリック時に情報ウィンドウを表示することを除いて、ほとんどすべてが正常に機能します。私が言えることから、クリック時の位置は、 を含むものではなく、別の div に適用されています。以下のスクリーンショットを参照してください。どんな助けでも大歓迎です。ありがとう。