How to place the map popup at a fixed place next to some element using TypeScript and React?

I am new to using Google Maps API and I want to place the popup always at the fixed place next to the element on the map such that it is draggable with the map and is placed on the map using TypeScript and React.

what i am trying to do?

I have a popup that is shown when one of the buttons on the bottom of page is clicked. These buttons are called areas and they might have polygons related to them.

when user clicks on one of these buttons then a popup is displayed on the map. the position of this popup is such that,

if there is a polygon for the area button then it reads the coordinates for this polygon and positions the popup at the polygon coordinates. if there is no polygon and has address set then it sets the popup position at the address coordinates. if there is no polygon and no address then it sets the popup position to the center of the google map.

But now i want to place the popup always at a place next to the tools element such that the popup is 16px from tools element to the left and the popup is draggable with the map.

below is my code,

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

From the above code, it is seen that in the MapView the Tools, PopUp, Areas components are rendered. clicking on one of the area displays a popup. if the popup is present for the area then the popup is positioned based on polygon coordinates. if no polygon and has address, popup is positioned based on the address coordinates. if no polygon and address then the popup is positioned at the center of the google map.

now i want to modify this code such that the popup is always displayed at a fixed place (irrespective of polygon, address present or not) on the google map such that it is 16px away to the left from Tools component on the google map....

I have to modify setPosition in navigateToPolygon method. but i am not sure how to do it. could someone help me with this. thanks.

i am new to using or writing code in relation to google maps. could someone help me with this. thanks.

EDIT:strong text

below is the picture how the popup is shown currently for the polygon with above code,

how i wanted it to be?

what i tried to do?

i was thinking to get the wrapper div inside Tools component height and set that as top value for the popup. but this popup position is set using setPos(latlng) as seen in above code in navigateToPolygon component. what value should be set in this case?????

EDIT: If not the complete solution could someone atleast provide some starting points as how it can be done. thanks