added valid types

src/components/GetStarted/BasicInfo.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import InputCompOne from "../shared/InputCompOne";
 
 interface Option {
@@ -7,7 +7,19 @@ interface Option {
 }
 
 const BasicInfo: React.FC = () => {
-  const [hideOTPComponent, setHideOTPComponent] = React.useState<boolean>(true);
+  const [hideOTPComponent, setHideOTPComponent] = useState<boolean>(true);
+  const [inputValues, setInputValues] = useState({
+    title: "",
+    marital: "",
+    agentId: "",
+    bvn: "",
+    firstName: "",
+    phone: "",
+    email: "",
+    surname: "",
+    dob: "",
+    secondName: "",
+  });
   const inputRef = useRef<HTMLInputElement>(null);
 
   // Array for marital status options
@@ -29,16 +41,19 @@ const BasicInfo: React.FC = () => {
   ];
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // Handle input value changes
-    console.log(e.target.value);
+    const { name, value } = e.target;
+
+    setInputValues((prev) => ({ ...prev, [name]: value }));
   };
 
   const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+    const { name, value } = e.currentTarget;
+
     if (name === "bvn") {
       const regex = /^[0-9]+$/;
 
       if (regex.test(value)) {
-        if (value?.length == 10) {
+        if (value?.length === 10) {
           setHideOTPComponent(false);
           // secondInputRef.current?.focus();
         } else setHideOTPComponent(true);
@@ -60,7 +75,7 @@ const BasicInfo: React.FC = () => {
             select
             selectClass="w-full h-[36px] rounded-[12px]"
             selectOptions={titleOptions}
-            value=""
+            value={inputValues.title}
             onChange={handleChange}
             ref={inputRef}
           />
@@ -72,7 +87,7 @@ const BasicInfo: React.FC = () => {
             select
             selectClass="w-full h-[36px] rounded-[12px]"
             selectOptions={maritalStatusOptions}
-            value=""
+            value={inputValues.marital}
             onChange={handleChange}
             onInput={handleInput}
             ref={inputRef}
@@ -85,7 +100,7 @@ const BasicInfo: React.FC = () => {
             select
             selectClass="w-full h-[36px] rounded-[12px]"
             selectOptions={[{ value: "", label: "Select" }]}
-            value=""
+            value={inputValues.agentId}
             onChange={handleChange}
             onInput={handleInput}
             ref={inputRef}
@@ -100,10 +115,11 @@ const BasicInfo: React.FC = () => {
             labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px] gap-[2px]"
             input
             inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
-            value=""
+            value={inputValues.bvn}
             onChange={handleChange}
             onInput={handleInput}
             ref={inputRef}
+            maxLength={10}
           />
         </div>
       </div>
@@ -113,36 +129,36 @@ const BasicInfo: React.FC = () => {
             <div className="flex flex-col gap-3">
               <InputCompOne
                 label="First Name"
-                name="title"
+                name="firstName"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
-                value=""
+                value={inputValues.firstName}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}
               />
               <InputCompOne
                 label="Phone Number"
-                name="title"
+                name="phone"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
-                value=""
+                value={inputValues.phone}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}
               />
               <InputCompOne
                 label="Email Address"
-                name="title"
+                name="email"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px]"
-                value=""
+                value={inputValues.email}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}
@@ -153,36 +169,36 @@ const BasicInfo: React.FC = () => {
             <div className="flex flex-col gap-3">
               <InputCompOne
                 label="Surname"
-                name="title"
+                name="surname"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
-                value=""
+                value={inputValues.surname}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}
               />
               <InputCompOne
                 label="Date of Birth"
-                name="title"
+                name="dob"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
-                value=""
+                value={inputValues.dob}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}
               />
               <InputCompOne
                 label="Second Name"
-                name="title"
+                name="secondName"
                 parentInputClass="w-full"
                 labelClass="font-bold text-[18px] leading-[21.78px] tracking-[2%] text-[#5C2684] mb-[2px]"
                 input
                 inputClass="w-full h-[36px] bg-[#EFEFEF] px-[2px] rounded-[12px] px-3"
-                value=""
+                value={inputValues.secondName}
                 onChange={handleChange}
                 onInput={handleInput}
                 ref={inputRef}

src/components/shared/InputCompOne.tsx

@@ -7,8 +7,8 @@ export interface InputCompOneProps {
   labelSpanClass?: string;
   placeholder?: string;
   value: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onInput: (e: React.FormEvent<HTMLInputElement>) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onInput?: (e: React.FormEvent<HTMLInputElement>) => void;
   name: string;
   tabIndex?: number;
   ref?: React.RefObject<HTMLInputElement>;

src/utils/data.tsx

@@ -400,9 +400,9 @@ export const _lowerMenuItems = [
 ];
 
 export const socialsIcons = [
-  { name: "facebook", image: FBook, link: import.meta.env.VITE_FACEBOOK_URL },
-  { name: "twitter", image: Twitter, link: import.meta.env.VITE_TWITTER_URL },
-  { name: "instagram", image: Instagram, link: import.meta.env.VITE_INSTAGRAM_URL },
+  { name: "facebook", image: FBook, link: process.VITE_FACEBOOK_URL },
+  { name: "twitter", image: Twitter, link: process.VITE_TWITTER_URL },
+  { name: "instagram", image: Instagram, link: process.VITE_INSTAGRAM_URL },
 ];
 
 export const footerItems = [