diff --git a/src/components/DuosHeader.jsx b/src/components/DuosHeader.jsx
index cb2ac9efa..983b644de 100644
--- a/src/components/DuosHeader.jsx
+++ b/src/components/DuosHeader.jsx
@@ -365,7 +365,7 @@ const DuosHeader = (props) => {
   };
 
   const makeNotifications = () => {
-    return state.notificationData.map((d, index) => <Notification notificationData={d} key={index} />);
+    return state.notificationData.map((d, index) => <Notification notificationData={d} key={index} divKey={index} />);
   };
 
   const toggleDrawer = (boolVal) => {
diff --git a/src/components/Notification.js b/src/components/Notification.js
index af8af29be..27ef4ccb4 100644
--- a/src/components/Notification.js
+++ b/src/components/Notification.js
@@ -8,8 +8,8 @@ import ReportIcon from '@mui/icons-material/Report';
 import style from './Notification.module.css';
 
 export const Notification = (props) => {
-  const {notificationData, key} = props;
-  let notificationDiv = <div key={key} style={{display: 'none'}}/>;
+  const {notificationData, divKey} = props;
+  let notificationDiv = <div key={divKey} style={{display: 'none'}}/>;
 
   if (!isEmpty(notificationData)) {
     const iconStyle = {
@@ -40,7 +40,7 @@ export const Notification = (props) => {
     // eslint-disable-next-line react/no-children-prop
     const content = <ReactMarkdown children={notificationData.message} className={style['underlined']}/>;
     notificationDiv = <div
-      key={key}
+      key={divKey}
       className={'row no-margin alert alert-' + notificationData.level}>
       <div style={{float: 'left'}}>{icon}</div>
       <div>{content}</div>