From d4eaca24dda13ed481fcc7650ab1de682a96d620 Mon Sep 17 00:00:00 2001
From: Umang Utkarsh <95426993+umangutkarsh@users.noreply.github.com>
Date: Thu, 18 Jan 2024 16:34:08 +0530
Subject: [PATCH] Warning 4 Resolved (#363)

* key-prop-warning-fix

* key-prop-warning-fix2
---
 .../ChatInput/ChatInputFormattingToolbar.js   | 53 +++++++++----------
 1 file changed, 26 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
index 00d07dc32..228a24759 100644
--- a/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
+++ b/packages/react/src/components/ChatInput/ChatInputFormattingToolbar.js
@@ -10,7 +10,7 @@ import AudioMessageRecorder from './AudioMessageRecorder';
 import { Box } from '../Box';
 import { Icon } from '../Icon';
 import { ActionButton } from '../ActionButton';
-import {Tooltip} from "../Tooltip"
+import { Tooltip } from "../Tooltip"
 import useComponentOverrides from '../../theme/useComponentOverrides';
 
 const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
@@ -71,17 +71,17 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
     >
       {isUserAuthenticated && (
         <>
-        <Tooltip text="Emoji" position="top">
-          <div>
-          <ActionButton
-            square
-            ghost
-            disabled={isRecordingMessage}
-            onClick={() => setEmojiOpen((t) => !t)}
-          >
-            <Icon name="emoji" size="1.25rem" />
-          </ActionButton>
-          </div>
+          <Tooltip text="Emoji" position="top">
+            <div>
+              <ActionButton
+                square
+                ghost
+                disabled={isRecordingMessage}
+                onClick={() => setEmojiOpen((t) => !t)}
+              >
+                <Icon name="emoji" size="1.25rem" />
+              </ActionButton>
+            </div>
           </Tooltip>
           <Popup
             modal
@@ -102,22 +102,21 @@ const ChatInputFormattingToolbar = ({ messageRef, inputRef }) => {
         </>
       )}
       {formatter.map((item, index) => (
-        
-        <Tooltip text={item.name} position="top">
-        <ActionButton
-          square
-          disabled={isRecordingMessage}
-          ghost
-          onClick={() => {
-            wrapSelection(item.pattern);
-          }}
-          key={index}
-        >  
-          <Icon disabled={isRecordingMessage} name={item.name} size="1.25rem" />
-          
-        </ActionButton>
+
+        <Tooltip text={item.name} position="top" key={index}>
+          <ActionButton
+            square
+            disabled={isRecordingMessage}
+            ghost
+            onClick={() => {
+              wrapSelection(item.pattern);
+            }}
+          >
+            <Icon disabled={isRecordingMessage} name={item.name} size="1.25rem" />
+
+          </ActionButton>
         </Tooltip>
-       
+
       ))}
       <Tooltip text="Audio Message" position="top"><AudioMessageRecorder /></Tooltip>
       <ActionButton