diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 433ad1cbc..44bc6499f 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useMemo, useRef, useState } from 'react';
+import React, { ReactElement, ReactNode, useRef, useState } from 'react';
 import format from 'date-fns/format';
 import './index.scss';
 
@@ -202,7 +202,7 @@ export function MessageContent(props: MessageContentProps): ReactElement {
   const showThreadReplies = isNotSpecialMessage && displayThreadReplies;
   const showRightContent = isNotSpecialMessage && !isByMe && !isMobile;
 
-  const getTotalBottom = (): number => {
+  const getTotalBottom = (): string => {
     let sum = 2;
     if (threadRepliesRef.current) {
       sum += 4 + threadRepliesRef.current.clientHeight;
@@ -210,11 +210,9 @@ export function MessageContent(props: MessageContentProps): ReactElement {
     if (feedbackButtonsRef.current) {
       sum += 4 + feedbackButtonsRef.current.clientHeight;
     }
-    return sum;
+    return sum > 0 ? sum + 'px' : '';
   };
 
-  const totalBottom = useMemo(() => getTotalBottom(), []);
-
   const onCloseFeedbackForm = () => {
     setShowFeedbackModal(false);
   };
@@ -291,7 +289,7 @@ export function MessageContent(props: MessageContentProps): ReactElement {
             className: 'sendbird-message-content__left__avatar',
             isByMe,
             displayThreadReplies,
-            bottom: totalBottom > 0 ? totalBottom + 'px' : '',
+            bottom: getTotalBottom(),
           })
         }
         {/* outgoing menu */}