diff --git a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
index 2f8794d66..c08f8bd29 100644
--- a/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
+++ b/src/renderer/components/item-list/item-grid-list/item-grid-list.tsx
@@ -404,15 +404,19 @@ const ListComponent = memo((props: ListChildComponentProps<GridItemProps>) => {
     }
 
     for (let i = startIndex; i <= stopIndex + columnCountToAdd; i += 1) {
-        items.push(
-            <div
-                className={clsx(styles.itemRow, styles[`gap-${gap}`])}
-                key={`card-${i}-${index}`}
-                style={{ '--columns': columns } as CSSProperties}
-            >
-                <ItemCard controls={controls} data={data[i]} itemType={itemType} withControls />
-            </div>,
-        );
+        if (i < data.length) {
+            items.push(
+                <div
+                    className={clsx(styles.itemRow, styles[`gap-${gap}`])}
+                    key={`card-${i}-${index}`}
+                    style={{ '--columns': columns } as CSSProperties}
+                >
+                    <ItemCard controls={controls} data={data[i]} itemType={itemType} withControls />
+                </div>,
+            );
+        } else {
+            items.push(null);
+        }
     }
 
     return (