Menu.js

// states to hold the trigger and menu dimensions
const [triggerDimension, setTriggerDimension] = useState({
    top: 0,
    left: 0,
    width: 0,
    height: 0,
  });

const [modalDimensions, setModalDimensions] = useState({
    width: 0,
    height: 0,
  });
  
  
const calculateDimensions = () => {
    triggerWrapperRef?.current?.measureInWindow((x, y, width, height) => {
      setTriggerDimensions({
        top: Math.max(y, 0),
        left: x,
        width,
        height,
      });
    });

    setTimeout(() => {
      itemsWrapperRef?.current?.measureInWindow((x, y, width, height) => {
        setModalDimensions({ width, height });
      });
    }, 200);
  };

  // run the calculateDimensions each time the menu is visible
  useEffect(() => {
    if (menuVisible) {
      if (triggerWrapperRef?.current) calculateDimensions();
    }
  }, [menuVisible]);