diff --git a/src/components/footer/icons/mic-menu/index.tsx b/src/components/footer/icons/mic-menu/index.tsx
index dc77b400..2fba0e91 100644
--- a/src/components/footer/icons/mic-menu/index.tsx
+++ b/src/components/footer/icons/mic-menu/index.tsx
@@ -22,6 +22,7 @@ const MicMenu = ({ currentRoom }: IMicMenuProps) => {
               </MenuButton>
 
               <Transition
+                as={'div'}
                 show={open}
                 enter="transition duration-100 ease-out"
                 enterFrom="transform scale-95 opacity-0"
diff --git a/src/components/footer/icons/mic-menu/items.tsx b/src/components/footer/icons/mic-menu/items.tsx
index 6ce2e51c..8616dca1 100644
--- a/src/components/footer/icons/mic-menu/items.tsx
+++ b/src/components/footer/icons/mic-menu/items.tsx
@@ -32,9 +32,9 @@ const MicMenuItems = ({ currentRoom }: IMicMenuItemsProps) => {
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
-    const devicesMenu = audioDevices.map((device) => {
+    const devicesMenu = audioDevices.map((device, i) => {
       return (
-        <div className="" role="none" key={device.id}>
+        <div className="" role="none" key={`${device.id}-${i}`}>
           <MenuItem>
             {() => (
               <p
diff --git a/src/components/footer/icons/webcam-menu/index.tsx b/src/components/footer/icons/webcam-menu/index.tsx
index 5079a9e0..425ff60c 100644
--- a/src/components/footer/icons/webcam-menu/index.tsx
+++ b/src/components/footer/icons/webcam-menu/index.tsx
@@ -22,6 +22,7 @@ const WebcamMenu = ({ currentRoom }: IWebcamMenuProps) => {
 
               {/* Use the Transition component. */}
               <Transition
+                as={'div'}
                 show={open}
                 enter="transition duration-100 ease-out"
                 enterFrom="transform scale-95 opacity-0"
diff --git a/src/components/footer/icons/webcam-menu/items.tsx b/src/components/footer/icons/webcam-menu/items.tsx
index 21267140..e1fd1f85 100644
--- a/src/components/footer/icons/webcam-menu/items.tsx
+++ b/src/components/footer/icons/webcam-menu/items.tsx
@@ -29,9 +29,9 @@ const WebcamMenuItems = ({ currentRoom }: IWebcamMenuItemsProps) => {
   const [newDevice, setNewDevice] = useState<string>();
 
   useEffect(() => {
-    const devicesMenu = videoDevices.map((device) => {
+    const devicesMenu = videoDevices.map((device, i) => {
       return (
-        <div className="" role="none" key={device.id}>
+        <div className="" role="none" key={`${device.id}-${i}`}>
           <MenuItem>
             {() => (
               <p