How do I refresh an ag-grid data table? Having trouble with api.refreshCells

I am trying to create code to refresh a table based on sample code. However, the table is not refreshing. The code uses a Change Data button to change the value of a JavaScript variable, then uses that variable when refreshing the grid.

Unfortunately, I'm having trouble getting the grid to refresh. I've tried several different ways, including api.refreshCells() and api.redrawRows(). Can someone provide information on what the issue might be?

// main.js

let columnsDefinitions = [
    {field: 'a'},
    {field: 'b'},
    {field: 'c'},
    {field: 'd'},
    {field: 'e'},
    {field: 'f'}
];

let data = [
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    { 'a' : 1, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
];

let gridOptions =
    {
        columnDefs: columnsDefinitions,
        rowData: [],
        enableCellChangeFlash: true,
        onGridReady: function (params)
        {
            params.api.setRowData(data);
        },
        onFirstDataRendered(params)
        {
            params.api.sizeColumnsToFit();
        }
    };

function changeData()
{
    data = [
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
        { 'a' : 9, 'b' : 2, 'c' : 3, 'd' : 4, 'e' : 5, 'f' : 6 },
    ];
    console.log(data);

    gridOptions.rowData = data;
    gridOptions.api.refreshCells({force : true});

    // Other options I have tried:
    // gridOptions.api.redrawRows();
    // gridOptions.api.redrawRows({rowNodes: data$ArrayDictionary, force: true});
    // gridOptions.api.sizeColumnsToFit();
}

document.addEventListener('DOMContentLoaded',
    () =>
    {
        let gridDiv = document.querySelector('#grid');
        new agGrid.Grid(gridDiv, gridOptions);
    });

<!DOCTYPE html>
<html lang="en">
<head>
    <script> var __basePath = ''; </script>
    <style> html, body { margin: 0; padding: 0; height: 100%; } </style>
    <script src="https://unpkg.com/ag-grid-community@21.0.1/dist/ag-grid-community.min.js"></script>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="test-container">
    <div class="test-header">
        <button onclick="changeData()">Change Data</button>
    </div>
    <div id="grid" style="height: calc(100% - 30px);" class="ag-theme-balham-dark"></div>
</div>

<script src="main.js"></script>
</body>
</html>

/* styles.css */

.test-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.test-header {
    padding: 4px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 13px;
}

.ag-theme-balham-dark .ag-floating-top {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-top .ag-row {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-bottom {
    background-color: black;
}
.ag-theme-balham-dark .ag-floating-bottom .ag-row {
    background-color: black;
}