Can't change or use properties from imported TextInput in React Native

Question

I was trying to use a created TextField component inside Formik, I created my own TextField component called Input and imported inside the form, but I cant change any of it's props or call it's methods, like style or onChangeText, any method I try to use with onChangeText won't work, for example. Here's my code from the component and the formulary.

Here's the code of my Input Component and the form where I import it to:

// Input Component
import React, { useState } from 'react';
import { TextInput, TextInputProps } from 'react-native';
import styles from '../../styles/styles';

interface InputProps extends TextInputProps{
    value: string,
}

const Input: React.FC<InputProps> = ({value, ...rest}) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')}
            style={{
                width: "70%",
                minHeight: 40,
                borderColor: styles.primaryColor,
                borderBottomWidth: 1,
                padding: 0,
                borderRadius: 5,
                marginBottom: 5,
                backgroundColor: color,
            }}
        >
        </TextInput>
    )
}

export default Input; 


// Form Page
import React from 'react';
import { Button, TextInput, View } from 'react-native';
import { Formik } from 'formik'
import Input from '../../../components/inputs/Input';

export default function FormikTest({ }) {
    return (
            <Formik
                initialValues={{ input: '', teste: '' }}
                onSubmit={values => console.log(values)}
            >
                {({ handleChange, handleSubmit, values }) => (
                    <View style={{ padding: 8, alignItems: 'center' }}>
                        <TextInput
                            style={{
                                margin: 10,
                                width: '50%',
                                height: 50,
                                borderWidth: 1,
                                borderColor: '#000',
                            }}
                            onChangeText={handleChange('input')}
                            value={values.input}
                        />

                        <Input
                            onChangeText={() => { console.log('aqui') }}
                            value={values.teste}
                        />

                        <Button onPress={handleSubmit} title="Submit" />
                    </View>
                )}
            </Formik>
    )
}

Answer 1

In order for your custom Input to recognise the props you are passing, you have to instruct it to recognise them. Like so

const Input: React.FC<InputProps> = (props) => {
    const [color, setColor] = useState("#f2f2f2");

    return (
        <TextInput
            onFocus={() => setColor('#f9ffc4')}
            onBlur={() => setColor('#f2f2f2')}
            style={{
                width: "70%",
                minHeight: 40,
                borderColor: styles.primaryColor,
                borderBottomWidth: 1,
                padding: 0,
                borderRadius: 5,
                marginBottom: 5,
                backgroundColor: color,
            }}
            onChangeText={props.onChangeText}
            autoFocus={props.autoFocus}
            ...
        >
        </TextInput>
    )
}

export default Input; 

For every prop you want to pass, you have to add it to the input, otherwise how does you custom component know what you want from it?