ag-Grid Restoring State

<html>
<head>
    <script src="https://unpkg.com/ag-grid/dist/ag-grid.js"></script>
    <script src="example-js.js"></script>
</head>
<body>
    <input type="button" value="Save State" onclick="saveState()"/>
    <div id="myGrid" style="height: 100%;width: 100%;" class="ag-fresh"></div>
</body>
</html>

var columnDefs = [
    {
        headerName: "Make",
        field: "make",
        editable: true
    },
    {
        headerName: "Model",
        field: "model",
        editable: true
    },
    {
        headerName: "Complex",
        field: "complex",
        width: 150,
        cellRenderer: function (params) {
            return params.value;
        },
        valueGetter: (params) => {
            return params.data.complex.name
        }
    }
];

function saveState() {
    console.log(JSON.stringify(gridOptions.columnApi.getColumnState()));
    console.log(JSON.stringify(gridOptions.api.getFilterModel()));
    console.log(JSON.stringify(gridOptions.api.getSortModel()));
}

var rowData = [
    {make: "Toyota", model: "Celica", price: "35000", complex: {name: "bob"}, edited: false},
    {make: "Ford", model: "Mondeo", price: "32000", complex: {name: "fred"}, edited: false},
    {make: "Porsche", model: "Boxter", price: "72000", complex: {name: "john"}, edited: false},
];

/*
 Should be:
 model / make (asc) / complex
 john
 bob
 */
var colState = JSON.parse('[{"colId":"model","hide":false,"aggFunc":null,"width":200,"pivotIndex":null,"pinned":null,"rowGroupIndex":null},{"colId":"make","hide":false,"aggFunc":null,"width":200,"pivotIndex":null,"pinned":null,"rowGroupIndex":null},{"colId":"complex","hide":false,"aggFunc":null,"width":150,"pivotIndex":null,"pinned":null,"rowGroupIndex":null}]');
var filterState = JSON.parse('{"complex":{"type":"contains","filter":"o"}}');
var sortState = JSON.parse('[{"colId":"make","sort":"asc"}]');

var gridOptions = {
    columnDefs: columnDefs,
    enableSorting: true,
    enableFilter: true,
    onGridReady: function () {
        gridOptions.api.setFilterModel(filterState);
        gridOptions.columnApi.setColumnState(colState);
        gridOptions.api.setSortModel(sortState);
    },
    defaultColDef: {
        filterParams: {newRowsAction: 'keep'}
    }
};

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

    setTimeout(() => {
        gridOptions.api.setRowData(rowData);
    }, 1000)
});