Hi,

I'm trying to create a Crud Grid in React in my case grid edit working fine but when i try to create a new row insert, not working with console errors:
hook.js:608 ERROR be2: NG02100 at Wp (192.168.1.38:2000/.../chunk-FWF2KR2N.js

installed versions:

"igniteui-react": "^18.6.0",
"igniteui-react-grids": "^18.6.0",

code snippet for your reference:
const gridRef = useRef();
const dataProvider = useDataProvider();

// Handle row editing completion
function rowEditActionsTemplate(ctx) {
const endRowEdit = ctx.dataContext.implicit;
const rowData = ctx.dataContext;
console.log("rowData -->", rowData);
return (
<>
<button onClick={(event) => endRowEdit(false, event)}>Cancel</button>
<button
onClick={(event) => {
console.log("event -->", event);
endRowEdit(true, event);
}}
>
Apply
</button>
</>
);
}

// Row edit completion event (update existing rows)
const webGridRowEditDone = (sender, args) => {
const updatedData = args.detail.rowData; // Get the updated row data
console.log(`Row edited with data: ${JSON.stringify(updatedData)}`)
};

// Row added event (create new row)
const webGridRowAddedDone = (sender, args) => {
let newRowData = args.detail.data;
console.log("newRowData before add -->", newRowData);
}

<IgrGrid
autoGenerate="false"
ref={gridRef}
id="grid"
data={data}
primaryKey="id"
rowEditable="true"
style={{ height: "630px" }}
moving="true"
allowAdvancedFiltering="true"
rowEditActionsTemplate={rowEditActionsTemplate}
rowEditDone={webGridRowEditDone}
rowAdded={webGridRowAddedDone} // Register the rowAdded event
className="grid"
>
<IgrActionStrip>
<IgrGridEditingActions addRow="true" />
</IgrActionStrip>
<IgrPaginator perPage="10" />
<IgrColumn
field="id"
header="ID"
dataType="Number"
sortable="true"
editable="false"
></IgrColumn>
<IgrColumn
field="MID"
header="Member ID"
dataType="Number"
sortable="true"
editable="true"
></IgrColumn>
<IgrColumn
field="AID"
header="Account ID"
dataType="Number"
sortable="true"
editable="true"
></IgrColumn>
<IgrColumn
field="TL"
header="Title"
dataType="String"
sortable="true"
editable="true"
></IgrColumn>
<IgrColumn
field="FN"
header="First name"
dataType="String"
sortable="true"
editable="true"
></IgrColumn>
<IgrColumn
field="LN"
header="Last name"
dataType="String"
sortable="true"
editable="true"
></IgrColumn>
</IgrGrid>

can you share any reference grid in react functional component