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 Componentimport 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 Pageimport 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> )}