带有自定义模态的Formik在React Native中

Question

我正在创建一个选择性别的方式。我需要它与formik集成。所有其他领域都工作正常，但我对此组件有问题。到目前为止，这是我尝试过的

import React, {useState} from 'react'
import { View, Text, Platform, Modal, TouchableOpacity } from 'react-native'
import { selectButton } from './styles/inputField';
import { ModelButtonContainer } from './styles/inputFieldContainer';
import { inputText, labelText } from './styles/text';
import { useFormikContext } from 'formik'

const ModalPicker = ({
    name,
    
})=>{
    const {touched, handleBlur,handleChange, setFieldTouched, errors, setFieldValue } = useFormikContext();

    const [show, setShow] = useState(false)
    const [clicked, setClicked] = useState(false)
    const [value, setValue] = useState('')
    const showModal=() =>{
        setShow(true)
    }
    const confirmValue=(gender)=>{
        setClicked(true)
        setValue(gender)
        setFieldValue('gender', gender)
        setShow(false)
        
    }
    return(
        <View style={ModelButtonContainer} >
            <TouchableOpacity style={selectButton} onPress={showModal}>
                <Text style={clicked?inputText:labelText}>{clicked?value:'Select Gender'}</Text>
            </TouchableOpacity>

            <Modal     
                transparent={true}
                animationType='none'
                visible={show}
            >

            <View
                style={{ flex:1,justifyContent:'center', alignItems:'center',backgroundColor:'rgba(52, 52, 52, 0.7)' }} 
            >
                <View style={{justifyContent:'center',borderRadius:10,backgroundColor:'white', width:'80%', borderWidth:1, borderColor:'#64A8B5'}}>
                    <TouchableOpacity onPress={()=>confirmValue('Male')} style={{padding:10}}>
                        <Text>Male</Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={()=>confirmValue('Female')} style={{padding:10}}>
                        <Text>Female</Text>
                    </TouchableOpacity>

                </View>
        
            </View>
        </Modal>
        </View>
    )
}

export default ModalPicker

这就是我从主文件中使用它的方式。

<Formik
initialValues={{
    gender:''
}}
validationSchema={SignUpSchema}
onSubmit={(values)=>{
    console.log(values)
}}
>
{({
    isValid,
    dirty,
})=>(
    <Field
        name="gender"
        component={ModalPicker}
    />
)}
</Formik>

现在的问题是它不能反映出价值的变化，当我按下触摸时，它也会变成空白。