React Hook Forms/Ionic React: Fulfilling input value automatically based on changing input value

Question

There is requirement on the project who ask to fulfill an input value based on a changing input value; for instance: cash and pos are the two fields and there is a global price, having 70 as the price, if the user inputs 50 for cash, pos must be fulfilled as 20, while if the user inputs 30 for pos, cash must be 40.

We are using Ionic React inputs for the form and React Hook Form for validation and the following code:

<form noValidate onSubmit={handleSubmit(onSubmitPayment)}>
              <IonItem>
                <IonLabel>Nakit</IonLabel>
                <Controller
                  control={control}
                  name="cashAmount"
                  rules={{
                    required: true,
                    min: 0,
                    max: packageDetails.orderData.price,
                  }}
                  render={({ value, onChange, onBlur }) => (
                    <IonInput
                      type="number"
                      value={value}
                      onIonChange={([e]:any) => {
                        console.log("Firing onChange at Cash!")
                        setValue("posAmount", calculateFieldValue(e.detail.value!))
                        // onChange(e.detail.value!)
                      }}
                      onIonBlur={onBlur}
                      required
                    />
                  )}
                />
              </IonItem>
              {formErrorMessage(errors.cashAmount)}

              <IonItem>
                <IonLabel>Pos</IonLabel>
                <Controller
                  control={control}
                  name="posAmount"
                  rules={{
                    required: true,
                    min: 0,
                    max: packageDetails.orderData.price,
                  }}
                  render={({ value, onChange, onBlur }) => (
                    <IonInput
                      type="number"
                      value={value}
                      onIonChange={(e: any) => {
                        console.log("Firing onChange at POS!")
                        setValue("cashAmount", calculateFieldValue(e.detail.value!))
                        // onChange(e.detail.value!)
                      }}
                      onIonBlur={onBlur}
                      required
                    />
                  )}
                />
              </IonItem>
              {formErrorMessage(errors.posAmount)}

              <IonButton
                disabled={
                  isPaidPrice ||
                  packageDetails?.orderData?.status === PACKAGE_STATUS.DELIVERED
                }
                type="submit"
                color="secondary"
                className="ion-float-right"
              >
                Ödeme yap
              </IonButton>
              <IonItem lines="none" className="package-price">
                {packageDetails.orderData.currencySymbol}
                {packageDetails.orderData.price}
              </IonItem>
            </form>
          

While it is working, there is a problem with this: tilting.

The onChanging input must not tilt like that, it must keep editing instead to replacing it for a value, as it works normally, but i don't get how to do that.

Any way to do that?

Thank you.