Wait for zustand state update before executing next lines

Question

I have a form where onSubmit Handler needs to call 4 different apis. In event of an error in any api, apis called before the faulty api should not be called when user resubmits the form after correction. I tried to store the result in zustand store for the page but store is not updated before executing downstream api.( Result is needed in downstream apis). What is the best way to handle this? Sharing code for reference

type ApiDetailsStore = {
  api1Result?: string;
  api2Result?:string
  api3Result?: string;
  setApi1Result:(api1Result:string)=>void;
  setApi2Result:(api2Result:string)=>void;
  setApi3Result:(api3Result:string)=>void;

};

const store = (set): ApiDetailsStore => ({
 api1Result:undefined,
 api2Result:undefined,
 api3Result:undefined,
 setApi1Result: (result: string) =>
    set((state) => ({ ...state, api1Result: result })),
 setApi2Result: (result: string) =>
    set((state) => ({ ...state, api2Result: result }))
  setApi3Result: (result: string) =>
    set((state) => ({ ...state, api3Result: result }))
});

export const useApiResultStore = create(devtools(store));

DummyComponent

const DummyComponent=()=>{

const apiStore= useBearStore();


onSubmitHandler=(event:any)=>{


if(isEmpty(apiStore.api1Result)){
//callApi1

apiStore.setApi1Result(apiStore.api1Result);

}

if(isEmpty(apiStore.api2Result)){
const api1Result = apiStore.api1Result(This is coming out to be empty)
//callApi2

apiStore.setApi2Result(apiStore.api2Result);

}






}

}