I want to enable batch editing for a igx-grid to allow commitment of edited rows to a database. But I get the error: error-batch

I already have IgxGridModule imported in app.modules.ts. Why I get this error?

Here is my grid.

  <igx-grid #grid1
            [batchEditing]="true"
            [data]="posts"
            width="80%" 
            height="600px"
            style="margin: auto"
            [showToolbar]="true"
            toolbarTitle="Cars"
            [allowFiltering]="true"
            [columnHiding]="true"
            [hiddenColumnsText]="'hidden'"
            [columnPinning]="true"
            [pinnedColumnsText]="'pinned'"
            [primaryKey]="'examplelotId'"
            [rowEditable]="true">
    <igx-grid-toolbar>
      <igx-grid-toolbar-title>Example Table</igx-grid-toolbar-title>
    </igx-grid-toolbar>

    <igx-column field="examplelotId" dataType="number" header="LotId" [sortable]="true" [movable]="true"></igx-column>
    <igx-column field="exampleproduction" header="Production" [sortable]="true" [movable]="true" [dataType]="'string'"></igx-column>
    <igx-column field="exampledepartment" header="Department" dataType="string" [sortable]="true" [movable]="true">

    </igx-column>

    <igx-column width="100px" [filterable]="false">
      <ng-template igxCell let-cell="cell">
        <button igxButton="icon" (click)="removeRow($event, cell.cellID)">
          <igx-icon>delete</igx-icon>
        </button>
      </ng-template>
    </igx-column>
  </igx-grid>

P.S. I use Angular 12.