React Native :How to insert a counter into a textinput using formik

[DongjingZhong]

I am using formik to make a textinput with counter ,
and I realize that the handleChange in formik has confict if i inserted a setValue ,like the code below , could you please take a look ,how to modify it ?

Thank you so much in advance !!

import { StyleSheet, Text, View,TextInput} from 'react-native'
import React,{useState} from 'react'
import TextInputWithCount from './TextInputWithCount'
import AppErrorMessage from './ErrorMessage'
import { useFormikContext } from 'formik';
import colors from '../config/colors';

const AppFormFieldWithCount = ({name,number,maxLength,multiline,placeholder,...otherProps}) => {
    const {setFieldTouched,handleChange,errors,touched} = useFormikContext();
    const[value,setValue] = useState('');
  return (
   <>
    <View style={styles.container}>
   <TextInput placeholder={placeholder}
     style={{flex:1,fontSize:18}} 
     placeholder = {placeholder}
     multiline={multiline} 
     maxLength={maxLength}
     onBlur = {()=>setFieldTouched(name)}
     onChangeText = {
     (text) => setValue(text)
     handleChange(name)
      
     }
     {...otherProps}
      />
     <Text>{value === "" ? "0" : value.length}/{number}</Text>
     </View>
 <AppErrorMessage error={errors[name]} visible={touched[name]} />
   </>
  )
}

export default AppFormFieldWithCount

const styles = StyleSheet.create({
  container:{
    flexDirection:'row',
    borderRadius:5,
    borderWidth:1,
    borderColor:colors.medium,
    alignItems:'center',
    width:'100%',
    paddingHorizontal:10,

}
})