I am using Material UI DataGrid and one of my columns contains dates. The Material UI documentation says to set the type to "date" in the column array, which I have done:

{
field: "submittedAt",
headerName: "Submitted",
minWidth: 150,
flex: 2,
type: "date",
headerClassName: "tableHeader",
cellClassName: "hoverPointer"
}

I am then converting my timestamp to MM/dd/yyyy format using Luxon

if (r.data().submittedAt) {
      const d = DateTime.fromMillis(r.data().submittedAt.toMillis());
      requestedDate = d.toFormat('MM/dd/yyyy')
    }

and then using requestedDate to set the value of the cell in the column. When I sort the data, the column is still sorting by a string comparator instead of by date:

I'm not sure what I'm doing wrong, and I can't seem to find much support in the documentation or in previous posts. I know I could set the date to yyyy/MM/dd so the string comparator works, but I don't want that format rendered for readability purposes. I also need the column to be dynamically sortable by the user, so server-side sorting won't help me out either. Thanks in advance for any help.