Как я могу создать форму AntD с Formik, а также для проверки использовать Yup

Question

Я новичок здесь, используя с Formik. я создаю antd, в том числе с formik. Я не получаю поля формы на консоли.

import React из'act' import { Form, Icon, Input, Modal, Button } из'antd' import { Formik } из' formik '

Класс DialogDisplay расширяет React.Component {

state={
    modalVisible:false,

}

showModal=()=>{
    this.setState({
        modalVisible:true
    })
}   

handleCancel=()=>{
    this.setState({
        modalVisible:false

    })
}
handleSubmit=(e,values, {
    setSubmitting
})=>{    
    e.preventDefault()
     console.log(values)
     alert(values)
     setSubmitting(false)                          
    }
render(){              
    return(              
        <Formik 
       initialValues={{
           userName:'',
            password:''
        }}        
      render={formProps=>{
         return(
                <div align="center">
         <Button 
         onClick={this.showModal}
         >Login </Button>
         &nbsp;           
         <Button>Register</Button> 

             <Modal
             title="Login Details"
             visible={this.state.modalVisible}

             onCancel={this.handleCancel}
             >

             <Form onSubmit={this.handleSubmit}> 
                 <Form.Item>                         
                         <Input 
                         prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                         type="text"
                         id="userName"                            
                         placeholder="Username" />
                 </Form.Item>
                 <Form.Item>                        
                         <Input 
                        prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 
                        id="password"
                         type="password"                              
                         placeholder="Password" />
                    </Form.Item>

                 <Form.Item>          
                         <Button 
                         type="primary" 
                         htmlType="submit" 
                         className="login-form-button"
                         >
                           Log in
                         </Button>                 
                </Form.Item>
             </Form>  
          </Modal>




        </div>


            )
        }


        }   

        >
        </Formik>         

    )

}

} экспорт по умолчанию DialogDisplay