fix: Prevent displaying unread count with empty unread since (#652)

### Description Of Changes

* fix: Do not display the UnreadCount comp when unreadSince is null

[UIKIT-4189](https://sendbird.atlassian.net/browse/UIKIT-4189)

Author: HoonBaek

src/modules/Channel/components/MessageList/index.tsx

@@ -208,26 +208,28 @@ const MessageList: React.FC<MessageListProps> = ({
       {currentGroupChannel?.isFrozen && (
         <FrozenNotification className="sendbird-conversation__messages__notification" />
       )}
-      <UnreadCount
-        className="sendbird-conversation__messages__notification"
-        count={currentGroupChannel?.unreadMessageCount}
-        time={unreadSince}
-        onClick={() => {
-          if (scrollRef?.current?.scrollTop) {
-            scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
-          }
-          if (!disableMarkAsRead && !!currentGroupChannel) {
-            markAsReadScheduler.push(currentGroupChannel);
-            messagesDispatcher({
-              type: messageActionTypes.MARK_AS_READ,
-              payload: { channel: currentGroupChannel },
-            });
-          }
-          setInitialTimeStamp(null);
-          setAnimatedMessageId(null);
-          setHighLightedMessageId(null);
-        }}
-      />
+      {unreadSince && (
+        <UnreadCount
+          className="sendbird-conversation__messages__notification"
+          count={currentGroupChannel?.unreadMessageCount}
+          time={unreadSince}
+          onClick={() => {
+            if (scrollRef?.current?.scrollTop) {
+              scrollRef.current.scrollTop = (scrollRef?.current?.scrollHeight ?? 0) - (scrollRef?.current?.offsetHeight ?? 0);
+            }
+            if (!disableMarkAsRead && !!currentGroupChannel) {
+              markAsReadScheduler.push(currentGroupChannel);
+              messagesDispatcher({
+                type: messageActionTypes.MARK_AS_READ,
+                payload: { channel: currentGroupChannel },
+              });
+            }
+            setInitialTimeStamp(null);
+            setAnimatedMessageId(null);
+            setHighLightedMessageId(null);
+          }}
+        />
+      )}
       {
         // This flag is an unmatched variable
         scrollBottom > SCROLL_BOTTOM_PADDING && (

src/modules/Channel/context/dux/initialState.js

@@ -14,6 +14,10 @@ export default {
   latestMessageTimeStamp: 0,
   emojiContainer: {},
   unreadSince: null,
+  /**
+   * unreadSince is a formatted date information string
+   * It's used only for the {unreadSince && <UnreadCount time={unreadSince} />}
+   */
   isInvalid: false,
   messageListParams: null,
 };