Having issues with running an async function within my yup validation

[ktrahan2]

I have run into an issue that I can't quite figure out involving running an async function within my validation.

Basically when my input doesn't have a value and an initial value it should make the form invalid and not dirty. Whenever I type in the first character into the input my disabled logic for a button is flickering from disabled to enabled to disabled. Its pretty quick but visually noticeable. I see this same behavior in one other circumstance.

If I have an initial value the form should be valid but not dirty. The first time I hit backspace in the input the same flickering happens on my button it goes from disabled to enabled to disabled.

It almost seems to be reading the previous value of the 'value' passed into the callback when validating instead of the current value of the input, but I'm not 100% sure if this is accurate.

This behavior only happens in these two circumstances, all other additions/removals of characters behaves as expected.

        nate_id: yup.string().test('validation', translations.invalidId, async (value) => {
           // allow the user to remove their input and submit an empty value to handle 'delete'
            if (!!initialValues.id && !value) {
                return true;
            }
           // if there is a value then validate it through our server
            if (!!value) {
                return await functionToValidateTheValue(value);
            }
           // otherwise its not valid
            return false;
        }),
    })

Button logic:
disabled={!(formik.isValid && formik.dirty)}

I would greatly appreciate any recommendations. If you need more context just let me know. Thank you very much!