Handling errors for different response status in React?

I am developing a fullstack app with Spring Boot and React and there are different status codes and bodies for the following situations:

when credentials are wrong: 500

{
    "status": 500,
    "message": "Bad credentials"
}

when there is validation errors: 422

{
    "status": 422,
    "message": "Validation error. Check 'errors' field for details",
    "errors": [
        {
            "field": "password",
            "message": "size must be between 6 and 100"
        }
    ]
}

I display error messages. However, based on the situations, I have to check the response error fields or status codes and I thought to check using ? as shown below:

.catch((error) => {
  error.response.data.errors?.map(e => enqueueSnackbar(e.message, "error"))
  enqueueSnackbar(error.response.data.message?, "error");
});

But I am not sure if there is a more elegant way to handle these 2 different error types. Any idea?