Grid Editing Inline component inserts two rows when I add a new row

Hi telerik team

I'm trying to implement the "add new row" function in a Grid >Editing >inline component.

I have followed the steps as you have in the documentation, but somehow, every time I trigger the "add" function it inserts new two rows with the same values and same id.

this is my code. Any ideas what I'm doing wrong? Thanks!

const GridComponent= () => {
    const editField = "inEdit";
    const [data, setData] = React.useState([]);
 
const functionToGetInfoInFromAPI{ setData(result.data)}
useEffect(()=>{
    functionToGetInfoInFromAPI()
}, [])
const generateId = (data) => {
    let highestId = 0;
    data.forEach((item) => {
        if(item.casystem_id > highestId) {
            highestId = item.casystem_id;
        }
    })
    return highestId+1;
}
 
const insertItem = (item) => {
   item.inEdit = false;
    item.casystem_id = generateId(data);
const newDataArray = [item, ...data];
return newDataArray;


};
const add = (dataItem) => {
dataItem.inEdit = true;
        const newData = insertItem(dataItem);
        setData(newData);

};
const itemChange = (event) => {
const field = event.field || "";
    const newData = data.map((item) =>
        item.casystem_id === event.dataItem.casystem_id
            ? { ...item, [field]: event.value }
            : item
    );
    setData(newData);
};

const addNew = () => {
const newDataItem = {
inEdit: true,
        Discontinued: false,
    };
    setData((oldData) => [newDataItem, ...oldData]);

};
 
export const MyCommandCell = props => {
    const {
        dataItem
    } = props;
    const inEdit = dataItem[props.editField];
    const isNewItem = dataItem.casystem_id === undefined;
    return inEdit ? <td className="k-command-cell">
        <button className="k-button k-grid-save-command" onClick={() => isNewItem ? props.add(dataItem) : props.update(dataItem)}>
            {isNewItem ? "Add" : "Update"}
        </button>
        <button className="k-button k-grid-cancel-command" onClick={() => isNewItem ? props.discard(dataItem) : props.cancel(dataItem)}>
            {isNewItem ? "Discard" : "Cancel"}
        </button>
    </td> : <td className="k-command-cell">
        <button className="k-primary k-button k-grid-edit-command" onClick={() => props.edit(dataItem)}>
            Edit
        </button>
        <button className="k-button k-grid-remove-command" onClick={() =>  window.confirm("Confirm deleting: " + dataItem.comp_nickname) && props.remove(dataItem)}>
            Remove
        </button>
    </td>;
};
                
<Grid
    data={data}
    onItemChange={itemChange}
    editField={editField}
    dataItemKey={"casystem_id"}
>
    <GridToolbar>
        <button title="Add new" className="k-button k-primary" onClick={addNew}>
            Add new
        </button>
    </GridToolbar>
    <Column field="casystem_id" title="id" editable={false}  />
    <Column field="nickname" title="Nickname"   />
    <Column cell={CommandCell} width="240px" />
</Grid>