diff --git a/change-beta/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json b/change-beta/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json
new file mode 100644
index 00000000000..0f94d802eb5
--- /dev/null
+++ b/change-beta/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Replace useId with a communication react specific id generator for React 16",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json b/change/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json
new file mode 100644
index 00000000000..0f94d802eb5
--- /dev/null
+++ b/change/@azure-communication-react-e86c75be-bb27-4e36-adbe-4baadcbd8787.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Replace useId with a communication react specific id generator for React 16",
+  "packageName": "@azure/communication-react",
+  "email": "edwardlee@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/ParticipantItem.tsx b/packages/react-components/src/components/ParticipantItem.tsx
index 62e1984d25e..d2cb9082c3f 100644
--- a/packages/react-components/src/components/ParticipantItem.tsx
+++ b/packages/react-components/src/components/ParticipantItem.tsx
@@ -14,7 +14,7 @@ import {
   Stack,
   Text
 } from '@fluentui/react';
-import React, { useId, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
 import { useLocale } from '../localization';
 import { useTheme } from '../theming';
@@ -32,6 +32,7 @@ import { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-u
 /* @conditional-compile-remove(one-to-n-calling) */
 /* @conditional-compile-remove(PSTN-calls) */
 import { ParticipantState } from '../types';
+import { useId } from '@fluentui/react-hooks';
 
 /**
  * Fluent styles for {@link ParticipantItem}.
diff --git a/packages/react-composites/src/composites/common/ParticipantContainer.tsx b/packages/react-composites/src/composites/common/ParticipantContainer.tsx
index 44fb34abbe5..8578966453e 100644
--- a/packages/react-composites/src/composites/common/ParticipantContainer.tsx
+++ b/packages/react-composites/src/composites/common/ParticipantContainer.tsx
@@ -1,6 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import React, { useId, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   participantListContainerStyle,
   participantListMobileStyle,
@@ -17,6 +17,7 @@ import {
 } from '@internal/react-components';
 import { FocusZone, Stack, Text, useTheme } from '@fluentui/react';
 import { AvatarPersona, AvatarPersonaDataCallback } from './AvatarPersona';
+import { useId } from '@fluentui/react-hooks';
 
 type ParticipantContainerProps = {
   onRenderAvatar?: OnRenderAvatarCallback;