Fix bug where there are duplicate captions (#4534)

* fix bug

* Change files

Author: carocao-msft

change-beta/@azure-communication-react-f694a4eb-bf80-4d20-9e65-4d25715fa09e.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Captions",
+  "comment": "Fix bug when there are duplicate captions",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f694a4eb-bf80-4d20-9e65-4d25715fa09e.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Captions",
+  "comment": "Fix bug when there are duplicate captions",
+  "packageName": "@azure/communication-react",
+  "email": "96077406+carocao-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/calling-component-bindings/src/captionsSelector.ts

@@ -110,7 +110,7 @@ export const _captionsBannerSelector: _CaptionsBannerSelector = reselect.createS
     const captionsInfo = captions?.map((c, index) => {
       const userId = getCaptionsSpeakerIdentifier(c);
       return {
-        id: c.speaker.displayName ?? 'Unnamed Participant' + index,
+        id: (c.speaker.displayName ?? 'Unnamed Participant') + index,
         displayName: c.speaker.displayName ?? 'Unnamed Participant',
         captionText: c.captionText ?? '',
         userId