Define Order of Execution for Javascript

Question

I am currently building a dropdown component that contains a button which allows a user to connect their Flow wallet (make an FCL call) and the wallet address is simultaneously stored in local state and then sent to be stored in a database.

Problem:

When user enters a refreshed page and clicks the connect wallet button (submitting the FCL call), the local state does not update before it is needed for the second api call and the call fails.

If the user clicks the connect wallet button again, the local state is updated and the call succeeds.

I need to be able to make the call to FCL, receive the wallet address, store it in local state, and then send it to the endpoint to be stored in a db.

I tried a useeffect hook first, but obviously resulted in the local state only updating when the page refreshed which was not the intended behaviour.

This is what I am currently working with -->

const handleSubmit = () => {
    return fcl
        .authenticate()
        .then(() => {
            fcl.currentUser.subscribe(setUser);
            console.log("addressssss",user.addr);
            setOpen(true);
            setWalletConnected(true);
            console.log('connected');
        })
        .then(() => {
            APIs.handleAddress({ wallet_id: user.addr }).catch(
                (err: any) => {
                    setErrors(err.response ? err.response : err.request);
                    console.log('EERRRROr', errors);
                }
            );
        });
};

fcl.authenticate is the wallet connect call, everything after that is my code.