Doing it wrong - watch

[BlackSulfur]

I get the feeling I am doing this wrong. Basically I am trying to create a live quote form where when a user types into a field it should do calculations in real time and show the user a total price. I also want to in future send the fields to some global state like Zustand.

What is happening now is that in my else condition where it should be number of children * 120, it shows zero.

This is for ticket prices for adults & children. childrenPrice always is zero when I input a value of 11 or more.

I do see a warning underlining 1000 which says "Assignments to the 'childrenPrice' variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect" but I don't know what this means exactly.

type Inputs = {
  adults: number;
  children: string;
};

const QuoteForm = () => {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors },
  } = useForm<Inputs>();
  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  let adultPrice = 0;
  let childrenPrice = 0;
  let adults = watch("adults", 0);
  let children = watch("children", "0");
  

  useEffect(() => {
    const subscription = watch((value, { name, type }) => {
      if (parseInt(value.children!) < 11) {
        childrenPrice = 1000;
      } else {
        childrenPrice = parseInt(children) * 115;
      }
      
    });
    return () => subscription.unsubscribe();
  }, [watch, children]);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register("adults")}
        type="number"
        placeholder="No. of adults"
        className="input input-bordered w-full max-w-xs"
      />
      {errors.adults && <span>This field is required</span>}

      <input
        {...register("children", { required: true })}
        type="number"
        placeholder="No. of children"
        className="input input-bordered w-full max-w-xs"
      />

      {errors.children && <span>This field is required</span>}

      <button className="btn btn-primary block">Accept Quote</button>
    </form>