fix: uncontrolled to controlled form

src/components/Login/EmailLoginForm.tsx

@@ -132,7 +132,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         className="block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail(String((e.target as any).value))}
+        onInput={(e) => setEmail(String((e.target as any).value))}
       />
       <label htmlFor="password" className="sr-only">
         Password
@@ -146,7 +146,7 @@ const EmailLoginForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Enter you password"
         value={password}
-        onChange={(e) => setPassword(String((e.target as any).value))}
+        onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
       {message && (

src/components/Login/EmailSignupForm.tsx

@@ -65,7 +65,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="John Doe"
         value={name}
-        onChange={(e) => setName(String((e.target as any).value))}
+        onInput={(e) => setName(String((e.target as any).value))}
       />
       <label htmlFor="email" className="sr-only">
         Email address
@@ -79,7 +79,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail(String((e.target as any).value))}
+        onInput={(e) => setEmail(String((e.target as any).value))}
       />
       <label htmlFor="password" className="sr-only">
         Password
@@ -93,7 +93,7 @@ const EmailSignupForm: FunctionComponent<{}> = () => {
         className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm  outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Enter you password"
         value={password}
-        onChange={(e) => setPassword(String((e.target as any).value))}
+        onInput={(e) => setPassword(String((e.target as any).value))}
       />
 
       {error && (

src/components/Profile/ForgotPasswordForm.tsx

@@ -83,7 +83,7 @@ export default function ForgotPasswordForm() {
         required
         placeholder="john@example.com"
         value={email}
-        onChange={(e) => setEmail((e.target as HTMLInputElement).value)}
+        onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
       />
 
       {message && (

src/components/Profile/ResetPasswordForm.tsx

@@ -85,7 +85,7 @@ export default function ResetPasswordForm() {
         minLength={6}
         placeholder="Enter a new password"
         value={password}
-        onChange={(e) => setPassword((e.target as HTMLInputElement).value)}
+        onInput={(e) => setPassword((e.target as HTMLInputElement).value)}
       />
 
       <label
@@ -103,7 +103,7 @@ export default function ResetPasswordForm() {
         minLength={6}
         placeholder="Confirm your new password"
         value={passwordConfirm}
-        onChange={(e) =>
+        onInput={(e) =>
           setPasswordConfirm((e.target as HTMLInputElement).value)
         }
       />

src/components/Setting/ChangePasswordForm.tsx

@@ -134,7 +134,7 @@ export default function ChangePasswordForm() {
               minLength={6}
               placeholder="Current password"
               value={currentPassword}
-              onChange={(e) =>
+              onInput={(e) =>
                 setCurrentPassword((e.target as HTMLInputElement).value)
               }
             />
@@ -156,7 +156,7 @@ export default function ChangePasswordForm() {
             minLength={6}
             placeholder="New password"
             value={newPassword}
-            onChange={(e) =>
+            onInput={(e) =>
               setNewPassword((e.target as HTMLInputElement).value)
             }
           />
@@ -177,7 +177,7 @@ export default function ChangePasswordForm() {
             minLength={6}
             placeholder="New password confirm"
             value={newPasswordConfirmation}
-            onChange={(e) =>
+            onInput={(e) =>
               setNewPasswordConfirmation((e.target as HTMLInputElement).value)
             }
           />

src/components/Setting/UpdateProfileForm.tsx

@@ -134,7 +134,7 @@ export default function UpdateProfileForm() {
             required
             placeholder="John Doe"
             value={name}
-            onChange={(e) => setName((e.target as HTMLInputElement).value)}
+            onInput={(e) => setName((e.target as HTMLInputElement).value)}
           />
         </div>
         <div className="flex w-full flex-col">
@@ -167,7 +167,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://github.com/username"
             value={github}
-            onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
+            onInput={(e) => setGithub((e.target as HTMLInputElement).value)}
           />
         </div>
         <div className="flex w-full flex-col">
@@ -181,7 +181,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://www.linkedin.com/in/username/"
             value={linkedin}
-            onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
+            onInput={(e) => setLinkedin((e.target as HTMLInputElement).value)}
           />
         </div>
 
@@ -196,7 +196,7 @@ export default function UpdateProfileForm() {
             className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://example.com"
             value={website}
-            onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
+            onInput={(e) => setWebsite((e.target as HTMLInputElement).value)}
           />
         </div>