From 75d3a5d8d602d4978682dfbb6dad0ae956301e89 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 1 Jul 2025 16:26:31 +0200
Subject: [PATCH] fix react key issue

---
 .../components/SeriesSelector.tsx             |  2 +-
 .../impact-metrics/hooks/useUrlState.ts       | 27 ++++++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx b/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
index cb7bebed9f..9b6f0fd6bc 100644
--- a/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
+++ b/frontend/src/component/impact-metrics/ImpactMetricsControls/components/SeriesSelector.tsx
@@ -25,7 +25,7 @@ export const SeriesSelector: FC<SeriesSelectorProps> = ({
         onChange={(_, newValue) => onChange(newValue?.name || '')}
         disabled={loading}
         renderOption={(props, option, { inputValue }) => (
-            <Box component='li' {...props}>
+            <Box component='li' {...props} key={option.name}>
                 <Box sx={{ display: 'flex', flexDirection: 'column' }}>
                     <Typography variant='body2'>
                         <Highlighter search={inputValue}>
diff --git a/frontend/src/component/impact-metrics/hooks/useUrlState.ts b/frontend/src/component/impact-metrics/hooks/useUrlState.ts
index f6a9051957..fc2e851ec4 100644
--- a/frontend/src/component/impact-metrics/hooks/useUrlState.ts
+++ b/frontend/src/component/impact-metrics/hooks/useUrlState.ts
@@ -63,21 +63,22 @@ export const useUrlState = () => {
                       )
                     : 0;
 
-            const newLayoutItem: LayoutItem = {
-                i: newChart.id,
-                x: 0,
-                y: maxY,
-                w: 6,
-                h: 4,
-                minW: 4,
-                minH: 2,
-                maxW: 12,
-                maxH: 8,
-            };
-
             updateState({
                 charts: [...currentState.charts, newChart],
-                layout: [...currentState.layout, newLayoutItem],
+                layout: [
+                    ...currentState.layout,
+                    {
+                        i: newChart.id,
+                        x: 0,
+                        y: maxY,
+                        w: 6,
+                        h: 4,
+                        minW: 4,
+                        minH: 2,
+                        maxW: 12,
+                        maxH: 8,
+                    },
+                ],
             });
         },
         [currentState.charts, currentState.layout, updateState],