upd

client/src/components/Input.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { useMask } from "@react-input/mask";
 import { useEffect, useState } from "react";
 
 interface InputProps {
-  type?: "text" | "email" | "password" | "time";
+  type?: "text" | "email" | "password" | "time" | "tel";
   placeholder?: string;
   autoFocus?: boolean;
   required?: boolean;
@@ -24,16 +25,20 @@ function Input({
   handleChange,
   handleFocus,
 }: InputProps) {
-  const [value, setValue] = useState<string | undefined>(defaultValue);
+  const inputRef = useMask({
+    mask: "+7 (___) ___-__-__",
+    replacement: { _: /\d/ },
+  });
+
+  const [value, setValue] = useState<string>(defaultValue || "");
 
   useEffect(() => {
-    if (value && handleChange) {
-      handleChange(value);
-    }
+    handleChange && handleChange(value);
   }, [value]);
 
   return (
     <input
+      ref={type === "tel" ? inputRef : undefined}
       type={type}
       placeholder={placeholder}
       autoFocus={autoFocus}