I just can't seem to grasp the concept of waiting state to be updated in react functional component and I have a little problem regarding dispatching actions using reducers in react. I want to trigger error popUp once the user type the wrong text in input field. It works fine but the state is legging behind one step. Error is variable from state that is manipulated from within react reducer.

//here is my error state from reducer which I want to update immediately

const [{error}, dispatch] = useStateValue();

//triggering dispatch for changing states in reducers

const useTicket = (e) => {
    e.preventDefault();
    dispatch({
    type: 'ADD_TICKETS',
    item : ticket,
    })
    console.log(`error is ${error}`);
    if(error !== 0 && error !== ''){
        setTimer();
    }
    setTicket({name: ''})
}

//this one is for showing popups

    const setTimer = () => {
    if(error !== '0' && error !== ''){
    setPopUp((popUp) => popUp = true);
    setTimeout(() => {
        setPopUp((popUp) => !popUp);

    }, 3000)
    }

}