Add a clear button that reset the filters values.

src/components/Inputs/SelectInput.tsx

@@ -11,12 +11,14 @@ interface Props {
   options: [{ label: string; value: any }];
   keyData: string;
   isMultiple?: boolean;
+  value?: string | string[];
 }
 
 export default function SelectInput({
   options,
   isMultiple = false,
   onChange,
+  value = [],
 }: Props): JSX.Element {
   const [selected, setSelected] = useState<string[]>([]);
   const [filteredOptions, setFilteredOptions] = useState<Props['options']>([]);
@@ -33,12 +35,12 @@ export default function SelectInput({
       return;
     }
 
-    onChange(isMultiple ? selected : selected.at(0));
+    onChange(isMultiple ? selected : selected[0]);
   }, [selected]);
 
   const handleFocusInput = (): void => {
     setIsOptionsOpen(true);
-    inputRef.current.focus();
+    inputRef.current?.focus();
   };
 
   const handleAddElement = (item: any): void => {
@@ -49,6 +51,9 @@ export default function SelectInput({
       return [item];
     });
     setIsOptionsOpen(false);
+
+    if (inputRef.current === null) return;
+
     inputRef.current.value = '';
   };
 
@@ -111,6 +116,14 @@ export default function SelectInput({
           onChange={handleFilterOptions}
         />
       </div>
+      <button
+        onClick={() => {
+          onChange(null);
+          setSelected([]);
+        }}
+      >
+        X
+      </button>
       <div className={styles.optionList} hidden={!isOptionsOpen}>
         {filteredOptions.map((item, idx) => (
           <button