MUI X data grid onSortModelChange not sorting data

Question

I'm trying to amend my MUI X data grid to sort on the server side, however after looking at the official docs and this SO question, I have implemented changes but nothing appears to happen when I click the column header icon to sort the column.

It's the first time I'm using the DataGrid, so any help would be appreciated.

const [sortModel, setSortModel] = useState();

const {items, loading} = props;

const columns = [
    {
      field: "firstName",
      headerName: "First Name"
    },
    { 
      field: "lastName", 
      headerName: "Last Name"
    }
  ];

return (
    <DataGrid
        rows={items}
        columns={columns}
        isCellEditable={() => false}
        loading={loading}
        disableColumnFilter
        disableRowSelectionOnClick
        sortingMode="server" // <--- Added this as per the docs
        sortModel={sortModel} // <--- Added as per the SO stuff
        onSortModelChange={(sortModel) => {
          setSortModel(sortModel); // <--- Should feed back up
        }}
      />
);

I did add a console.log({sortModel}) to the onSortModelChange which output

[
    {
        "field": "firstName",
        "sort": "asc"
    }
]

So we can see that it is getting the column name and sort direction properly.

I'm not sure what is wrong here.