The event.currentTarget.value is one step behind the Formik values

[TangoPJ]

Hello. How can solve my problem? The event.currentTarget.value is one step behind the Formik values

import { Text } from '@chakra-ui/react'
import { ModalActionsButton } from 'components/shared/ModalActionsButton/ModalActionsButton'
import { InputField } from 'components/shared/formElements/inputField'
import { Form, Formik } from 'formik'
import { FormEvent } from 'react'
import { useLazyCheckCloudflareStatusQuery } from 'redux-store/services/cloudFlareAPI'
import * as Yup from 'yup'
import { CloudflareConnectStatus } from 'interfaces'
import debounce from 'lodash.debounce'

import styles from './addWebsiteForm.module.css'

const URL_REGEX = /^.+(:[0-9]+|\.[a-zA-Z]{2,})\/?$/gm
const DEBOUNCE_TIME = 400
const validate = Yup.object().shape({
  domainName: Yup.string()
    .required('The website URL is required')
    .matches(URL_REGEX, 'Enter correct URL'),
})

interface IProps {
  handleSubmit: ({ domainName }: { domainName: string }) => void
  onClose: () => void
  isLoading?: boolean
  domainName?: string
}

export const AddWebsiteForm = ({
  onClose,
  handleSubmit,
  domainName = 'https://',
  isLoading = false,
}: IProps) => {
  const [checkCloudflareStatus, { isFetching }] =
    useLazyCheckCloudflareStatusQuery()

  const debouncedDomainNameValidation = debounce(async (
    domainName: string,
    setFieldError: (field: string, message: string | undefined) => void,
  ) => {
    const res = (await checkCloudflareStatus(domainName)) as unknown as CloudflareConnectStatus
    if (!res.on_cloudflare) {
      setFieldError('domainName', 'The site is not on Cloudflare')
    }
  }, DEBOUNCE_TIME, {
    trailing: true
  })

  const onSubmit = () => {
    handleSubmit({ domainName: domainName.trim() })
  }

  return (
    <Formik
      initialValues={{ domainName }}
      onSubmit={onSubmit}
      validationSchema={validate}
      enableReinitialize
      initialTouched={true}
    >
      {({ isValid, dirty, handleChange, values, setFieldError }) => {
        const handleDomainNameChange = (e: FormEvent<HTMLInputElement>) => {
          handleChange(e)
          console.log(e.currentTarget.value, values)
          if (isValid && dirty) {
            debouncedDomainNameValidation(values.domainName, setFieldError)
          }
        }
        return (
          <Form>
            <InputField
              name='domainName'
              onChange={handleDomainNameChange}
              type='url'
              value={values.domainName}
              label={
                <Text textStyle='small' className={styles.form__label}>
                  Enter URL
                </Text>
              }
              isValidating={isFetching}
            />
            <ModalActionsButton
              isForm
              submitText='Submit'
              isLoading={isLoading || isFetching}
              isDisabled={!(isValid && dirty)}
              onClose={onClose}
              className={styles.form__action__button}
            />
          </Form>
        )
      }}
    </Formik>
  )
}

When I change the input I get the result in my console:

[TangoPJ]

Ok, I changed my validation logic like this:

const validation = Yup.object().shape({
    domainName: Yup.string()
      .required('The website URL is required')
      .matches(URL_REGEX, 'Enter correct URL')
  })
    .test({
      message: () => 'Cloudflare is not supported',
      test: debounce(async ({ domainName }) => {
        const res = await checkCloudflareStatus(domainName).unwrap()
        if (!res.on_cloudflare) {
          return false
        }
        return true
      }, DEBOUNCE_TIME),
    })

It sends the request to the API without problems and I'm getting the response as { on_cloudflare: true or false }.
But how formik should know about that there is error or not?

if (!res.on_cloudflare) return false - doesn't trigger the error message text.

[TangoPJ]

Any other advice please?