adding deboucing and cleaning up flow

packages/desktop/src/components/lines/lineIcon/index.tsx

@@ -14,8 +14,13 @@ export default function LineIcon({ sourceImages }: { sourceImages: string[] }) {
       }}
       className="shadow-lg"
     >
-      {sourceImages?.map((avatarSrc) => (
-        <Avatar src={avatarSrc} shape="square" size={"default"} />
+      {sourceImages?.map((avatarSrc, index) => (
+        <Avatar
+          key={`lineIcon-${avatarSrc}-${index}`}
+          src={avatarSrc}
+          shape="square"
+          size={"default"}
+        />
       ))}
     </Avatar.Group>
   );

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -54,8 +54,13 @@ export default function LineRow({
           }}
           className="shadow-lg"
         >
-          {lineDetails.profilePicsLiveBroadcasters.map((avatarSrc) => (
-            <Avatar src={avatarSrc} shape="square" size={"small"} />
+          {lineDetails.profilePicsLiveBroadcasters.map((avatarSrc, index) => (
+            <Avatar
+              key={`lineListActivitySection-${avatarSrc}-${index}`}
+              src={avatarSrc}
+              shape="square"
+              size={"small"}
+            />
           ))}
         </Avatar.Group>
       );