diff --git a/components/lib/hooks/useDisplayOrder.js b/components/lib/hooks/useDisplayOrder.js
index 71f8863377..3d2f1b38ab 100644
--- a/components/lib/hooks/useDisplayOrder.js
+++ b/components/lib/hooks/useDisplayOrder.js
@@ -9,21 +9,20 @@ export const useDisplayOrder = (group, isVisible = true) => {
 
     React.useEffect(() => {
         if (isVisible) {
-            if (!(group in groupToDisplayedElements)) {
+            if (!groupToDisplayedElements[group]) {
                 groupToDisplayedElements[group] = [];
             }
 
-            const newDisplayOrder = groupToDisplayedElements[group].length + 1;
+            const newDisplayOrder = groupToDisplayedElements[group].push(uid);
 
-            groupToDisplayedElements[group].push(uid);
             setDisplayOrder(newDisplayOrder);
 
             return () => {
-                delete groupToDisplayedElements[group][newDisplayOrder];
-                const lastOrder = groupToDisplayedElements[group].findLastIndex((el) => el !== undefined);
+                const index = groupToDisplayedElements[group].indexOf(uid);
 
-                // Reduce array length, by removing undefined elements at the end of array:
-                groupToDisplayedElements[group].splice(lastOrder + 1);
+                if (index !== -1) {
+                    groupToDisplayedElements[group].splice(index, 1);
+                }
 
                 setDisplayOrder(undefined);
             };