diff --git a/src/smart-components/Conversation/hooks/useHandleChannelEvents.js b/src/smart-components/Conversation/hooks/useHandleChannelEvents.js
index 6567891ab..cafaf73e9 100644
--- a/src/smart-components/Conversation/hooks/useHandleChannelEvents.js
+++ b/src/smart-components/Conversation/hooks/useHandleChannelEvents.js
@@ -20,7 +20,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
   scrollRef,
   setQuoteMessage,
 }) {
-  const channelUrl = currentGroupChannel && currentGroupChannel.url;
+  const channelUrl = currentGroupChannel && currentGroupChannel?.url;
   useEffect(() => {
     const messageReceiverId = uuidv4();
     if (channelUrl && sdk && sdk.ChannelHandler) {
@@ -29,7 +29,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
 
       ChannelHandler.onMessageReceived = (channel, message) => {
         // donot update if hasMoreToBottom
-        if (compareIds(channel.url, currentGroupChannel.url) && !hasMoreToBottom) {
+        if (compareIds(channel.url, channelUrl) && !hasMoreToBottom) {
           let scrollToEnd = false;
           try {
             const { current } = scrollRef;
@@ -55,7 +55,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
             }
           }
         }
-        if (compareIds(channel.url, currentGroupChannel.url) && hasMoreToBottom) {
+        if (compareIds(channel.url, channelUrl) && hasMoreToBottom) {
           messagesDispatcher({
             type: messageActions.UPDATE_UNREAD_COUNT,
             payload: { channel },
@@ -63,6 +63,30 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
         }
       };
 
+      /**
+       * We need to update current channel with the channel,
+       * when onReadReceiptUpdated or onDeliveryReceiptUpdated are called,
+       * because cachedReadReceiptStatus and cachedDeliveryReceiptStatus properties were changed
+       */
+      ChannelHandler.onReadReceiptUpdated = (channel) => {
+        if (compareIds(channel.url, channelUrl)) {
+          logger.info('Channel | useHandleChannelEvents: onReadReceiptUpdated', channel);
+          messagesDispatcher({
+            type: messageActions.SET_CURRENT_CHANNEL,
+            payload: channel,
+          });
+        }
+      };
+      ChannelHandler.onDeliveryReceiptUpdated = (channel) => {
+        if (compareIds(channel.url, channelUrl)) {
+          logger.info('Channel | useHandleChannelEvents: onDeliveryReceiptUpdated', channel);
+          messagesDispatcher({
+            type: messageActions.SET_CURRENT_CHANNEL,
+            payload: channel,
+          });
+        }
+      };
+
       ChannelHandler.onMessageUpdated = (channel, message) => {
         logger.info('Channel | useHandleChannelEvents: onMessageUpdated', message);
         messagesDispatcher({
@@ -97,7 +121,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onChannelChanged = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onChannelChanged', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -107,7 +131,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onChannelFrozen = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onChannelFrozen', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -117,7 +141,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onChannelUnfrozen = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onChannelUnFrozen', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -127,7 +151,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onUserMuted = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onUserMuted', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -137,7 +161,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onUserUnmuted = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onUserUnmuted', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -147,7 +171,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onUserBanned = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onUserBanned', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
@@ -157,7 +181,7 @@ function useHandleChannelEvents({ currentGroupChannel, sdkInit, hasMoreToBottom
       };
 
       ChannelHandler.onOperatorUpdated = (groupChannel) => {
-        if (compareIds(groupChannel.url, currentGroupChannel.url)) {
+        if (compareIds(groupChannel.url, channelUrl)) {
           logger.info('Channel | useHandleChannelEvents: onOperatorUpdated', groupChannel);
           messagesDispatcher({
             type: messageActions.SET_CURRENT_CHANNEL,
diff --git a/src/ui/MessageContent/index.tsx b/src/ui/MessageContent/index.tsx
index 0f8112bcf..e5040b693 100644
--- a/src/ui/MessageContent/index.tsx
+++ b/src/ui/MessageContent/index.tsx
@@ -32,7 +32,6 @@ import {
   isTextMessage,
   isOGMessage,
   isThumbnailMessage,
-  getOutgoingMessageState,
   getSenderName,
 } from '../../utils';
 import { UserProfileContext } from '../../lib/UserProfileContext';
@@ -95,7 +94,6 @@ export default function MessageContent({
   const supposedHoverClassName = supposedHover ? 'supposed-hover' : '';
   const useReplying = !!((replyType === 'QUOTE_REPLY') && message?.parentMessageId && message?.parentMessage);
   const useReplyingClassName = useReplying ? 'use-quote' : '';
-
   if (message?.isAdminMessage?.() || message?.messageType === 'admin') {
     return (<ClientAdminMessage message={message} />);
   }
@@ -205,7 +203,6 @@ export default function MessageContent({
                 <MessageStatus
                   message={message}
                   channel={channel}
-                  status={getOutgoingMessageState(channel, message)}
                 />
               </div>
             </div>
diff --git a/src/ui/MessageStatus/__tests__/MessageStatus.spec.js b/src/ui/MessageStatus/__tests__/MessageStatus.spec.js
index a47a22ce2..0c6caa52f 100644
--- a/src/ui/MessageStatus/__tests__/MessageStatus.spec.js
+++ b/src/ui/MessageStatus/__tests__/MessageStatus.spec.js
@@ -13,7 +13,7 @@ jest.mock('date-fns/format', () => () => ('mock-date'));
 describe('MessageStatus', () => {
   it('should contain className', function () {
     const text = "example-text";
-    const component = shallow(<MessageStatus className={text} />);
+    const component = shallow(<MessageStatus className={text} message={dummyMessage} />);
 
     expect(
       component.find(".sendbird-message-status").hasClass(text)
@@ -23,7 +23,7 @@ describe('MessageStatus', () => {
   it('should do a snapshot test of the MessageStatus DOM', function () {
     const text = "example-text";
     const component = renderer.create(
-      <MessageStatus className={text} status={MessageStatusTypes.SENT} message={dummyMessage} />,
+      <MessageStatus className={text} message={dummyMessage} />,
     );
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -33,10 +33,11 @@ describe('MessageStatus', () => {
     const text = "example-text";
     const failedMsg = {
       ...dummyMessage,
+      sendingStatus: 'failed',
       isResendable: () => { return true; },
     };
     const component = renderer.create(
-      <MessageStatus className={text} status={MessageStatusTypes.FAILED} message={failedMsg} />,
+      <MessageStatus className={text} message={failedMsg} />,
     );
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -46,9 +47,10 @@ describe('MessageStatus', () => {
     const text = "example-text";
     const failedMsg = {
       ...dummyMessage,
+      sendingStatus: 'failed',
     };
     const component = renderer.create(
-      <MessageStatus className={text} status={MessageStatusTypes.FAILED} message={failedMsg} />,
+      <MessageStatus className={text} message={failedMsg} />,
     );
     let tree = component.toJSON();
     expect(tree).toMatchSnapshot();
diff --git a/src/ui/MessageStatus/index.jsx b/src/ui/MessageStatus/index.jsx
index c13d29667..eb841db5c 100644
--- a/src/ui/MessageStatus/index.jsx
+++ b/src/ui/MessageStatus/index.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import format from 'date-fns/format';
@@ -9,6 +9,7 @@ import Label, { LabelColors, LabelTypography } from '../Label';
 import Loader from '../Loader';
 
 import {
+  getOutgoingMessageState,
   getOutgoingMessageStates,
   isSentStatus,
 } from '../../utils';
@@ -19,7 +20,6 @@ export default function MessageStatus({
   className,
   message,
   channel,
-  status,
 }) {
   const { dateLocale } = useContext(LocalizationContext);
   const showMessageStatusIcon = channel?.isGroupChannel()
@@ -39,6 +39,10 @@ export default function MessageStatus({
     [MessageStatusTypes.FAILED]: IconColors.ERROR,
   };
 
+  const messageStatus = useMemo(() => (
+    getOutgoingMessageState(channel, message)
+  ), [channel?.getUnreadMemberCount?.(message), channel?.getUndeliveredMemberCount?.(message)]);
+
   return (
     <div
       className={[
@@ -47,7 +51,7 @@ export default function MessageStatus({
       ].join(' ')}
     >
       {(showMessageStatusIcon) && (
-        (status === MessageStatusTypes.PENDING) ? (
+        (messageStatus === MessageStatusTypes.PENDING) ? (
           <Loader
             className="sendbird-message-status__icon"
             width="16px"
@@ -63,14 +67,14 @@ export default function MessageStatus({
         ) : (
           <Icon
             className="sendbird-message-status__icon"
-            type={iconType[status] || IconTypes.ERROR}
-            fillColor={iconColor[status]}
+            type={iconType[messageStatus] || IconTypes.ERROR}
+            fillColor={iconColor[messageStatus]}
             width="16px"
             height="16px"
           />
         )
       )}
-      {isSentStatus(status) && (
+      {isSentStatus(messageStatus) && (
         <Label
           className="sendbird-message-status__text"
           type={LabelTypography.CAPTION_3}
@@ -103,13 +107,13 @@ MessageStatus.propTypes = {
     isSuper: PropTypes.bool,
     isBroadcast: PropTypes.bool,
     isPublic: PropTypes.bool,
+    getUnreadMemberCount: PropTypes.func,
+    getUndeliveredMemberCount: PropTypes.func,
   }),
-  status: PropTypes.string,
 };
 
 MessageStatus.defaultProps = {
   className: '',
   message: null,
   channel: null,
-  status: '',
 };
diff --git a/src/ui/MessageStatus/messageDummyData.mock.js b/src/ui/MessageStatus/messageDummyData.mock.js
index cd429ed5b..48305cd80 100644
--- a/src/ui/MessageStatus/messageDummyData.mock.js
+++ b/src/ui/MessageStatus/messageDummyData.mock.js
@@ -28,6 +28,7 @@ export function generateNormalMessage(pretreatment) {
     reqId: "1579767478746",
     translations: {},
     requestState: "succeeded",
+    sendingStatus: "succeeded",
     requestedMentionUserIds: [],
     errorCode: 0,
     getUnreadMemberCount: () => 10,
@@ -70,6 +71,7 @@ export function generateLongMessage(pretreatment) {
     reqId: "1579767478746",
     translations: {},
     requestState: "succeeded",
+    sendingStatus: "succeeded",
     requestedMentionUserIds: [],
     errorCode: 0,
     requestState: 'DELIVERED',