The validation of JOI seems fine for me, scenario: when i tried to click submit without the value or selecting any categories it didnt submit and an error message appear, but when i tried to select what i want is that the error message will disappear and when the user click submit again it will success. thats the current behavior of this code, the Autocomplete is multiple selection

how can i achieve this : what i want is that the error message will disappear and when the user click submit again it will success??

export const VALIDATION_SCHEMA = {
  categories: Joi.array()
    .label('Categories')
    .items(
      Joi.object({
        name: Joi.string().required(),
        value: Joi.string().required(),
      }).required().messages({
        'string.empty': '"Categories" is invalid'
      }),
    ),
}

//

  const onHandleChangeInputCategories = (field, value) => {
    console.log(value) // please see below
    const _categories = value.map((name) => name)
    console.log("value: ", _categories)
    onHandleInputValidation(
      'categories',
      _categories);
  };

  const onHandleInputValidation = (field, value) => {
    try {
      Joi.assert(value, _.get(VALIDATION_SCHEMA, field));
      setFormError(_.omit(formError, field));
      return { error: false, valid: true };
    } catch (err) {
      return { error: err.message, valid: false };
    }
  };

<Autocomplete
     onChange={(event, value) => {
                onHandleChangeInputCategories('categories', value);
              }}
     renderInput={(params) => (
          <TextField
                  {...params}
                  label={'Categories'}
                  error={Boolean(formError.categories)}
                  sx={{
                    flexWrap: 'wrap',
                  }}
                  key="tf_categories"
           />
     )}

/>
<FormHelperText
      error={Boolean(formError.categories)}>
      {formError.categories}
</FormHelperText>

console result