I have my html like so:

<div class="rhi-grid-wrapper">
  <igx-grid class="rhi-list-grid" igxGridState #projectGrid id="projectGrid" [moving]="true" [data]="projectList" [isLoading]="!projectList" [autoGenerate]="false" [allowFiltering]="true" [primaryKey]="'id'" [rowEditable]="false"
  (doubleClick)="dblClick($event)" (columnInit)="onColumnInit($event)" (columnVisibilityChanged)="handleColumnVisibilityChange()" [emptyGridTemplate]="emptyGrid" [rowSelection]="'single'" [hideRowSelectors]="true" (rowSelectionChanging)="selectProjectGridRow($event)">

    <igx-grid-toolbar>
      <igx-grid-toolbar-title>Projects</igx-grid-toolbar-title>
      <igx-grid-toolbar-actions>
        <button id="btnAdd" igxButton="contained" igxRipple igxRippleCentered="true" (click)="addProject()">
            Add Project
        </button>
        <button id="btnImport" *ngIf="isAdmin" igxButton="contained" igxRipple igxRippleCentered="true" (click)="showImportDialog()">
          Import Project
        </button>
        <button id="btnDelete" *ngIf="isAdmin" igxButton="contained" igxRipple igxRippleCentered="true" [disabled]="!selectedProjectId" (click)="deleteProject()">
          Delete Project
        </button>

        <igx-grid-toolbar-hiding title="Column Hiding"></igx-grid-toolbar-hiding>
        <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
        <button type="button" id="btnAdd" igxButton="contained" igxRipple igxRippleCentered="true" (click)="gridStateComponent.showAddDialog()"  class="rhi-grid-header-button">Save Layout</button>
        <button *ngIf="gridStateComponent" type="button" id="btnDelete" class="rhi-grid-header-button" igxButton="contained" igxRipple igxRippleCentered="true"
        [disabled]="gridStateComponent.selectedGridStateId==='default' || (!gridStateComponent.isAdmin && gridStateComponent.isSystemLayout)"
        (click)="gridStateComponent.deleteGridStates()"  class="rhi-grid-header-button" style="margin-left: 1rem;">Delete Layout</button>

        <igx-select *ngIf="gridStateComponent" #select name="gridSelect" [(ngModel)]="gridStateComponent.selectedGridStateId" id="gridSelect" class="vertical-centre  state-select" style="padding-left: 0;">
          <igx-select-item [value]="'default'" (click)="restoreGrid()">
            Default Layout
          </igx-select-item>
          <igx-select-item *ngFor="let gridState of gridStateComponent.gridStates" (click)="gridStateComponent.selectGridState()" [value]="gridState.id">
            {{ gridState.stateName }}
          </igx-select-item>
        </igx-select>

  
      </igx-grid-toolbar-actions>
    </igx-grid-toolbar>

    <igx-column field="id" header="id" [editable]="false" [sortable]="false" [groupable]="false" [filterable]="false" [hidden]="true" [disableHiding]="true" [disablePinning]="true"></igx-column>

    <igx-column field="name" header="Project Name" width="40%" [editable]="false" [sortable]="true" [groupable]="true" [disableHiding]="true" [filterable]="true" [resizable]="true">
      <ng-template #projectLinkTemplate igxCell let-cell="cell">
        <div class="highlight">
          <a [routerLink]="['/projects/detail/', cell.row.data.id]" routerLinkActive="active">
            {{cell.value}}
          </a>
        </div>
      </ng-template>
    </igx-column>

    <igx-column field="client" header="Client" width="20%" [editable]="false" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true">
      <ng-template igxCellEditor let-cell="cell" let-value>
        <igx-select #select name="clients" [(ngModel)]="cell.value" width="100%" (selectionChanging)="handleSelection($event, cell)">
          <igx-select-item *ngFor="let client of clientList" [value]="client">
            {{ client.name }}
          </igx-select-item>
        </igx-select>
      </ng-template>
    </igx-column>

    <igx-column field="dateCreated" header="Date Created" width="35%" dataType="date" [editable]="false" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>

    <igx-column width="5%" header="Select Project" field="selectProject" [resizable]="true" [disableHiding]="true" [filterable]="false">
      <ng-template #emptyHeaderTemplate igxHeader></ng-template>
      <ng-template #selectProjectTemplate igxCell let-cell="cell">
          <button igxIconButton="flat" (click)="selectProject(cell.row.index)" [disabled]="!cell.row.data.hasProjectPermissions">
            <igx-icon name="choose-item"></igx-icon>
          </button>
      </ng-template>
    </igx-column>

    <igx-column field="industrySector" header="Industry Sector" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
    <igx-column field="marketSector" header="Market Sector" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
    <igx-column field="rhiScope" header="rhi Scope of Work" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
    <igx-column field="terrain" header="Terrain" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
    <igx-column field="developmentType" header="Development Type" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
    <igx-column field="region" header="Region" [editable]="false" [hidden]="true" [sortable]="true" [groupable]="true" [filterable]="true" [resizable]="true"></igx-column>
  </igx-grid>
</div>

The issue I'm having is that when I unpin columns they won't go back to the correct position. For example, if I pin Client it will move the column to the start which is expected, but then once I unpin, I would expect it to move back to its original position after Project Name but it just stays where it is. I've noticed it seems to be happening because the id column is hidden as I don't notice this issue if it is visible. However, it is something that needs to remain hidden, any suggestions on how I can fix this?