Form data filled does not show on console using react hooks

Question

I have a form built with formik and yup, but after filling the form, the data did not show on the console and when i clicked the next button, it does not take to the next page. The validations are working.

.
.
.

const navigate = useNavigate()

const initialValues = {
phone: "",
email: ""
}

const validationSchema = Yup.object({
phone: Yup.string().required('Required'),
email: Yup.string().required('Required').email('Invalid email format'),
})

const onSubmit = values => {
console.log('Form data', values)
navigate("/NextPage")
}

<Formik 
  initialValues={initialValues}
  validationSchema={validationSchema}
  onSubmit={onSubmit}>
  <Form>
    <div className="mb-3">
     <label className='form-label'>Phone Number</label><br/>
     <Field type='tel'  name='phone' className='place-holder white-bg' id='phone'/>
     <ErrorMessage name='phone'>
      { (errorMsg) => <div className='error'>{errorMsg}</div> }
     </ErrorMessage>                        
    </div>
    <div className="mb-3">
     <label className='form-label'>Email address(optional)</label><br/>
     <Field type='email' name='email' className='place-holder white-bg' id='email'/>
     <ErrorMessage name='email'>
       { (errorMsg) => <div className='error'>{errorMsg}</div> }
     </ErrorMessage>                        
    </div>
    <Button variant="primary" type="submit" className="buy-token-next-btn">
      Next
    </Button>
   </Form>
  </Formik>