Ag-grid slow render after upgrade to v27

I recently upgraded my ag-grid v21 to 27. I'm using node 14.19 and Material-UI v4. When I set my pagination to 30 (it's ok with 10) I have a lag (~0.5sec) and when I go to the next page or if I sort my column and if I add more row to display in my pagination, e.g 100 I'll get more lag (~1sec). With ag-grid v21 I never had this lag I don't understand what I have to change to be ok with ag-grid v27. I just have 500 row in my json object. Here is my code :

import React, { Component } from "react";
import { axiosApiBackend } from "variables/axiosConfigs.jsx";
import PropTypes from "prop-types";
import { AgGridReact } from "ag-grid-react";

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";

// core components
import GridContainer from "components/Grid/GridContainer.jsx";
import GridItem from "components/Grid/GridItem.jsx";

class Customer extends Component {
  constructor(props) {
    super(props);

    this.BACKEND_URL = "/customers";
    this.gridApi = null;
    this.gridColumnApi = null;

    this.state = {
      columnDefs: [
        {
          headerName: "#",
          field: "id",
          sort: "desc",
        },
        {
          headerName: "User",
          field: "user",
          valueGetter: (params) =>
            (params.data.lastname || "") + " " + (params.data.firstname || ""),
        },
        {
          headerName: "Email",
          field: "email",
        },
        {
          headerName: "Address",
          field: "address",
        },
        {
          headerName: "Zip code",
          field: "city.zip",
        },
        {
          headerName: "city",
          field: "city.name",
        },
      ],
      defaultColDef: {
        sortable: true,
      },
      data: null,
      frameworkComponents: {},
    };
  }

  componentDidMount() {
    this.loadAsyncData();
  }

  loadAsyncData() {
    axiosApiBackend.get(this.BACKEND_URL).then((result) => {
      this.setState({ data: result.data }, () => {});
    });
  }

  onGridReady = (params) => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  };

  render() {
    return (
      <GridContainer>
        <GridItem xs={12} className="ag-theme-material">
          <AgGridReact
            domLayout="autoHeight"
            rowData={this.state.data}
            columnDefs={this.state.columnDefs}
            suppressRowClickSelection={true}
            groupSelectsChildren={true}
            rowSelection={"multiple"}
            rowGroupPanelShow={"always"}
            pivotPanelShow={"always"}
            enableRangeSelection={true}
            pagination={true}
            paginationPageSize={30}
            onGridReady={this.onGridReady}
          />
        </GridItem>
      </GridContainer>
    );
  }
}

Customer.propTypes = {
  location: PropTypes.any,
  history: PropTypes.any,
  classes: PropTypes.any,
};

export default Customer;

How can I do to fix this lag ?

Edit:

I just tried the version 26 and I don't have the lag. When I retry the version 27 I got the lag again. I don't know if this bug is related to the v27 or if I have to do something else

Edit 2: I think the problem is related to https://www.ag-grid.com/react-data-grid/reactui/ So I tried to use the suppressReactUi=true It's a little bit better but the render with v26 is faster. So I don't know why I got the lag with the new render in the v27. Maybe I have to upgrade my react version ?