Как показать предупреждение на основе ответа консоли? РеактJS

У меня есть регистрация учетной записи на веб-сайте, и я хочу, чтобы на странице отображалось оповещение в зависимости от успешного или неудачного создания учетной записи.

Вот текущий код, который у меня есть (у меня постоянно отображаются оповещения)

const isNotEmpty = (value) => value.trim() !== '';
const isEmail = (value) => value.includes('@');

function Register(props) {
    const navigate = useNavigate()

    //username input
    const {
        value: usernameValue,
        isValid: usernameIsValid,
        hasError: usernameHasError,
        valueChangeHandler: usernameChangeHandler,
        inputBlurHandler: usernameBlurHandler,
        reset: resetUsername
    } = useInput(isNotEmpty)

    //password input
    const {
        value: passwordValue,
        isValid: passwordIsValid,
        hasError: passwordHasError,
        valueChangeHandler: passwordChangeHandler,
        inputBlurHandler: passwordBlurHandler,
        reset: resetPassword
    } = useInput(isNotEmpty)

    //email input
    const {
        value: emailValue,
        isValid: emailIsValid,
        hasError: emailHasError,
        valueChangeHandler: emailChangeHandler,
        inputBlurHandler: emailBlurHandler,
        reset: resetEmail
    } = useInput(isEmail)

    let formIsValid = false
    if (usernameIsValid && emailIsValid && passwordIsValid) {
        formIsValid = true
    }

    const submitHandler = async event => {
        event.preventDefault()

        const registerInput = {
            username: usernameValue,
            email: emailValue,
            password: passwordValue
        }

        try {
            const res = await axios.post("/api/auth/register", registerInput)
            console.info(registerInput)
        } catch (error) {
            console.info(error.response?.data)
        }

        if (!formIsValid) return

        resetEmail()
        resetUsername()
        resetPassword()
        navigate()



    }


    const emailClasses = emailHasError ? 'form-control invalid' : 'form-control'
    const usernameClasses = usernameHasError ? 'form-control invalid' : 'form-control'
    const passwordClasses = passwordHasError ? 'form-control invalid' : 'form-control'

    return (
        <div className='centered'>
            <form onSubmit = {submitHandler} className='register-box'>
                <h3 className = "register-title">Create New Account</h3>
                <div className='control-group'>
                    <div className = {emailClasses}>
                        <input required
                            type = "email"
                            name = "email"
                            value = {emailValue}
                            placeholder='Email'
                            onChange = {emailChangeHandler}
                            onBlur = {emailBlurHandler}
                        />
                        {emailHasError && <p className = "error-text">Please provide a valid Email</p>}
                    </div>
                    <div className = {usernameClasses}>
                        <input required
                            type = "text"
                            name = "username"
                            value = {usernameValue}
                            placeholder='Login ID'
                            onChange = {usernameChangeHandler}
                            onBlur = {usernameBlurHandler}
                        />
                        {usernameHasError && <p className = "error-text">Please enter your future Login ID</p>}
                    </div>
                    <div className = {passwordClasses}>
                        <input required
                            type = "password"
                            name = "password"
                            value = {passwordValue}
                            placeholder='Password'
                            onChange = {passwordChangeHandler}
                            onBlur = {passwordBlurHandler}
                        />
                        {passwordHasError && <p className = "error-text">Please enter your future Password</p>}
                    </div>
                </div>

                <Button disabled = {!formIsValid}
                    onClick = {alertClicked}
                    variant = "primary"
                    type='submit'>
                    Create New Account
                </Button>

                <br></br>
                <br></br>

                <Alert variant = "success">Account ceation was successful.</Alert>
                <Alert variant = "danger">Account creation has failed.</Alert>

            </form>
        </div>
    )
}

export default Register

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