I'm trying to use the documentation for adding context to my React Ag Grid app. My issue is that their code example doesn't use the way that I create the grid. This is how they add the context

var gridOptions = {
    columnDefs: columnDefs,
    defaultColDef: {
        flex: 1,
        resizable: true
    },
    rowData: rowData,
    context: {
        reportingCurrency: 'EUR'
    },
};

// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});

And they change the context value like this

function currencyChanged() {
    var value = document.getElementById('currency').value;
    gridOptions.context = {reportingCurrency: value};
    gridOptions.api.refreshCells();
    gridOptions.api.refreshHeader();
}

I'm using React though, so I'm creating my component like this

const [gridParams, setGridParams] = useState(null);

const onFirstDataRendered = (params) => {
  setGridParams(params)
}

<AgGridReact
  columnDefs={columnDefs}
  defaultColDef={{
        flex: 1,
        resizable: true
  }}
  rowData={rowData}
  context={{ reportingCurrency: 'EUR' }}
  onFirstDataRendered={onFirstDataRendered}
>

This is how I'm changing context in my file

const currencyChange = (value) => {
     gridParams.context = { reportingCurrency: value };
     gridParams.api.refreshCells();
};

When I update the context like this, my cells don't see that the context has changed for them. Since the documentation doesn't show how to implement this for React, I figured I'm just missing something. Does anyone have any idea what that could be?