Encountered two children with the same key, - material-ui

Question

I'm working on material table in react and when I try to delete or updated my row datas then I'm monitoring this error all of times.
Update Error: react_devtools_backend.js:4012 Warning: Encountered two children with the same key, row-cc5026f5-6a53-4f91-850d-3127467a8615. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Delete Error: Nothing happening when I Try to delete.
What's wrong with my codes?
here is Table.js
import React, { Component, useEffect, useState } from 'react';
import MaterialTable from '#material-table/core';
import axios from 'axios';
import { emplist as RoomInfo } from './data/emplist';
function App() {
const [data, setData] = useState(RoomInfo);
const columns = [
{
title: 'ID',
field: 'id',
},
{
title: 'Floor Name',
field: 'FloorName',
},
{
title: 'Building Name',
field: 'BuildingName',
},
{
title: 'Room Code',
field: 'RoomCode',
},
{
title: 'Room Name',
field: 'RoomName',
},
{
title: 'Room Area',
field: 'RoomArea',
},
{
title: 'Room Perimeter',
field: 'RoomPerimeter',
},
{
title: 'Room Height',
field: 'RoomHeight',
},
];
return (
<MaterialTable
title="Editable Preview"
columns={columns}
data={data}
editable={{
onRowAdd: (newRow) =>
new Promise((resolve, reject) => {
const updatedRows = [
...data,
{ id: Math.floor(Math.random() * 100), ...newRow },
];
setTimeout(() => {
setData(updatedRows);
resolve();
}, 2000);
}),
onRowDelete: (selectedRow) =>
new Promise((resolve, reject) => {
const index = selectedRow.tableData.id;
const updatedRows = [...data];
updatedRows.splice(index, 1);
setTimeout(() => {
setData(updatedRows);
resolve();
}, 1000);
}),
onRowUpdate: (selectedRow, oldRow) =>
new Promise((resolve, reject) => {
const index = oldRow.tableData.id;
const updatedRow = [...data];
updatedRows[index] = updatedRow;
setTimeout(() => {
setData(updatedRows);
resolve();
}, 1000);
}),
}}
options={{
actionsColumnIndex: -1,
addRowPosition: 'first',
}}
/>
);
}
export default App;
Hi everyone, I'm working on material table in react and when I try to delete or updated my row datas then I'm monitoring this error all of times.
Update Error: react_devtools_backend.js:4012 Warning: Encountered two children with the same key, row-cc5026f5-6a53-4f91-850d-3127467a8615. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
Delete Error: Nothing happening when I Try to delete.
What's wrong with my codes?