How to use ag-grid with angular 14

I'm trying to setup ag-grid. I wanted to test with some sample data but I'm getting error related to ClientSideRowModelModule.

These are the versions i've installed:

  "dependencies": {
    "@ag-grid-community/angular": "^28.1.1",
    "@ag-grid-community/client-side-row-model": "^28.1.1",
    "@ag-grid-community/core": "^28.1.1",
    "@ag-grid-enterprise/all-modules": "^27.3.0",
    "ag-grid-angular": "^28.1.1",
    "ag-grid-community": "^28.1.1",
    ...

This is my template:

<ag-grid-angular #agGrid style="height: 500px;" class="ag-theme-alpine"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
[modules]="modules"  <----------------- the problem is here
[columnDefs]="[]"
[ensureDomOrder]="true"
[pagination]="true"
(rowDataChanged)="onGridReady($event)"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[enableBrowserTooltips]="true">
</ag-grid-angular>

This is my logic file:

import { Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { Module } from 'ag-grid-community';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

interface Run {
  name: string;
  groupId: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  modules: Module[] = [ClientSideRowModelModule]; // Error

  defaultColDef = {
    flex: 1,
    resizable: true,
    sortable: true,
    minWidth: 100,
    filter: true,
    filterParams: {
      buttons: ['cancel', 'reset', 'apply'],
      closeOnApply: true,
      inRangeInclusive: true,
      suppressAndOrCondition: true,
    },
  };

  @ViewChild('agGrid') agGrid: AgGridAngular;

  rowData: Run[];
  paginationPageSize = 20;

  onGridReady(_event: any) {
    this.agGrid.columnApi.autoSizeAllColumns(true);
  }

  constructor() {
    this.rowData.push({ name: 'tanzeel', groupId: 100 });
  }
}

The error is very lengthy:

Error: src/app/app.component.ts:29:24 - error TS2322: Type 'import("C:/Users/TanzeelMirza/Documents/angular14/i.../node_modules/@ag-grid-community/core/dist/cjs/es5/interfaces/iModule").Module' is not assignable to type 'import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/interfaces/iModule").Module'. Types of property 'rowModels' are incompatible. Type '{ [name: string]: new () => import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/@ag-grid-community/core/dist/cjs/es5/interfaces/iRowModel").IRowModel; } | undefined' is not assignable to type '{ [name: string]: new () => import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/interfaces/iRowModel").IRowModel; } | undefined'. ...mmunity/core/dist/cjs/es5/gridApi").GridApi' is not assignable to type 'import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/gridApi").GridApi'. Types have separate declarations of a private property 'immutableService'.

29 modules: Module[] = [ClientSideRowModelModule];

Please point out my mistake. I read this documentation also.