React Native : how to make a value counter into textinput use formik

Question

I got stuck here , I needed to make a counter into the textinput , and I realize ,the counter has conflict with the handleChange. I have no idea how to modify it ,could you please take a look at my code ?Thank you so much in advance ！！

import { StyleSheet,  View } from 'react-native'
import React from 'react'
import AppForm from '../components/AppForm'
import * as Yup from 'yup'
import AppFormFieldWithCount from '../components/AppFormFieldWithCount';

const validationSchema = Yup.object().shape({
 userName: Yup.string().required("Username can't be empty").label("Username"),
});
const EditScreen = () => {
  const handleSubmit = async (userInfo) => {
    console.log("receive information",userInfo);
   };
  return (
    <View style={styles.container}>
  {/**  <TextInputWithCount number={12} maxLength={12} multiline={false} placeholder={"用户名"}/> */}
  <AppForm
  initialValues={{userName:''}}
  validationSchema ={validationSchema}
  onSubmit = {handleSubmit}
  >
  <AppFormFieldWithCount
  name = {'userName'}
  number ={15}
  placeholder={"Username"}
  maxLength ={15}
  multiline={false}
  />
  
  </AppForm>
  
    </View>
  )
}

export default EditScreen

const styles = StyleSheet.create({
  container:{
    padding:30,
   
  }
})

Below ,it is the formik TextInput : I have added the setValue for counting the text ,but the textinput will need the handleChange for getting the textinput information .Therefore, it has the conflict here, only one of them works in onChangeText function ...

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 = {
          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,
    
    }
    })