React state not changing after clicking some button

After invoking handleButton by pressing the Log In button once, the value of logInStatus is empty. However, after the second click,the value of logInStatus will change. I know that setState is an async call, so it will not update the value of logInStatus instantly. How should I approach a solution?

import React, {setState, useState, useEffect } from "react";
import Axios from "axios";
const Login = () => {
    useEffect(() => {
        document.title = 'Log In';
    });
    const [data, setData] = useState(null);
    const [username, setName] = useState('');
    const [password, setPassword] = useState('');
    const [logInStatus, setlogInStatus] = useState('');
    const user = [password,username]
    
    function read(user){
        let returned = checkRegister(user);
        returned.then(function(result) {
            setlogInStatus(result.data.message);
            //return setlogInStatus(result)
         });
    }

    const handleButton = (e) => {
        read(user);
        e.preventDefault();
        //logInStatus is empty here even it should contain soimething
        if(logInStatus == "Successfully Authenticated"){
            //do stuff
        }
     }
    function checkRegister(user) {
        const user_object = {
            username: user[1],
            password: user[0]
        }
        console.log(user_object)
        var ok;
            return Axios({
                method: "POST",
                data: user_object,
                withCredentials: true,
                url: "http://localhost:9000/users/login",
              });
    }
    return(
        
        <div className="login">
             <div>
      </div>
            <div className="userform">
            <h2 className="pagename">Log in</h2>
            <form>
                {/* <label>Username:</label> */}
                <input
                    type="text"
                    required
                    value={ username }
                    onChange={ (e) => setName(e.target.value) }
                    placeholder="Username"
                />
                {/* <label>Password:</label> */}
                <input
                    type="password"
                    required
                    value={ password }
                    onChange={ (e) => setPassword(e.target.value) }
                    placeholder="Password"
                />
                <button onClick={handleButton}>Log In</button>
                <h1>{logInStatus} </h1>
            </form>
            </div> 
        </div>
    );
}
export default Login;

Answer

Edit, I will not remove the first paragraph bellow, but it isnt right, use it as context for the @Yousaf comment bellow.

So, to resume, you have tried to call then on a promise which was already consume by the first then you putted into checkRegister. Which cannot work related to how handle a promise, you can read more about it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise. As I said you have to choose between, consume it directly into checkRegister or consume after into your read function. And set the state according to the choice you did before, where you have access to your result.

You have to put the keyword function before checkRegister to declare it as it.

You can remove var ok; which is useless and used here. You can remove too the import called setState, unused too.

And finally, you can remove the e.preventDefault(); which is useless in your case because you are using a simple button, not connected to your form. You can learn more about forms here: https://reactjs.org/docs/forms.html