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,34 +19,40 @@ 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) => {
+  const [selected, setSelected] = useState<string | undefined>(current);
+
+  const update = (
+    items: Array<IItemProps>,
+    onChange: (item: any) => void,
+    event: React.ChangeEvent<HTMLSelectElement>,
+  ) => {
+    setSelected(event.target.value);
+    onChange(
+      items.find((item) => item.value.toString() === event.target.value),
+    );
+  };
+
+  return (
     <List
-    data-testid={"select" + (testId ? "-" + testId : "")}
+      data-testid={"select" + (testId ? `-${testId}` : "")}
       onChange={(e) => update(items, onChange, e)}
       className={className}
+      value={selected}
     >
       {items.map(({ label, value }, index) => {
         if (label === current) {
           return (
             <option
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
               key={[label, index].join("")}
               value={value.toString()}
-            selected
             >
               {label}
             </option>
@@ -54,7 +60,7 @@ const Select = ({
         } else {
           return (
             <option
-            data-testid={"option-" + (testId ? testId + "-" : "") + index}
+              data-testid={"option-" + (testId ? `${testId}-` : "") + index}
               key={[label, index].join("")}
               value={value.toString()}
             >
@@ -64,6 +70,7 @@ const Select = ({
         }
       })}
     </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 currentDarkTheme = getTheme("dark").label;
+  const currentLightTheme = getTheme("light").value;
+  const currentDarkTheme = getTheme("dark").value;
 
   if (themes || search) {
     return (