Remove "selected" from select.tsx

src/components/select.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 
 export interface IItemProps {
@@ -19,51 +19,58 @@ const List = styled.select`
   padding: 0.5rem;
 `;
 
-const update = (
-  items: Array<IItemProps>,
-  onChange: (item: any) => void,
-  e: React.ChangeEvent<HTMLSelectElement>,
-) => {
-  onChange(items.find((item) => item.value.toString() === e.target.value));
-};
-
 const Select = ({
   items,
   onChange,
   current,
   className,
   testId,
-}: ISelectProps) => (
+}: ISelectProps) => {
-  <List
+  const [selected, setSelected] = useState<string | undefined>(current);
-    data-testid={"select" + (testId ? "-" + testId : "")}
+
-    onChange={(e) => update(items, onChange, e)}
+  const update = (
-    className={className}
+    items: Array<IItemProps>,
-  >
+    onChange: (item: any) => void,
-    {items.map(({ label, value }, index) => {
+    event: React.ChangeEvent<HTMLSelectElement>,
-      if (label === current) {
+  ) => {
-        return (
+    setSelected(event.target.value);
-          <option
+    onChange(
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
+      items.find((item) => item.value.toString() === event.target.value),
-            key={[label, index].join("")}
+    );
-            value={value.toString()}
+  };
-            selected
+
-          >
+  return (
-            {label}
+    <List
-          </option>
+      data-testid={"select" + (testId ? `-${testId}` : "")}
-        );
+      onChange={(e) => update(items, onChange, e)}
-      } else {
+      className={className}
-        return (
+      value={selected}
-          <option
+    >
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
+      {items.map(({ label, value }, index) => {
-            key={[label, index].join("")}
+        if (label === current) {
-            value={value.toString()}
+          return (
-          >
+            <option
-            {label}
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
-          </option>
+              key={[label, index].join("")}
-        );
+              value={value.toString()}
-      }
+            >
-    })}
+              {label}
-  </List>
+            </option>
-);
+          );
+        } else {
+          return (
+            <option
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
+              key={[label, index].join("")}
+              value={value.toString()}
+            >
+              {label}
+            </option>
+          );
+        }
+      })}
+    </List>
+  );
+};
 
 export default Select;

src/components/settings.tsx

@@ -101,8 +101,8 @@ const Settings = ({ themes, search }: ISettingsProps) => {
   const [newLightTheme, setNewLightTheme] = useState<IThemeProps>();
   const [newDarkTheme, setNewDarkTheme] = useState<IThemeProps>();
 
-  const currentLightTheme = getTheme("light").label;
+  const currentLightTheme = getTheme("light").value;
-  const currentDarkTheme = getTheme("dark").label;
+  const currentDarkTheme = getTheme("dark").value;
 
   if (themes || search) {
     return (