verified that otp is six digits

src/components/AuthPages/SignUp/VerifySignup/Otp.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 
-export default function Otp({handleChange}) {
+export default function Otp({handleChange, value}) {
   useEffect(() => {
     const otp = document.querySelector("#otp-inputs");
     // eslint-disable-next-line no-restricted-syntax
@@ -25,6 +25,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_one'
+            value={value.value_one}
             onChange={handleChange}
           />
         </div>
@@ -34,6 +36,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_two'
+            value={value.value_two}
             onChange={handleChange}
           />
         </div>
@@ -43,6 +47,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_three'
+            value={value.value_three}
             onChange={handleChange}
           />
         </div>
@@ -52,6 +58,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_four'
+            value={value.value_four}
             onChange={handleChange}
           />
         </div>
@@ -61,6 +69,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_five'
+            value={value.value_five}
             onChange={handleChange}
           />
         </div>
@@ -70,6 +80,8 @@ export default function Otp({handleChange}) {
             type="text"
             maxLength={1}
             id="otp"
+            name='value_six'
+            value={value.value_six}
             onChange={handleChange}
           />
         </div>

src/components/AuthPages/SignUp/VerifySignup/index.jsx

@@ -21,11 +21,18 @@ export default function VerifyYou() {
 
 
   // state for user inputed values
-  const [verificationCode, setVerificationCode] = useState('')
+  const [verificationCode, setVerificationCode] = useState({
+    value_one: '',
+    value_two: '',
+    value_three: '',
+    value_four: '',
+    value_five: '',
+    value_six: '',
+  })
 
-  const handleVerificationInput = ({target:{value}}) => { // function that listens to input change
+  const handleVerificationInput = ({target:{name, value}}) => { // function that listens to input change
     setVerificationCode(prev => {
-      return prev + value
+      return {...prev, [name]:value}
     })
   }
 
@@ -38,7 +45,10 @@ export default function VerifyYou() {
     
     setLoading(true) // Sets loading spinner
 
-    let code = verificationCode
+    let code = '';
+    for(let values in verificationCode){
+      code+=verificationCode[values]
+    }
 
     if(!code){ // checks if code is empty
       setLoading(false)
@@ -102,7 +112,7 @@ export default function VerifyYou() {
               </div>
             </div>
             <div className="input-area">
-              <Otp handleChange={handleVerificationInput}/>
+              <Otp handleChange={handleVerificationInput} value={verificationCode}/>
               {errorMessage.message != '' &&  <p className={`text-center p-3 ${errorMessage.success ? 'text-green-600' : 'text-red-600'}`}>{errorMessage.message}</p>}
               <div className="signin-area mb-3.5">
                 <button