TypeError: undefined React Hooks Form- React Native

I have called Controller from react-hook-form in a separate component in my react native app and displaying that component on login screen that is showing this error:

TypeError: undefined is not an object (evaluating 'e.substring')

CustomInput.js

import { View, TextInput, StyleSheet } from 'react-native'
import React from 'react'

import { Controller } from 'react-hook-form';

const CustomInput = ({control, name, placeholder, secureTextEntry}) => {
  return (
    <View style={styles.container}>

      <Controller control={control} name={name} render={({field: {value, onChange, onBlur}, fieldState: {error}}) => 
      <TextInput style={styles.input} value={value} onChangeText={onChange} onBlur={onBlur} placeholder={placeholder} secureTextEntry={secureTextEntry} /> } />
    </View>
  );
};

LoginScreen.js

import CustomInput from '../../components/CustomInput/CustomInput';
import { useNavigation } from '@react-navigation/native';
import {useForm} from 'react-hook-form';


const LoginScreen = () => {

    const {control, handleSubmit, formState: { errors } } = useForm();
    const navigation = useNavigation();

    const onLoginPressed = (data) => {
        console.log(data, errors)
    };

    const onForgotPasswordPressed = () => {
        navigation.navigate('ForgotPassword');
    }

    const onRegisterPressed = () => {
        navigation.navigate('Register')
    }

  return (
    <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }} showsVerticalScrollIndicator={false}>
        <View style={styles.root}>
        <Image source={Logo} style={[styles.logo, {height : height * 0.2}]} resizeMode={'contain'} />

        //CUSTOM INPUT HOLDING THE CONTROLLER
        <CustomInput name='username' placeholder='Username' control={control} />
        <CustomInput password='password' placeholder='Password' secureTextEntry={true} control={control}/>

        <CustomButton text={loading ? 'Loading...' : 'Login Account'} onPress={handleSubmit(onLoginPressed)} />

        </View>
    </ScrollView>
  );
};

However, If I directly add the controller in the Login Screen Like this (React Hooks form showing undefined username in logs) it works fine