Using setValue right after another

[zju1]

I'm using useFieldArray and it's working normal. Every item of fieldArray has values below: quantity/cost/margin/price. So my array is like this:

[
    { quantity: 2, cost: 1000, margin: 20, price: 1200 },
    { quantity: 2, cost: 1000, margin: 20, price: 1200 },
    { quantity: 2, cost: 1000, margin: 20, price: 1200 },
]

When cost change I have to calculate the price using cost and margin and set both values at the same time.
And when price change I have to calculate the margin using the price and the cost and set both values.
And when the margin change I have to calculate the price using cost and margin and set both values.

I'm doing something like this:

function handleCostChange(event:ChangeEvent<HTMLInputElement>) {
   const cost = Number(event.target.value);
   const newPrice = calculateNewPrice(cost, watch(`items[${index}].margin));
   setValue(`items[${index}].cost`, cost);
   setValue(`items[${index}].price`, newPrice);
}

I have 3 functions like this.

1. For cost change
2. For price change
3. For margin change

And they're causing to invoke each other. But I want them to invoke when user changes the inputs. Setting the value of price on handleCostChange function invoking handlePriceChange function. So I need something like setValues(index, partial values). I know that there's update function. But it re-renders whole fieldArray item. I mustn't re-render.
Is there any solution to avoid using setValue right after another?