Why is AgGrid transaction api allow adding duplicate rows with the same primary key from getRowId()

Is this by design or a bug?

https://www.ag-grid.com/javascript-data-grid/data-update-transactions/

Here is a code example:

https://plnkr.co/edit/8G36oeIsMRNzwPQu

Try click “Add Items” button multiple times, you will see duplicate rows with the same id is getting added.

data.js

export function getData() {
    return [
        {
            id: 1,
            make: 'Toyota',
            model: 'Celica',
            price: 35000,
            zombies: 'Elly',
            style: 'Smooth',
            clothes: 'Jeans',
        },
        {
            id: 2,
            make: 'Ford',
            model: 'Mondeo',
            price: 32000,
            zombies: 'Shane',
            style: 'Filthy',
            clothes: 'Shorts',
        },
        {
            id: 3,
            make: 'Porsche',
            model: 'Boxster',
            price: 72000,
            zombies: 'Jack',
            style: 'Dirty',
            clothes: 'Padded',
        },
    ];
}

main.js

import { createApp, onBeforeMount, ref, shallowRef } from "vue";
import { AgGridVue } from "@ag-grid-community/vue3";
import "@ag-grid-community/styles/ag-grid.css";
import "@ag-grid-community/styles/ag-theme-quartz.css";
import { getData } from "./data.js";
import { ClientSideRowModelModule } from "@ag-grid-community/client-side-row-model";
import { ModuleRegistry } from "@ag-grid-community/core";
ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = {
  template: `
        <div style="height: 100%">
                <div style="height: 100%; display: flex; flex-direction: column">
      <div style="margin-bottom: 4px">
        <button v-on:click="addItems(undefined)">Add Items</button>
        <button v-on:click="addItems(2)">Add Items addIndex=2</button>
        <button v-on:click="updateItems()">Update Top 2</button>
        <button v-on:click="onRemoveSelected()">Remove Selected</button>
        <button v-on:click="getRowData()">Get Row Data</button>
        <button v-on:click="clearData()">Clear Data</button>
      </div>
      <div style="flex-grow: 1">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          :class="themeClass"
          :columnDefs="columnDefs"
          @grid-ready="onGridReady"
          :defaultColDef="defaultColDef"
          :rowData="rowData"
          :getRowId="getRowId"
          :rowSelection="rowSelection"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const columnDefs = ref([
      { field: "make" },
      { field: "model" },
      { field: "price" },
      { field: "zombies" },
      { field: "style" },
      { field: "clothes" },
    ]);
    const gridApi = shallowRef();
    const defaultColDef = ref({
      flex: 1,
    });
    const rowData = ref(null);
    const rowSelection = ref(null);

    onBeforeMount(() => {
      rowData.value = getData();
      rowSelection.value = "multiple";
    });

    const getRowId = (params) => params.data.make;

    const getRowData = () => {
      const rowData = [];
      gridApi.value.forEachNode(function (node) {
        rowData.push(node.data);
      });
      console.log("Row Data:");
      console.table(rowData);
    };
    const clearData = () => {
      const rowData = [];
      gridApi.value.forEachNode(function (node) {
        rowData.push(node.data);
      });
      const res = gridApi.value.applyTransaction({
        remove: rowData,
      });
      printResult(res);
    };
    const addItems = (addIndex) => {
      const newItems = [
        createNewRowData()
      ];
      const res = gridApi.value.applyTransaction({
        add: newItems,
        addIndex: addIndex,
      });
      printResult(res);
    };
    const updateItems = () => {
      // update the first 2 items
      const itemsToUpdate = [];
      gridApi.value.forEachNodeAfterFilterAndSort(function (rowNode, index) {
        // only do first 2
        if (index >= 2) {
          return;
        }
        const data = rowNode.data;
        data.price = Math.floor(Math.random() * 20000 + 20000);
        itemsToUpdate.push(data);
      });
      const res = gridApi.value.applyTransaction({ update: itemsToUpdate });
      printResult(res);
    };
    const onRemoveSelected = () => {
      const selectedData = gridApi.value.getSelectedRows();
      const res = gridApi.value.applyTransaction({ remove: selectedData });
      printResult(res);
    };
    const onGridReady = (params) => {
      gridApi.value = params.api;
    };

    return {
      columnDefs,
      gridApi,
      defaultColDef,
      rowData,
      rowSelection,
      onGridReady,
      themeClass:
        "ag-theme-quartz",
      getRowData,
      getRowId,
      clearData,
      addItems,
      updateItems,
      onRemoveSelected,
    };
  },
};

window.createNewRowData = function createNewRowData() {
  const newData = {
    make: "Toyota ",
    model: "Celica " + newCount,
    price: 35000 + newCount * 17,
    zombies: "Headless",
    style: "Little",
    clothes: "Airbag",
  };
  newCount++;
  return newData;
};

window.printResult = function printResult(res) {
  console.log("---------------------------------------");
  if (res.add) {
    res.add.forEach((rowNode) => {
      console.log("Added Row Node", rowNode);
    });
  }
  if (res.remove) {
    res.remove.forEach((rowNode) => {
      console.log("Removed Row Node", rowNode);
    });
  }
  if (res.update) {
    res.update.forEach((rowNode) => {
      console.log("Updated Row Node", rowNode);
    });
  }
};

let newCount = 1;

createApp(VueExample).mount("#app");

I expect the rows with same id will not get added twice via applyTransaction({add: [row_1, row_1]})