Calculate values using React Hook Form?

        <tbody>
          <Controller
            name="products"
            control={control}
            defaultValue={[initialProduct]}
            render={({ field: { onChange, value } }) => {
              return value.map(
                (product: ReceiptProduct, index: number) => {
                  return (
                    <tr
                      key={product.id}
                      className="border-b border-slate-200 dark:border-slate-600"
                    >
                      <InvoiceFormReceiptInputTd
                        value={String(product.amount)}
                        label={`products[${index}].amount`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={product.unit}
                        label={`products[${index}].unit`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.hours)}
                        label={`products[${index}].hours`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.rate)}
                        label={`products[${index}].rate`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.price)}
                        label={`products[${index}].price`}
                      />
                      <InvoiceFormRemoveRow
                        id={product.id}
                        handleRemoveRow={() => remove(index)}
                      />
                    </tr>
                  )
                }
              )
            }}
          />
        </tbody>

        <tbody>
          <Controller
            name="products"
            control={control}
            defaultValue={[initialProduct]}
            render={({ field: { onChange, value } }) => {
              return value.map(
                (product: ReceiptProduct, index: number) => {
                  return (
                    <tr
                      key={product.id}
                      className="border-b border-slate-200 dark:border-slate-600"
                    >
                      <InvoiceFormReceiptInputTd
                        value={String(product.amount)}
                        label={`products[${index}].amount`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={product.unit}
                        label={`products[${index}].unit`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.hours)}
                        label={`products[${index}].hours`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.rate)}
                        label={`products[${index}].rate`}
                      />
                      <InvoiceFormReceiptInputTd
                        value={String(product.price)}
                        label={`products[${index}].price`}
                      />
                      <InvoiceFormRemoveRow
                        id={product.id}
                        handleRemoveRow={() => remove(index)}
                      />
                    </tr>
                  )
                }
              )
            }}
          />
        </tbody>