How to fire Ag-Grid Resize inside jquery

I'm using jQuery. Outside of the document.ready function, I'm setting up my ag-grid.

const columnDefs = [
    { headerName: 'ID', field: 'id' },
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' }
];

const gridOptions = {
    defaultColDef: {
        resizable: true
    },
    columnDefs: columnDefs,
    enableSorting: true,
    enableFilter: true,
    onFirstDataRendered: onFirstDataRendered,
};

document.addEventListener('DOMContentLoaded', function () {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

function onFirstDataRendered(params) {
    params.api.sizeColumnsToFit();
}

The documentation said to use OnFirstDataRendered for resizing, but I was getting a warning that it is invalidGridOptions. I ignored the warning and proceeded. The grid rows are set after the API call via

gridOptions.api.setRowData(gridData)

, but the resize method is not called; therefore, my columns are not resized. I have tried using onRowDataUpdated instead, but I get the same result, the function is not hit and it doesn't size the columns.

from How to fire Ag-Grid Resize inside jquery