setFieldError not working as expected.

🐛 Bug report

Current Behavior

Currently I want to validate a hostName URL using a function that I have and set errors accordingly.

here is the component on which I want to set the errors to -

<TextField
        name="github"
        value={values.github}
        onChange={event => handleLinkChange(event, 'github', 'github.com')}
        label="Please link your Github account"
        error={
          errors.github &&
          touched.github && {
            [errors.github]: true,
          }
        }
      />

and here is the handleLinkChange function that I use -

const handleLinkChange = ({ target: { value } }, name, hostName) => {
          setFieldValue(name, value);
          setFieldTouched(name, true);
          if (!isValidHostURL(hostName, value)) {
            console.log(name);
            setFieldError(name, `Enter a valid ${name} URL`);
          }
        };

the function is working fine as it should but the error is not being set accordingly.

Expected behavior

The error should be set and shown in the field

Reproducible example

Suggested solution(s)

Additional context

I am also using Yup for form validation schema and have set github to Yup.string().required() in the Yup.object().shape({}) along with the other fields

Your environment