Issue with ag-grid scroll in angular while adding cell renderers

Question

I am having trouble while adding cell renders to ag-grid while providing column options to grid (see code below). As soon as I add custom cell renderers to ag-grid the scroll becomes really slow and it is not smooth.

public ngOnInit(): void {
    this.frameworkComponents = {
      date: DateCellRendererComponent,
      money: MoneyCellRendererComponent
    };

    this.gridOptions = this._agGridService.getGridOptions({
      gridOptions: {
        defaultColDef: {
          suppressMenu: true,
          filter: false,
          autoHeight: true,
          sortingOrder: ['asc', 'desc']
        },
        domLayout: 'autoHeight',
        columnDefs: getColumnDefinitions(),
        suppressContextMenu: true,
        suppressRowHoverHighlight: true,
        suppressRowClickSelection: true,
        suppressLoadingOverlay: true,
        suppressNoRowsOverlay: true,
        onColumnResized: columnResizedEvent => this.onColumnResized(columnResizedEvent),
        onGridReady: gridReadyEvent => this.onGridReady(gridReadyEvent)
      }
    });
  }

I get below console warnings in console on adding custom renderers.

It seems that the cell renderer is making it slow. The cell renderer is not doing anything complex. The issue remains even if cell render is as simple as just displaying the given text. However removing the this.frameworkComponents from ngOnInit fixes the issue and scroll becomes smooth again.

I have tried setting multiple options in this.gridOptions but the issue remains same. Also I have an another grid which works fine with same this.gridOptions.