When using test() on a field, it always displays invalid.

[jamiegau]

I am using svelte-strap and the "Input" enhanced tag, over the generic "input"
Example:

<Input
  type="text"
  class="form-control"
  id="username"
  invalid={invalid("username")}
  placeholder="Enter username"
  bind:value={fields.username}
/>
<Message name="username" />

When I add a .test() to a field. such as

const regSchema = yup.object().shape({
username: yup.string().required().label('Username').min(4).test({
    name: 'Unique-Username',
    message: 'Username already in use',
    skipUndefined: true,
    test: async function(value) {
    let username_test = await new Promise((resolve, reject) => {
	    let url = `${apiEndpoint}/dcns/CheckUsernameExists/` +
		    encodeURIComponent(value) + '/';
	    axios.get(url, { timeout: 2000 })
		    .then((res) => {
			    resolve({ result: res.data.exists, message: '' });
		    })
		    .catch((error) => {
			    resolve({ result: false, message: error.message });
		    });
    });
    let r_res = !username_test.result;
    if (username_test.message !== '') {
	    r_res = this.createError({ message: username_test.message });
    }
    console.log(r_res);
    return r_res;
    }
}),

Even if the test results in a true, meaning all is good.
The input box is still dressed as if it is in error.
As if invalid={invalid("username")} is true, as assigned to the Input tag.

I don;t get this issue if I don't use .test()

Any ideas?