React Native : Formik Yup ,image undefine problem

Question

I met a weird problem . I am using Formik + Yup to upload a photo . Below is the third library I use for image picke:

yarn add react-native-image-picker

It dose not have any problem uploading the image ,and successfully get the result:

{"fileName": "rn_image_picker_lib_temp_3254c68f-0179-41ce-a8b6-8b91a9e0b2d8.jpg", "fileSize": 21633, "height": 523, "type": "image/jpeg", "uri": "file:///data/user/0/com.bb/cache/rn_image_picker_lib_temp_3254c68f-0179-41ce-a8b6-8b91a9e0b2d8.jpg", "width": 523}

However , when i tried to see the upload value of Formik ,it appears undefine ... I have marked down below where dose it happen .

I have no idea what is going on ,could you please take a look my code ? Thank you so much in advance !!

import { ScrollView, StyleSheet, Text, View ,TouchableOpacity, Image} from 'react-native'
import React,{useState} from 'react'
import colors from '../../config/colors';
import AppButton from '../../components/AppButton';
import * as Yup from 'yup';
import { Formik } from 'formik';
import { launchImageLibrary } from 'react-native-image-picker';
import Entypo from 'react-native-vector-icons/Entypo';

const validationSchema = Yup.object().shape({
 image: Yup.object(),
});
const UserEdit = () => {
  const [imageUri, onChangeImage] = useState();
  
const handleSubmit = async(values) =>{
   const {image} = values
  // the result here is undefine ... I have no idea what is wrong ..
 console.log("now : ",image);
}
  return (
    <ScrollView style={styles.out}>
   <Formik
   validationSchema={validationSchema}
   initialValues = {{image:''}}
   onSubmit ={values=>handleSubmit(values)}
   >{
     ({  setFieldValue, values, setFieldTouched})=>(
       <>
       
 {/**user image select */}
  <TouchableOpacity onPress={async()=>{
   try {
    const result = await launchImageLibrary({
      mediaType:"photo",
      quality: 0.5,   
});
if(!result.didCancel){
  setFieldValue(values.image,result.assets[0])
  setFieldTouched(values.image,true)
  onChangeImage(result.assets[0].uri)
console.log("receive image ：",result.assets[0]);
}
    
   } catch (error) {
     
   }
  }}>
     <View style={styles.imgcontainer}>
           {!imageUri&&<Entypo name='camera' size={50} color={'black'} />} 
                {imageUri && <Image source={{ uri: imageUri }} style={ styles.img} resizeMode='cover'/>}
            
           </View>

  </TouchableOpacity>
 <AppButton title={"Login"} onPress={handleSubmit} color={colors.secondary} style={{ alignSelf:'center'}}/>
       </>
     )
   }
    
   </Formik>
    </ScrollView>
  )
}

export default UserEdit

const styles = StyleSheet.create({
  out : {
      flexGrow : 1,
    
  },
 

  imgcontainer: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: colors.fontLight,
    justifyContent: 'center',
    alignItems: 'center',
    overflow :'hidden',
    marginBottom:30,
 
    
    
},
img: {
  width: 100,
  height: 100

}
 
})