Unable to type anything in the Text Input field while using two React hook forms in a single component

Question

So, I am trying to create Registration and Login form separated by only a toggle switch inside a card and for that I declared two different useForm() instances.

const {control, handleSubmit, formState: { errors }, reset, getValues} = useForm({
    resolver: yupResolver(validatorSchema),

    defaultValues: {
      'username':"",
      'email':"",
      'password':"",
      'confirmPassword':""
    }, mode:'onBlur'
  })

  const [addUser, {loading, error}] =  useMutation(REGISTER_USER, {
    update (proxy, result) {
      console.log(result)
      navigate('/home')
    },
    variables: {
      username: getValues("username"),
      email: getValues("email"),
      password: getValues("password"),
      role: dropdown
    }
  })

  const submit = (data) => {
    console.log(data)
    addUser()
    reset()
  }

And

const {control: authControl, handleSubmit: onSubmit, reset: res, formState: { errors: errors2 },getValues: getAuthValues} = useForm({
    resolver: yupResolver(loginValidatorSchema),

    defaultValues: {
      'loginUsername': "",
      'loginPassword': ""
    },
    mode: 'all'
  })

  isSignup ? console.log(errors) : console.log(errors2)

  const [loginUser] = useMutation(AUTHENTICATE_USER,{
    update(_,result) {
      navigate('/home')
    },

    variables: {
      username: getAuthValues('loginUsername'),
      password: getAuthValues('loginPassword')  
    }
  })

  const authSubmit = (data) => {
    console.log(data)
    loginUser()
    res()
  }

I'm using them inside a React native card in the following way-

const element = <TextInput.Icon name="lock-outline" />
  return (
    <SafeAreaView>
      <ScrollView contentContainerStyle={Styles.container}>
        <Image
          style={
            Styles.image
          }
          source={assets.kotaco}
        />

      
      <Card containerStyle={{
        borderRadius: "20px",
        overflow: "hidden"
      }}>
      
      <Card.Title style={{color: '#dc1846'}}>{isSignup?'Sign up': 'Sign in'}</Card.Title>
            
      <View style={{
        marginLeft: "250px",
        overflow: "hidden"
      }}>
      <Switch
      
      onValueChange={toggleSwitch}
      value={isSignup}
      />
      </View>

      {
        isSignup ?
        <View>
        <Controller 
        control={control}
        name="username"
        render={({field: {onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' username'
                style={Styles.input}
                value={value}
                
                //left={<TextInput.Icon name="alert-circle" size={20} color={'red'} />}
                left={element}
                onBlur={onBlur}
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />
        <Controller 
        control={control}
        name="email"
        render={({field: {onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' email'
                style={Styles.input}
                value={value}
                onBlur={onBlur}
                keyboardType='email-address'
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />
      

      <Controller 
        control={control}
        name="password"
        render={({field:{onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' password'
                style={Styles.input}
                value={value}
                onBlur={onBlur}
                secureTextEntry={showPassword}
                right={<TextInput.Icon name={showPassword ? "eye" : "eye-off"} onPress={() => setShowPassword(!showPassword)} />}
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />
      
      <Controller 
        control={control}
        name="confirmPassword"
        render={({field:{onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' confirm password'
                style={Styles.input}
                value={value}
                type='password'
                onBlur={onBlur}
                secureTextEntry={showPassword}
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />
      

      <View style={{flexDirection:"row", marginTop: 10, marginBottom: 10}}>
      
      <Button 
        title="Sign up" 
        type="solid" 
        titleStyle={{ fontWeight: '700' }}
        buttonStyle={{
          backgroundColor: "rgba(199, 43, 98, 1)",
          borderColor: 'transparent',
          borderWidth: 0,
          borderRadius: 30,
        }}
        containerStyle={{
          width: 100,
          marginRight: 50
        }}
        onPress={ handleSubmit(submit)}
        />

      <Dropdown 
      style={Styles.dropdown}
      iconStyle={Styles.icon}
      data={roles}
      labelField="label"
      valueField="value"
      placeholder=" Select a role"
      value={dropdown}
      onChange={item => setDropdown(item.value)}
      renderLeftIcon={() => (
        <Icon
          style={Styles.icon}
          color="#fc2d79"
          name="person-circle-outline"
          size={20}
        />
      )}
      />
      </View>
        </View>

          :

      <View>
        <Controller 
        control={authControl}
        name="loginUsername"
        render={({field:{onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' username'
                style={Styles.input}
                value={value}
                onBlur={onBlur}
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />

        <Controller 
        control={authControl}
        name="loginPassword"
        render={({field:{onChange, value, onBlur}}) => (
            <TextInput
                placeholder=' password'
                style={Styles.input}
                value={value}
                type='password'
                onBlur={onBlur}
                secureTextEntry={showPassword}
                onChangeText={(value) => onChange(value)}
                autoFocus half
            />
            )}
        />
      
      <View style={{alignSelf:'center',marginTop: 15, marginBottom: 15}}>
      
      <Button 
        title="Sign in" 
        type="solid" 
        titleStyle={{ fontWeight: '700' }}
        buttonStyle={{
          backgroundColor: "rgba(199, 43, 98, 1)",
          borderColor: 'transparent',
          borderWidth: 0,
          borderRadius: 30,
          
        }}
        containerStyle={{
          width: 100,
          //marginRight: 50,
          
        }}
        onPress={onSubmit(authSubmit)}
        />
      </View>

        </View>
      }

      </Card>
      
      </ScrollView>
    </SafeAreaView>
  )
}

While I'm able to type, validate and submit the data entered in the registration form, I am unable to type anything in the Login form, I changed the name of most of the props when I declared a second instance of useForm(), where am I going wrong?