Currency exchange input field infinite loop

Im building an exhange rate calculator, which takes in 2 inputs, one for USD and other for MX, im using react and useForm hook, and 2 useffects, one for when the USD input changes and other for MX input, if MX changes then USD changes with the calculation MX / USD and vicecersa MX * USD, the problem is it starts an infinite loop because when one change the other one changes and then changes the other one and so on this is the code i have so far

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<QuoterInputs>();

  const usInput = watch('usInput');
  const mxInput = watch('mxInput');

  useEffect(() => {
    if (mxInput > 0) {
      const exchange = mxInput / parseFloat(exchangeRate);
      setValue('usInput', exchange, {});
    }
  }, [exchangeRate, mxInput, setValue]);

  useEffect(() => {
    if (usInput > 0) {
      const exchange = usInput * parseFloat(exchangeRate);
      setValue('mxInput', exchange, {});
    }
  }, [exchangeRate, usInput, setValue]);

Via Active questions tagged javascript - Stack Overflow https://ift.tt/yVdqYGI