Column visibility issue ag-grid-react, pinned columns not showing up on first render

Question

We are using "ag-grid-community": "26.2.0" and "ag-grid-react": "26.2.0" packages in our project. We have implemented a wrapper reusable component which we're planning to use across the application.

The requirement states that checkbox selection and the first column are to be pinned to the left by default.

Column Definitions:

const colDefs = [
    {
      headerName: "Vulnerability Title",
      field: "patchName",
      cellRendererFramework: patchListRenderers.patchNameRenderer,
      pinned: "left", // pinned property
      minWidth: 300,
    },
    {
      headerName: "Status",
      field: "vulnerabilityStatus",
      minWidth: 180,
    },
    {
      headerName: "Vulnerability ID",
      field: "cveId",
      minWidth: 210,
    },
    // more column definitions here
]

My gridOptions are this:

export const gridProps = {
  reactUi: true,
  rowHeight: 70,
  headerHeight: 70,
  rowSelection: "multiple",
  suppressRowClickSelection: true,
  pagination: true,
  paginationPageSize: 10,
  suppressPaginationPanel: true,
  enableCellTextSelection: true,
  ensureDomOrder: true,
  suppressDragLeaveHidesColumns: true,
  suppressColumnVirtualisation: true,
  popupParent: document.querySelector("body"),
};

I am facing a weird issue where the pinned column headers are shown, but the data underneath is missing, however, once I drag around the pinned column a bit, everything comes back in its proper place. Please refer to the GIFs attached.

Things I've tried:

• Changed the width values,
• Tried true and false for suppressColumnVirtualisation property.
• Tried to use gridApi.redrawRows() and gridApi.refreshCells() on the onGridReady event. None of these suggestions worked.

GIF 1 GIF 2