Add type

src/components/Chat/MessageItem.tsx

@@ -98,8 +98,26 @@ const UserBadge = memo(({ userInfo }) => {
   );
 });
 
-export const MessageItem = memo(
+type MessageItemProps = {
-  ({
+  handleReaction: (reaction: string, messageId: string) => void;
+  isLast: boolean;
+  isPrivate: boolean;
+  isShowingAsReply?: boolean;
+  isTemp: boolean;
+  isUpdating: boolean;
+  lastSignature: any;
+  message: any;
+  myAddress: any;
+  onEdit: (messageId: string) => void;
+  onReply: (messageId: string) => void;
+  onSeen: () => void;
+  reactions: any; // could be null, or type it more strictly
+  reply: any; // same here
+  replyIndex: number;
+  scrollToItem: (index: number) => void;
+};
+
+export const MessageItemComponent = ({
   handleReaction,
   isLast,
   isPrivate,
@@ -116,7 +134,7 @@ export const MessageItem = memo(
   reply,
   replyIndex,
   scrollToItem,
-  }) => {
+}: MessageItemProps) => {
   const { getIndividualUserInfo } = useContext(QORTAL_APP_CONTEXT);
   const [anchorEl, setAnchorEl] = useState(null);
   const [selectedReaction, setSelectedReaction] = useState(null);
@@ -623,8 +641,12 @@ export const MessageItem = memo(
       </MessageWragger>
     </>
   );
-  }
+};
-);
+
+const MemoizedMessageItem = memo(MessageItemComponent);
+MemoizedMessageItem.displayName = 'MessageItem'; // It ensures React DevTools shows MessageItem as the name (instead of "Anonymous" or "Memo")
+
+export const MessageItem = MemoizedMessageItem;
 
 export const ReplyPreview = ({ message, isEdit = false }) => {
   const theme = useTheme();