Ошибка получения ответа / перехват ответа не работает

Я создал страницу регистрации, которая должна проверять, принято ли уже введенное электронное письмо. Когда берется дубликат электронного письма, он останавливается в бэкэнде java spring api и возвращает статус 400.

(Я также пробовал использовать аннотацию spring @column(unique=true), но также не смог поймать ошибку 422.)

Затем у меня есть уловка для этого статуса, которая затем должна установить ошибку (для которой существует поле); если установлена ​​какая-либо ошибка, страница не будет продолжена. Если ошибок нет, страница автоматически входит в систему и перенаправляется на домашнюю страницу.

Я попытался отловить ошибку как ошибку, статус ошибки, ответ на ошибку и ответ. (поскольку технически полученное исключение от бэкэнда не является ошибкой.) Я просто не могу заставить его поймать.

Буду признателен, если кто-нибудь знает, что здесь не так и как это исправить.

код регистрации, в котором я оставляю различные методы, с помощью которых я пытался поймать ответ:

const signUp = () => {
    axios
      .post('http://localhost:8080/signup', {
        email,
        password,
        firstName,
        lastName
        // address,
        // phoneNumber,
        // image
      })
      // eslint-disable-next-line consistent-return
      .catch((err) => {
        if (err.status) {
          setEmailUsedError('Already in use. ');
        }
      })
      .then(() => {
        post('/login', null, {
          email,
          password
        }).then((data) => {
          if ('token' in data) {
            sessionStorage.token = data.token;
            const { sub } = JSON.parse(atob(data.token.split('.')[1]));
            sessionStorage.email = sub;
            onLogin();
            history.push('/');
          }
        })
          .catch((err) => {
            if (err.res.status === 422) {
              setEmailError('Already in use. ');
            } else setServerError(true);
          });
      });
  };

затем в браузере появится сообщение об обнаруженной ошибке:

Обновление: я изменил .then((res)... на .catch

      .then((res) => {
        if (res.status) {
          setEmailUsedError('Already in use. ');
        }

в функции signUp на .catch((err)...

Теперь он показывает, что ошибка обнаружена, но не устанавливает ошибку в коде. Не знаю почему.

Тот же результат, когда я попробовал .catch((res)...