Fixing bug in PasswordFormField

src/app/components/forms/PasswordFormField.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import ErrorMessage from "./ErrorMessage";
 import { useFormikContext } from "formik";
 import {
@@ -18,8 +18,7 @@ function PasswordFormField({
   paddingRight = 16,
   ...otherProps
 }) {
-  const { values, setFieldTouched, errors, touched } = useFormikContext();
-  const [fieldVal, setFieldVal] = useState(values[name]);
+  const { values, setFieldTouched, setFieldValue, errors, touched } = useFormikContext();
   const [hidePswd, setHidePswd] = useState(true);
 
   return (
@@ -28,10 +27,8 @@ function PasswordFormField({
         <TextInput
           flex={1}
           onBlur={() => setFieldTouched(name)}
-          onChangeText={(val) => {
-            setFieldVal(val);
-          }}
-          value={fieldVal.toString()}
+          onChangeText={(v) => setFieldValue(name, v, true)}
+          value={values[name]?.toString()}
           style={defaultStyles.text}
           height={48}
           secureTextEntry={hidePswd}