state value set to initial state after using uselazyQuery in React

When I tried to set signType12 on button click then it firstly set the correct value after that it calls an API via useEffect using useLazyQuery then signType12 gives null as initial state.

Below are the code...

const [getOrder] = useLazyQuery(GET_BUSINESS_LIFE_ORDER, {
fetchPolicy: "no-cache",
onError: useCallback((err: any) => {
  apiErrorHandler(err);
  setIsTransLoading(false);
}, []),
onCompleted: useCallback(({ getBusinessLifeOrder }: any) => {
  setLifeOrder(getBusinessLifeOrder);
  setLoading(false);
  console.log(signType12, "sign12");
  if (getBusinessLifeOrder.signatureId) {
    getOrderSignatureInfo({
      variables: {
        id: orderId,
      },
    });
  } else if (signType12 != null) {
    companySignDoc({
      variables: {
        orderId: orderId,
        deliveryMethod:
          signType12 == "url" ? "URL" : signType12 == "email" ? "EMAIL" : null,
        userType: "LEGALREPRESENTATIVE",
        signer1: {
          name: getBusinessLifeOrder.contactInfo.name,
          email: getBusinessLifeOrder.contactInfo.email,
        },
      },
    });
  }
  // setIsTransLoading(false);
}, []), });

useEffect(() => {
if (signType12) {
  console.log(signType12, “sign12”);
  // setIsTransLoading(true);
  getOrder({ variables: { id: orderId } });
}}, [signType12]);

The return function is

        <button
          onClick={() => {
            setSignType12('url')
          }}>
          Assinar agora
        </button>
        <button
          onClick={() => {
            setSignType12('email')
          }}>
          Enviar documento por email
        </button>