Setting value to hidden inputs on react hook forms

I have a dynamic form created using react-hook-form and the useFieldArray hook. Its a form to create quotations where the user can add as many rows as he may needs.

On each line the user has to inform:

• Product name.
• Material.
• Units.

For now I have implemented the logic to add new rows and "sort of" show the price line. The unit price will come from our api but for now it's just the number of units multiplied by 10.

My issue comes to store the price line. I can show it but I don't know how to stored somewhere so I can submit it with the rest of the form and use it to show the total price.

This is the function I've perpared to show the price line value:

const priceLine = (control, index) => {
    const value = watch({ control, name: `rows.${index}` });

    // setValue(`value.rows[${index}]`, { priceLine: 20 });

    return value.rows[index].units * 10 || 0;
  };

If I use the setValue function my app crashes to prevent infinite re-render looping.

Those are the useForm and use useFieldArray hooks:

  const {
    register,
    control,
    handleSubmit,
    watch,
    setValue,
    reset,
    trigger,
    setError,
  } = useForm({
    defaultValue: { priceLine: 0 },
  });

  const { fields, append, remove } = useFieldArray({
    control,
    name: "rows",
  });

And this is the loop to show all the form fields on screen:

<form onSubmit={handleSubmit(onSubmit)}>
        {fields.map((item, index) => {
          return (
            <div key={item.id} className={classes.new}>
              <div className={classes.new__row}>
                <div className={classes.new__row__field}>
                  <label>Producto</label>
                  <input {...register(`rows.${index}.product`)} />
                </div>
                <div className={classes.new__row__field}>
                  <label>Material</label>
                  <input {...register(`rows.${index}.material`)} />
                </div>
                <div className={classes.new__row__field}>
                  <label>Units</label>
                  <input type="number" {...register(`rows.${index}.units`)} />
                </div>
                <div className={classes.new__row__field}>
                  <label>Total</label>
                  {/* <input
                    type="number"
                    disabled
                    value={priceLine(control, index)}

                  /> */}
                  <span>{priceLine(control, index)}</span>
                  <input
                    type="hidden"
                    {...register(`rows.${index}.priceLine`)}
                    defaultValue={item.priceLine}
                  />
                  {/* <button type="button" onClick={() => remove(index)}>
                    x
                  </button> */}
                </div>
              </div>
              <div className={classes.new__separator}></div>
            </div>
          );
        })}
        {/* <TotalQuotation base={base(control)} /> */}
        <div className={classes.new__buttons}>
          <Link to="/quotes" style={{ textDecoration: "none", color: "black" }}>
            <FontAwesomeIcon icon={faAngleLeft} /> Volver al listado
          </Link>
          <button type="submit">Guardar presupuesto</button>
        </div>
      </form>

When I submit the form I console.log it and this is the result:

{ ​​
material: "asdasdas",
priceLine: "",
product: "adadas",
units: "25"
}

It's the react-hook-form 7.22.

I only want to add some extra information to the object I'm getting when submitting the form, so maybe setValue it's not the appropriate function?