on blur is not getting called on input method

hi team ,

i am using react metronic 8 demo 1 for my project.
I am facing issue to call custom methods to validate otp by sending otp to user with axios method. I am unable to use onBlur method of formik which is used in metronics.
I am attaching my code, Thankyou in advance. looking for solution

/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { useState, useEffect } from 'react'
import { Navigate } from 'react-router-dom'
import { useFormik } from 'formik'
import * as Yup from 'yup'
import clsx from 'clsx'
import { getUserByToken, register, verifyOtp, sendOtp } from '../core/_requests'
import { Link } from 'react-router-dom'
import { toAbsoluteUrl } from '../../../../_metronic/helpers'
import { PasswordMeterComponent } from '../../../../_metronic/assets/ts/components'
import { useAuth } from '../core/Auth'
import Toast from 'react-bootstrap/Toast'

const phoneRegExp =
/^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/

const initialValues = {
name: '',
email: '',
phoneNumber: '',
otp: '',
password: '',
changepassword: '',
acceptTerms: false,
}

const registrationSchema = Yup.object().shape({
name: Yup.string()
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('First name is required'),
email: Yup.string()
.email('Wrong email format')
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Email is required'),
phoneNumber: Yup.string()
.matches(phoneRegExp, 'Phone number is not valid')
.min(10, 'Minimum 10 digit')
.max(10, 'Maximum 10 digit')
.required('Phone number is required'),
otp: Yup.string()
.min(4, 'Minimum 4 symbols')
.max(6, 'Maximum 6 symbols')
.required('OTP is required'),
password: Yup.string()
.min(3, 'Minimum 3 symbols')
.max(50, 'Maximum 50 symbols')
.required('Password is required'),
changepassword: Yup.string()
.required('Password confirmation is required')
.when('password', {
is: (val: string) => (val && val.length > 0 ? true : false),
then: Yup.string().oneOf([Yup.ref('password')], "Password and Confirm Password didn't match"),
}),
acceptTerms: Yup.bool().required('You must accept the terms and conditions'),
})

export function Registration() {
const [loading, setLoading] = useState(false)
const { saveAuth, setCurrentUser } = useAuth()
const [startTour, setStartTour] = useState(false)
const formik = useFormik({
initialValues,
validationSchema: registrationSchema,
onSubmit: async (values, { setStatus, setSubmitting }) => {
setLoading(true)
try {
const { data: auth } = await register(
values.email,
values.name,
values.otp,
values.phoneNumber,
values.password,
values.changepassword
)
saveAuth(auth)
const { data: user } = await getUserByToken(auth.api_token, auth)
setCurrentUser(user)
setStartTour(true)
} catch (error) {
console.error(error)
saveAuth(undefined)
setStatus('The registration details is incorrect')
setSubmitting(false)
setLoading(false)
setStartTour(false)
}
},
onBlur: async () => {
setLoading(true)
alert('on blur called')
},
})

useEffect(() => {
PasswordMeterComponent.bootstrap()
}, [])
useEffect(() => {}, [])
useEffect(() => {
if (startTour) {
}
return () => setStartTour(false)
}, [startTour])

return (

{startTour && }

{/* begin::Heading */}

{/* end::Heading */}

{/* begin::Action */}

alt='Logo'
src={toAbsoluteUrl('/media/svg/brand-logos/google-icon.svg')}
className='h-20px me-3'
/>
Sign in with Google

{/* end::Action */}

{formik.status && (

)}

{/* begin::Form group Firstname */}

{/* end::Form group */}

{/* begin::Form group Email */}

{/* end::Form group */}
{/* begin::Form group Phone Number */}

{/* end::Form group */}

{/* begin::Form group Password */}