chore: all review comments

src/components/components/DigitsInput.tsx

@@ -11,7 +11,7 @@ import { TextField, Stack } from '@mui/material';
 interface DigitInputProps {
   error: boolean;
   success: boolean;
-  onChange: Dispatch<SetStateAction<string[]>>;
+  onChange: Dispatch<SetStateAction<string>>;
 }
 
 const DigitInput: React.FC<DigitInputProps> = ({
@@ -26,13 +26,18 @@ const DigitInput: React.FC<DigitInputProps> = ({
     inputRefs.current[0]?.focus();
   }, []);
 
+  const handleDigitInputValueChange = (value: string[]) => {
+    const formatted = value.filter((char) => char !== '').join('');
+    onChange(formatted);
+  };
+
   const handleChange = (value: string, index: number) => {
     if (!/^\d$/.test(value) && value !== '') return;
 
     const newCode = [...code];
     newCode[index] = value;
     setCode(newCode);
-    onChange(newCode);
+    handleDigitInputValueChange(newCode);
 
     if (value && index < 4 - 1) {
       inputRefs.current[index + 1]?.focus();
@@ -62,7 +67,7 @@ const DigitInput: React.FC<DigitInputProps> = ({
     });
 
     setCode(newCode);
-    onChange(newCode);
+    handleDigitInputValueChange(newCode);
 
     // Focus the next empty input after the last pasted character
     const lastIndex = Math.min(pastedData.length, code.length) - 1;