Mobxオブザーバブルはオブザーバブルの変化に反応していません

アクション呼び出しの後、オブザーバブルは新しい値で更新されますが、オブザーバブルクラスで更新がトリガーされません。観察可能なオブジェクトを使用するレンダリングに条件チェックを入れると、反応が発生します。しかし、返されたDOM内の別の場所にある監視可能なオブジェクトをprop条件として使用します。なぜこれが起こるのか理解できませんでした。

これが私のオブザーバークラスです

@inject("store")
@observer
export default class SignupWithMobileNo extends Component {
  constructor() {
    super();
    this.sendOTP = this.sendOTP.bind(this);

    this.state = {
      phoneInput: ""
    };
  }

  static navigationOptions = {
    header: null
  };

  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
  }

  handleBackButton() {
    ToastAndroid.show("You cannot go back", ToastAndroid.SHORT);
    return true;
  }

  sendOTP(phone) {
    this.props.store.userStore.sendOTP(phone);
  }

  componentDidUpdate() {
    console.log("component did update", this.props);
    const navigation = this.props.navigation;
    const { sendOTPRequest } = this.props.store.userStore;
    if (sendOTPRequest.state === "succeeded") {
      navigation.navigate("VerifyOTP");
    }
  }

  render() {
    const navigation = this.props.navigation;
    const { sendOTPRequest } = this.props.store.userStore;
    // reaction occurs when I uncomment the following lines.
    // if (sendOTPRequest.state === "succeeded") {

    // }
    return(
      <View style={styles.container}>
        <Formik
          initialValues={{
            phone: ""
          }}
          onSubmit={values => {
            this.sendOTP(values.phone);
          }}
          validate={values => {
            let errors = {};

            if (values.phone.length < 1) {
              errors.phone = "Invalid phone number";
            }

            return errors;
          }}
        >
          {({
            handleChange,
            handleSubmit,
            setFieldTouched,
            values,
            errors,
            touched
          }) => (
            <View style={styles.formBody}>
              <Text style={styles.headline}>Get authenticate your account</Text>
              <FormInput
                onChange={handleChange("phone")}
                value={values.phone}
                placeholder="Enter your phone number"
                keyboardType="phone-pad"
                onBlur={() => {
                  setFieldTouched("phone");
                }}
              />
              <FormButton
                onClickHandler={handleSubmit}
                buttonText="Send OTP"
                isDisabled={
                  values.phone.length < 1 ||
                  sendOTPRequest.state === "requested"
                }
              />

              {touched.phone && errors.phone ? (
                <Text style={styles.body}> {errors.phone} </Text>
              ) : null}

              {sendOTPRequest.state === "failed" ? (
                <Text style={styles.body}> {sendOTPRequest.error_code</Text>
              ) : null}
            </View>
          )}
        </Formik>
      </View>
    );
  }
}