How can I toggle the button text based on HTTP status?

Onclick, I'd like to toggle the button text based on the HTTP status. If the status is 200, then forgotPasswordBtnTxt should change to Sent!, else forgotPasswordBtnTxt should change to Something went wrong!.

I know hooks are async but for some reason everything I've tried has failed. What am I doing wrong?

    const [forgotPasswordBtnFlag, setForgotPasswordBtnFlag]         = useState(false);
    const [forgotPasswordBtnTxt, setForgotPasswordBtnTxt]           = useState("Send Forgot Password Link");
    const [forgotPasswordStatus, setForgotPasswordStatus]           = useState(null);

    const forgotPassWordClicked = () => {
        setForgotPasswordBtnFlag(true);
        setForgotPasswordBtnTxt(forgotPasswordStatus === 200 ? "Sent!" : "Something went wrong!");
    };

    const handleForgotPassword = (e) => {
        e.preventDefault();

        let dataForgotPassword = {
            'email': forgotPasswordEmail
        };

        axios.post('http://127.0.0.1:8000/api/forgot-password', dataForgotPassword)
            .then(resp => {
                let okStatus = resp.status;

                setForgotPasswordStatus(okStatus);

            }).catch(error => {
            let failedStatus = error.response.status;

            setForgotPasswordStatus(failedStatus);
        });
    };


   <button type="submit" className={`${!forgotPasswordBtnFlag ? 'btn' : 'forgotPasswordTextSuccess'} sendPasswordResetLinkBtn`} onClick={forgotPassWordClicked}>
     {forgotPasswordBtnTxt}
   </button>