upd

client/src/components/Input.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useMask } from "@react-input/mask";
-import { useEffect, useState } from "react";
 
 interface InputProps {
   type?: "text" | "email" | "password" | "time" | "tel";
@@ -9,7 +8,6 @@ interface InputProps {
   autoFocus?: boolean;
   required?: boolean;
   readOnly?: boolean;
-  defaultValue?: string;
   className?: string;
   handleChange?: (value: string) => void;
   handleFocus?: () => void;
@@ -22,7 +20,6 @@ function Input({
   autoFocus,
   required,
   readOnly,
-  defaultValue = "",
   className,
   handleChange,
   handleFocus,
@@ -32,16 +29,6 @@ function Input({
     replacement: { _: /\d/ },
   });
 
-  const [_value, setValue] = useState<string>(value || defaultValue || "");
-
-  useEffect(() => {
-    if (!_value || !handleChange) {
-      return;
-    }
-
-    handleChange(_value);
-  }, [_value]);
-
   return (
     <input
       ref={type === "tel" ? inputRef : undefined}
@@ -50,8 +37,8 @@ function Input({
       autoFocus={autoFocus}
       required={required}
       readOnly={readOnly}
-      value={value || defaultValue || ""}
-      onChange={(e) => setValue(e.target.value)}
+      value={value}
+      onChange={(e) => handleChange && handleChange(e.target.value)}
       onFocus={handleFocus}
       className={`px-3 py-2.5 outline-none rounded-lg border border-[#DAE0E5] focus:border-[#49A1F5] transition-colors text-sm ${className}`}
     />