diff --git a/src/components/Settings/ColorSelector.tsx b/src/components/Settings/ColorSelector.tsx
index cd8ed5af3..68a762989 100644
--- a/src/components/Settings/ColorSelector.tsx
+++ b/src/components/Settings/ColorSelector.tsx
@@ -44,12 +44,11 @@ export function ColorSelector({ type }: ColorControlProps) {
   };
 
   const swatches = colors.map(({ color, swatch }) => (
-    <Grid.Col span={2}>
+    <Grid.Col span={2} key={color}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigColor(color)}
-        key={color}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}
diff --git a/src/components/Settings/ShadeSelector.tsx b/src/components/Settings/ShadeSelector.tsx
index f05b3dfc5..addbf0906 100644
--- a/src/components/Settings/ShadeSelector.tsx
+++ b/src/components/Settings/ShadeSelector.tsx
@@ -40,12 +40,11 @@ export function ShadeSelector() {
   };
 
   const primarySwatches = primaryShades.map(({ swatch, shade }) => (
-    <Grid.Col span={1}>
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-        key={Number(shade)}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}
@@ -54,12 +53,11 @@ export function ShadeSelector() {
   ));
 
   const secondarySwatches = secondaryShades.map(({ swatch, shade }) => (
-    <Grid.Col span={1}>
+    <Grid.Col span={1} key={Number(shade)}>
       <ColorSwatch
         component="button"
         type="button"
         onClick={() => setConfigShade(shade)}
-        key={Number(shade)}
         color={swatch}
         size={22}
         style={{ cursor: 'pointer' }}