@codecademy/gamut

Index: package/dist/Popover/Popover.js
===================================================================
--- package/dist/Popover/Popover.js
+++ package/dist/Popover/Popover.js
@@ -1,9 +1,9 @@
 import { useElementDir, useLogicalProperties } from '@codecademy/gamut-styles';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useWindowScroll, useWindowSize } from 'react-use';
 import { FocusTrap } from '../FocusTrap';
-import { useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
+import { getRefElement, useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
 import { Beak, BeakBox, PatternContainer, PopoverContainer, PopoverPortal, RaisedDiv } from './elements';
 import { getBeakVariant } from './styles/beak';
 import { getDefaultOffset, resolveHorizontalSideForRtl } from './utils';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -112,12 +112,12 @@
       left: alignments[resolvedSideAlign]
     };
   }, [horizontalOffset, popoverHeight, popoverWidth, position, resolvedSideAlign, targetRect, verticalOffset]);
   useEffect(() => {
-    setTargetRect(targetRef?.current?.getBoundingClientRect());
+    setTargetRect(getRefElement(targetRef)?.getBoundingClientRect());
   }, [targetRef, isOpen, width, height, x, y]);
   const updateTargetPosition = useCallback(rect => {
-    const target = targetRef?.current;
+    const target = getRefElement(targetRef);
     if (!target) return;
     const newRect = rect || target.getBoundingClientRect();
     setTargetRect(newRect);
   }, [targetRef]);
@@ -131,9 +131,9 @@
     if (!isInViewport) onRequestClose?.();
   }, [targetRect, isInViewport, onRequestClose]);
   const handleClickOutside = useCallback(e => {
     const target = e.target;
-    const targetElement = targetRef.current;
+    const targetElement = getRefElement(targetRef);
     if (!targetElement) return;
 
     /**
      * Allows targetRef to be or contain a button that toggles the popover open and closed.
@@ -141,9 +141,9 @@
      */
     if (targetElement.contains(target)) return;
     onRequestClose?.();
   }, [onRequestClose, targetRef]);
-  if ((!isOpen || !targetRef) && !animation) return null;
+  if ((!isOpen || !targetRef.current) && !animation) return null;
   const alignment = (variant === 'primary' || beak) && beak !== 'center' ? 'aligned' : 'centered';
   const contents = /*#__PURE__*/_jsxs(PopoverContainer, {
     align: resolvedSideAlign,
     className: className,
@@ -186,9 +186,9 @@
     })]
   });
   return /*#__PURE__*/_jsx(PopoverPortal, {
     animation: animation,
-    isOpen: Boolean(isOpen && targetRef),
+    isOpen: Boolean(isOpen && targetRef.current),
     children: skipFocusTrap ? /*#__PURE__*/_jsx(_Fragment, {
       children: contents
     }) : /*#__PURE__*/_jsx(FocusTrap, {
       allowPageInteraction: true,