Fix ref issue causing the menu to remain open unless an option is selected

src/app/features/room/MessageOptionsMenu.tsx

@@ -1,5 +1,5 @@
 import { Box, Icon, IconButton, Icons, Line, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, useEffect } from 'react';
+import React, { forwardRef, MouseEventHandler, useEffect } from 'react';
 
 import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
@@ -36,24 +36,27 @@ type BaseOptionProps = {
   closeMenu: () => void;
 };
 
-export function MessageDropdownMenu({
+export const MessageDropdownMenu = forwardRef<HTMLDivElement, BaseOptionProps>(
-  mEvent,
+  (
-  room,
+    {
-  mx,
+      mEvent,
-  relations,
+      room,
-  canSendReaction,
+      mx,
-  canEdit,
+      relations,
-  canDelete,
+      canSendReaction,
-  canPinEvent,
+      canEdit,
-  hideReadReceipts,
+      canDelete,
-  onReactionToggle,
+      canPinEvent,
-  onReplyClick,
+      hideReadReceipts,
-  onEditId,
+      onReactionToggle,
-  handleAddReactions,
+      onReplyClick,
-  closeMenu,
+      onEditId,
-}: BaseOptionProps) {
+      handleAddReactions,
-  return (
+      closeMenu,
-    <Menu>
+    },
+    ref
+  ) => (
+    <Menu ref={ref}>
       {canSendReaction && (
         <MessageQuickReactions
           onReaction={(key, shortcode) => {
@@ -130,8 +133,8 @@ export function MessageDropdownMenu({
         </>
       )}
     </Menu>
-  );
+  )
-}
+);
 
 type ExtendedOptionsProps = BaseOptionProps & {
   imagePackRooms: Room[] | undefined;