fix react key issue

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}>

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],