Issue with Edit Table with Nested JSON data. SandBox provided, please help!

[ankursehdev]

Hello Team,

I want to create an editable table for a person's information. I have a nested JSON coming from the API that looks like this:

Details have an array of different details of a person.

const currentData = [
  {
    firstName: "ankur",
    lastName: "sehdev",
    details: [
      {
        age: "25",
        visits: "30",
        status: "single"
      },
      {
        weight: "67",
        height: "123"
      }
    ]
  },
  {
    firstName: "alex",
    lastName: "luthur",
    details: [
      {
        age: "25",
        visits: "30",
        status: "single"
      },
      {
        weight: "75",
        height: "163"
      }
    ]
  }
];

I have the documentation and tried to create the similar functionality as in the Editable example but when I try to edit the NESTED properties, instead of updating the nested column it's adding a new property into the data.

I understand the UPDATEMYDATA function is only editing the top-level properties, how can I edit the nested properties of the object?

Please have a look at below sand box.

https://codesandbox.io/s/compassionate-chatelet-til68?file=/src/App.js:4798-5262

Here when you try to edit - age, visit, status, height, weight. you can see it is being added as an additional property of the data object but not the original one.

Please advise, can I use nested JSON for editing? or I need to flatten these first?