diff --git a/docs/cookbook.md b/docs/cookbook.md
index 25aed7732f..4d4329f3e5 100644
--- a/docs/cookbook.md
+++ b/docs/cookbook.md
@@ -177,6 +177,8 @@ Here I am aiming for following styles:
   - Blue background
   - white colored text
 
+<img align="right" src="./images/6.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js
 const MessageSimpleStyled = (props) => {
   const { isMyMessage, message } = props;
@@ -214,6 +216,8 @@ const MessageSimpleStyled = (props) => {
 
 In this example I will support only two reactions - Monkey face (🐵) and Lion (🦁)
 
+<img align="right" src="./images/7.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js
 const MessageSimpleWithCustomReactions = (props) => (
     <MessageSimple
@@ -284,6 +288,8 @@ First you want to disable/hide the original reaction selector. `MessageSimple` c
 UI component as prop - `ReactionList`. If you set this prop to null, then original reaction list and thus reaction selector
 will be hidden/disabled
 
+<img align="right" src="./images/8.png" alt="IMAGE ALT TEXT HERE" width="280" border="1" style="float: right;" />
+
 ```js static
 const MessageWithoutReactionPicker = props => {
   return (
diff --git a/docs/images/6.png b/docs/images/6.png
new file mode 100644
index 0000000000..52ad8dc052
Binary files /dev/null and b/docs/images/6.png differ
diff --git a/docs/images/7.png b/docs/images/7.png
new file mode 100644
index 0000000000..086989fa9a
Binary files /dev/null and b/docs/images/7.png differ
diff --git a/docs/images/8.png b/docs/images/8.png
new file mode 100644
index 0000000000..c55758326e
Binary files /dev/null and b/docs/images/8.png differ
diff --git a/src/components/Message.js b/src/components/Message.js
index 300b09f83f..f499913afe 100644
--- a/src/components/Message.js
+++ b/src/components/Message.js
@@ -276,9 +276,13 @@ const Message = withKeyboardContext(
       if (dismissKeyboardOnMessageTouch) dismissKeyboard();
     };
 
-    getTotalReactionCount = () => {
+    getTotalReactionCount = (supportedReactions) => {
       const { emojiData } = this.props;
       let count = null;
+      if (!supportedReactions) {
+        supportedReactions = emojiData;
+      }
+
       const reactionCounts = this.props.message.reaction_counts;
 
       if (
@@ -288,7 +292,7 @@ const Message = withKeyboardContext(
       ) {
         count = 0;
         Object.keys(reactionCounts).map((key) => {
-          if (emojiData.find((e) => e.id === key)) {
+          if (supportedReactions.find((e) => e.id === key)) {
             count += reactionCounts[key];
           }
 
diff --git a/src/components/ReactionList.js b/src/components/ReactionList.js
index 994f0df71f..cbec979e69 100644
--- a/src/components/ReactionList.js
+++ b/src/components/ReactionList.js
@@ -142,8 +142,10 @@ export const ReactionList = themed(
             <Reactions>
               {renderReactions(latestReactions, supportedReactions)}
             </Reactions>
-            <ReactionCount reactionCounts={getTotalReactionCount()}>
-              {getTotalReactionCount()}
+            <ReactionCount
+              reactionCounts={getTotalReactionCount(supportedReactions)}
+            >
+              {getTotalReactionCount(supportedReactions)}
             </ReactionCount>
           </Container>
           <ImageWrapper visible={visible}>
diff --git a/types/index.d.ts b/types/index.d.ts
index f2814ff5e5..b798689775 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -973,7 +973,12 @@ export interface MessageSystemProps
 export interface ReactionListProps extends StyledComponentProps {
   latestReactions: Client.ReactionResponse[];
   openReactionSelector?(event: GestureResponderEvent): void;
-  getTotalReactionCount?(): string | number;
+  getTotalReactionCount?(
+    supportedReacions?: Array<{
+      icon: string;
+      id: string;
+    }>,
+  ): string | number;
   visible: boolean;
   position: string;
   supportedReactions?: Array<{