Cambios propuestos para select

app/src/App.tsx

@@ -1,15 +1,23 @@
-import React from "react";
+import React, { ChangeEvent } from "react";
 import Select from "./components/UI/forms/select";
 
-
 function App() {
-
-  let optionList: string[] | number[] = ['a','b', 'c', 'd']
+  let optionList: string[] | number[] = ["a", "b", "c", "d"];
 
   return (
     <div>
       <button className="btn btn-primary">hola</button>
-      <Select className="form-select" list={optionList} placeholder='Selección de comparación'/>
+      <div style={{ maxWidth: "300px", margin: "auto" }}>
+        <Select
+          list={optionList}
+          onChange={(e: ChangeEvent<HTMLInputElement>) =>
+            console.log(e.target.value)
+          }
+          name="Comparación"
+          placeholder="Selección de comparación"
+          data-algo="algo"
+        />
+      </div>
     </div>
   );
 }

app/src/components/UI/forms/select.tsx

@@ -1,29 +1,26 @@
-import React, { FC, useState } from "react";
+import React, { FC } from "react";
 
-interface selecteProps {
+interface selectProps {
   list: string[] | number[];
+  onChange: Function;
   placeholder: string;
-  className?: string;
-  id?: string;
-  name?: string;
+  name: string;
+  [index: string]: any;
 }
 
-const Select: FC<selecteProps> = ({ list, id, name, className, placeholder }) => {
-  const [selected, setSelected] = useState<string | number>(placeholder);
+// En las props hago un "rest", que me da el resto del objeto que estoy desestructurando
+const Select: FC<selectProps> = ({ list, className, ...props }) => {
+  return (
+    <select {...(props as any)} className={`form-select ${className}`}>
+      {props.placeholder ? <option value="">{props.placeholder}</option> : null}
 
-  const onChangeSelect = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelected(event.target.value);
-  };
-
-  return <select className={className?? ""} id={id?? ""} name={name?? ""} onChange={onChangeSelect} value={selected}>
-    <option value=''>{placeholder}</option>
-
-    {list.map(item => (
-      <option value={item} key={item}>
-        {item}
-      </option>
-    ))}
-  </select>;
+      {list.map((item) => (
+        <option value={item} key={item}>
+          {item}
+        </option>
+      ))}
+    </select>
+  );
 };
 
 export default Select;