Javascript 如何使用TypeScript和React将地图弹出窗口放置在某个元素旁边的固定位置？

我不熟悉使用Google Maps API，我希望将弹出窗口始终放置在地图上元素旁边的固定位置，以便它可以与地图一起拖动，并使用TypeScript和React放置在地图上

我想做什么？

我有一个弹出窗口，当点击页面底部的一个按钮时显示。这些按钮称为区域，它们可能有与其相关的多边形

当用户单击其中一个按钮时，地图上将显示一个弹出窗口。此弹出窗口的位置如下所示：

如果区域按钮有一个多边形，则会读取该多边形的坐标，并将弹出窗口定位在多边形坐标处。如果没有多边形且设置了地址，则会在地址坐标处设置弹出位置。如果没有多边形，也没有地址，则会将弹出位置设置为谷歌地图的中心

但是现在我想把弹出窗口放在tools元素旁边，这样弹出窗口从tools元素到左边是16px，并且弹出窗口可以用地图拖动

下面是我的代码

function useArea() {
    const googleMap = useGoogleMaps();
    const popUpRef = React.useRef<any>();
    const [position, setPosition] = React.useState<google.maps.LatLng>();
    const [mapPopups, setMapPopups] = React.useState<MapPopup[]>([]);

    const navigateToPolygon = (area: area, address?: address) => { 
        const polygon = head(area.polygons);
        const coords = polygon && head(polygon.coordinate);
        let latLng = googleMap.googleMap.getCenter();
        if (polygon && coords) {
            latLng = new google.maps.LatLng(coords.latitude, coords.longitude);
        } else if (address) {
            latLng = new google.maps.LatLng(
                address.coordinate.latitude,
                address.coordinate.longitude
            );
        }
        setPosition(latLng); //this is where the popup position is set
        googleMap.googleMap.panTo(latLng);
        googleMap.googleMap.panBy(0, 100);
    };

    const showPopup = React.useCallback(() => { //this is where the popup is created
        if (popUpRef.current && pos) {
            const popup = new MapPopup(position, popUpRef.current);
            popup.setMap(googleMap.googleMap);
            setMapPopups([popup]);
        }
    }, [position, popUpRef, googleMap]);

    return {
        popUpRef,
        showPopUp,
        navigateToPolygon,
    }
}

function GoogleMapView() {
    const area = useArea();
    return (
        <Tools/> //this is the element to which the popup should be positioned in                relation to
        <Popup
            popUpRef={area.popUpRef}
            showPopUp={area.showPopUp}
        /> 
        <Areas area={area}/>
    );
}

function Tools () { //this is a component containing some icons
    return (
        <Wrapper>
            //some icons included
        </Wrapper>
    );
}

function Areas() {

    const selectPolygon = React.useCallback() => {
        area && area.navigateToPolygon(area, address);
    },[area]
    return (
        {
            areas.map(area => {
                return(
                    <Area onSelect={selectPolygon}/>
                );
            }
         }
     );
 }

 function Area ({onSelect}: Props) { //individual button Area component
     return (
         <Wrapper onClick={onSelect}/> // this calls the selectPolygon which in turn                  // calls navigateToPolygon function
     );
 }         


 function PopUp ({showPopUp, popUpRef}: Props) {
     useEffect(() => {
         showPopup();
     }, [showPopup]);
     return (
         <Wrapper ref={popUpRef}>
             //some other divs included here
         </Wrapper>
     );
 };

函数useArea（）{
const googleMap=useGoogleMaps（）；
const popUpRef=React.useRef

我希望它是怎样的


我想做什么？

我想获取工具组件内部的包装器div高度，并将其设置为弹出窗口的最大值。但此弹出窗口位置是使用setPos（latlng）设置的，如上面navigateToPolygon组件中的代码所示。在这种情况下应该设置什么值

编辑：
如果不是完整的解决方案，请至少有人提供一些起点，说明如何做到这一点。谢谢