Columns displayed are in different order to column definiton AG Grid React

I have created a grid which has different column definitions based on whether a variable is true or false. When this new column is added to the grid, all other columns change order.

The column definition is still in the correct order, but the order being displayed is different.

export const exampleColumnGroup1 = {
  headerName: "Header",
  marryChildren: true,
  children: [
    {
      headerName: "One",
      field: "one"
    },
    {
      headerName: "Two",
      field: "two"
    }
  ]
}

export const exampleColumnGroup2 = {
  headerName: "Header",
  marryChildren: true,
  children: [
    {
      headerName: "One",
      field: "one"
    },
    {
      headerName: "Two",
      field: "two"
    }
  ]
}

let includeColumn2 = false;

export const getColumns = (includeColumn2) => {
  const columns = [];
  columns.push(exampleColumnGroup1);

  if (includeColumn2) {
    columns.push(exampleColumnGroup2);
  }  
}

This final getColumns method is used as the column definition in the grid. When includeColumn2 is set to true (changed through a button on the UI), the columns displayed don't follow the order in the column definition. Anyone have any ideas on what could be causing this/how to fix it?