Add multiple columns and rows.

[LuigiCleffi]

I am working on a form that has the following object:

const defaultValues = {
  options: [
    {
      color: '',
      image: '',
      name: '',
      weight: 0,
      pricing: {
        method: PricingMethod.Basic,
        unit: 0,
        setUpCost: 0,
        unitCost: 0,
        table: [
          {
            quantity: 0,
            cost: 0
          }
        ]
      }
    }
  ]
};

One of the business rules is to append to the right only quantity and cost.
It is rows and columns, so when you type on any field it should create another row but the focus should not leave the field you were writing only create a new one.
I loads like:

What I am struggling with is creating only those two fields to the right and creating a new row only with option and cost, it is like quantity is the theader for that column.

I initially started doing it with a table but it was getting harder than it was supposed to. By the way, I am using react-hook-form with Zod and Material UI.

But if you want to help me out you can use HTML normal inputs and I'll manage to make it work.