React-Native (0.64.2) Formik handleSubmit onSubmit not firing

Relevant Modules:

Formik: "2.1.4"

Yup: "0.28.5"

React-Navigation v5

So i've been struggling with a simple formik problem for a day now, and I'm sure I must be missing something, but I would love some help, because I can't see what I'm doing wrong.

I have two files: Login/index.tsx & Login/LoginForm.tsx

Login/index.tsx for the most part looks like this:

  const handleSubmit = async (values) => {
    console.log("values submitted == ", values)
  }

  return (
    <View style={Styles.container}>
      <CircleIconButton
        size={60}
        backgroundColor={'white'} 
        onPress={goBack}
      >
        <Icon name={'arrow-left'} type={'FontAwesome5'} style={{ color: Colors.primaryOrange}} />
      </CircleIconButton>

      <Text style={[Typography.title, {color: 'white', marginTop: '30%'}]}>
        Login
      </Text>
      <Text style={[Typography.titleDesc, {color: 'white', marginTop: '3%', marginBottom: '8%'}]}>
        Securely login to your account
      </Text>

      <Formik
        initialValues={formInitialValues}
        onSubmit={handleSubmit}
      >
        <LoginForm />
      </Formik>
      
    </View>
  )

Login/LoginForm.tsx for the most part looks like this:

const {handleChange, handleSubmit, values, isSubmitting, isValidating} = useFormikContext();

const { navigate } = useNavigation()

return (
    <View style={Styles.container}>
      <IVTextInput
        onChangeText={handleChange('email')}
        value={values?.email}
        editable
        fieldLabel={"Phone/Email"}
      />
      <IVTextInput
        isPassword
        editable
        containerStyle={{ marginTop: '8%', marginBottom: '15%' }}
        onChangeText={handleChange('password')}
        value={values?.password}
        fieldLabel={"Your Password"}
      />
      <RoundedButton
        block
        onPress={handleSubmit}
      >
        Log In
      </RoundedButton>
      <View style={{...allCenter, marginTop: '7%'}}>
        <Text
          style={[Typography.titleDesc, Styles.signupTextButton]}
          onPress={() => navigate('Signup')}
        >
          Don’t have an account? Register
        </Text>

        <Text style={[Typography.titleDesc, {color: 'white', marginTop: '8%'}]}>
          Forgot Password
        </Text>

      </View>
    </View>
  )

LoginForm is wrapped by the <Formik> tags. I then try to access the formik context in the LoginForm.tsx file.

Things i've tried:

• Printing the values variables as it changes (from me typing in the textfields), and I can see that the values object is tracking my keystrokes

• Printing isSubmitting & isValidating, and at no point has isSubmitting = true AND isValidating = false. when I submit isSubmitting == true and isValidating == true. The docs for Formik seem to suggest that I know when my form is submitting when isValidating == false && isSubmitting == true but that hasn't happened yet.

• Creating a Yup schema, but i've also tried removing the yup schema within the <Formik> tag inside the Login/index.tsx file, either way, neither the onSubmit nor the handleSubmit funciton do anything when I tap the Login button.

• Put in a simple console.log() statement to test that the action to my <RoundedButton> onPress prop is working, and it worked, my console.log() was seen in the console output.

• Returning an empty object from the validate prop within the <Formik> opening tag, because the general consensus I get from looking online is that the form doesn't submit when the validation fails

Interesting Info: When I used a validationSchema, I purposely violated the validation, and when I printed errors the object was empty

The gist is . . . nothing i've tried seems to get the onSubmit or handleSubmit functions to fire. Please let me know what I could be doing wrong, any help would be greatly appreciated.

Thank You