Form Handling using formik library

import {Formik, Form, Field} from 'formik';

let Register=()=>{
    return(
        <>  
        <h1>Register page</h1>      
        <Formik
        initialValues={{
            name:'',
            gender:'',
            hobby:[],
            school:''
         }}
         onSubmit={async (values)=>{
             window.alert("Submitted");
         } }
        >
            { ({values})=>(
                <Form>  
                    <div>
                        <label htmlFor="name">Name</label>
                        <Field type="text" name="name" />
                    </div>                

                    <div>
                        <label htmlFor="gender">Gender</label>
                        <Field type="radio" name="gender" value="Male" />Male
                        <Field type="radio" name="gender" value="Female" />Female
                    </div>

                    {values.gender}

                    <div>
                        <label htmlFor="hobby">Hobby</label>
                        <Field type="checkbox" name="hobby" value="Reading" />Reading
                        <Field type="checkbox" name="hobby" value="Singing" />Singing
                    </div>

                    {JSON.stringify(values.hobby)}

                    <div>
                        <label htmlFor="school">School</label>
                        <Field name="school" as='select'>
                            <option>GIC</option>
                            <option>AIC</option>
                            <option>VIC</option>
                        </Field>
                    </div>

                    {values.school}                   

                    <div>
                        <button type="submit">Submit</button>
                    </div>
                </Form>
             ) }
        </Formik>
        </>
    )
}

export default Register;