How to display Group column on the left after setColumnState()?

I am using Ag-grid to display data on my website. I want to allow a user to modify the view state (change column ordering, group rows, filter, etc); save that modified state; restore it later. I know this is standard functionality, and I am following the official example here: https://www.ag-grid.com/documentation/javascript/column-state/#save-and-apply-state

Like the example, my code uses const savedState = gridOptions.columnApi.getColumnState(); to get/save the column state. And later, gridOptions.columnApi.applyColumnState({ state: savedState }); to restore the state.

The problem I am having is that if a user groups rows, the "Group" column moves to the far right when the column state is restored. It starts on the left when first grouped (which is what I want), but then moves to the right when restored (which is not what I want).

How do I get the Group column(s) on the left after setColumnState()?

I see the same undesired behavior in the official example. To illustrate:

1. go to the example link posted above

2. group by some field (Sport, in this example)

3. "Group" column auto-populates at far left (which I want)

4. Click: Save State. Reset State. Restore State.

5. The restored state now shows the "Group" column at far right (which is not what I want)

from How to display Group column on the left after setColumnState()?