diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx
index 95b679ef2d..c528a90562 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatActivityLogItem.tsx
@@ -25,14 +25,13 @@ const renderActivityArrow = (activity) => {
 };
 
 type WebChatActivityLogItemProps = {
-  index: number;
   item: ConversationActivityTrafficItem;
   isSelected?: boolean;
   onClickTraffic: (data: WebChatInspectionData) => void;
 };
 
 export const WebChatActivityLogItem: React.FC<WebChatActivityLogItemProps> = (props) => {
-  const { index, item, isSelected = false, onClickTraffic } = props;
+  const { item, isSelected = false, onClickTraffic } = props;
   const { appLocale } = useRecoilValue(userSettingsState);
 
   const onClick = useCallback(() => {
@@ -40,7 +39,7 @@ export const WebChatActivityLogItem: React.FC<WebChatActivityLogItemProps> = (pr
   }, [item, onClickTraffic]);
 
   return (
-    <span key={`webchat-activity-item-${index}`} css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
+    <span css={[clickable, hoverItem(isSelected), logItem]} onClick={onClick}>
       {renderTimeStamp(item.timestamp, appLocale)}
       {renderActivityArrow(item.activity)}
       <span css={clickableSegment}>{item.activity.type || 'unknown'}</span>
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
index 78c514cd09..4f2a6c7dbd 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatLogContent.tsx
@@ -134,7 +134,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'activity':
           return (
             <WebChatActivityLogItem
-              index={index}
+              key={`webchat-activity-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}
@@ -144,7 +144,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'network':
           return (
             <WebChatNetworkLogItem
-              index={index}
+              key={`webchat-network-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}
@@ -154,7 +154,7 @@ export const WebChatLogContent: React.FC<DebugPanelTabHeaderProps> = ({ isActive
         case 'networkError':
           return (
             <WebChatNetworkLogItem
-              index={index}
+              key={`webchat-network-item-${index}`}
               isSelected={itemIsSelected(item, inspectionData)}
               item={item}
               onClickTraffic={onClickTraffic}
diff --git a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx
index 38890f8780..ed34b6e94b 100644
--- a/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx
+++ b/Composer/packages/client/src/pages/design/DebugPanel/TabExtensions/WebChatLog/WebChatNetworkLogItem.tsx
@@ -24,14 +24,13 @@ const redErrorText = css`
 `;
 
 type WebChatNetworkLogItemProps = {
-  index: number;
   item: ConversationNetworkTrafficItem | ConversationNetworkErrorItem;
   isSelected?: boolean;
   onClickTraffic: (data: WebChatInspectionData) => void;
 };
 
 export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (props) => {
-  const { index, item, isSelected = false, onClickTraffic } = props;
+  const { item, isSelected = false, onClickTraffic } = props;
   const { appLocale } = useRecoilValue(userSettingsState);
   const onClickRequest = useCallback(() => {
     onClickTraffic({ item, mode: 'request' });
@@ -49,7 +48,7 @@ export const WebChatNetworkLogItem: React.FC<WebChatNetworkLogItemProps> = (prop
     ) : null;
 
   return (
-    <div key={`webchat-network-item-${index}`} css={[logItem, hoverItem(isSelected), networkItem]}>
+    <div css={[logItem, hoverItem(isSelected), networkItem]}>
       <span>
         {renderTimeStamp(item.timestamp, appLocale)}
         <span css={[clickableSegment]} onClick={onClickRequest}>