Cell edit in the inner expand table is not working

I tried to expand a table and edit the inner table. Well, I was able to edit but the values are not saving. If I edit a input field from top row, all the changes are reflecting in my last row. Here is the code I am using.

```
const products = [];
const cellEditProp = {
mode: 'click',
blurToSave: true
};
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
if (i < 3) {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i,
expand: [ {
fieldA: i,
fieldB: "B",
fieldC: (i + 1) * Math.random() * 100,
fieldD: '123eedd' + i
}, {
fieldA: i+1,
fieldB: "A",
fieldC: i * Math.random() * 100,
fieldD: '123eedd' + i
} ]
});
} else {
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
}
addProducts(5);

class BSTable extends React.Component {
render() {
if (this.props.data) {
return (

Field A
Field B
Field C
Field D
);
} else {
return (

?

);
}
}
}

class dataCenterTable extends React.Component {
constructor(props) {
super(props);
}

isExpandableRow(row) {
if (row.id < 3) return true;
else return false;
}

expandComponent(row) {
return (

);
}

expandColumnComponent({ isExpandableRow, isExpanded }) {
let content = '';

if (isExpandableRow) {
content = (isExpanded ? '(-)' : '(+)' );
} else {
content = ' ';
}
return (

);
}

render() {
const options = {
expandRowBgColor: 'rgb(242, 255, 163)',
expandBy: 'column' // Currently, available value is row and column, default is row
};
const selectRow = {
mode: 'checkbox',
clickToSelect: false, // click to select, default is false
clickToExpand: true // click to expand row, default is false
};
return (

Product ID
Product Name
Product Price

);
}
}

```