Help needed 😭: Virtual react-table lib + hook form, editable Cells, total calculations, useFieldArray to handle data state

[ssuvorov]

react-virtual table + react-hook-form (useFieldArray)

Link: https://codesandbox.io/p/devbox/vigilant-proskuriakova-w6hspc

Data State
The initial data structure has to be mutated and sent back to the backend. For this reason, I thought of using a "React Hook Form" lib and modifying the data with Controllers.
However, I couldn't find a way without transforming the data for table structure. And probably useFieldArray has to be used somehow (this will allow appending new rows), but fields are also not updating.

P.S. Virtual is use, cuz it might be >600 rows and >=10-15 columns
P.P.S. Also defaultValue prop doesn't work in Controller, when the defaultValues are set. That's why a value is set in this way in the EditableCell component

I'll appreciate your help