dates are not sorted correctly in mui-datatables

Question

I have dates made & formatted by momentjs e.g. ("Sat, Feb 22, 2020 12:55 PM") I read them in from firestore, they appear to come in fine as I sort them first to be sorted descending.

forms.sort(function(left, right) {
  return moment.utc(left.timeIn).diff(moment.utc(right.timeIn));
});

Then I do a console.log to check there are all there and sorted correctly.

Next, I pass them into the Record Table component which contains a mui-datatable. At this point, problems start to happen.

{
  forms.length > 0 ? (
    <RecordTable forms={forms} />
  ) : (
    <div>
      <h2>No Records</h2>
    </div>
  )
}

1. they do not display on screen sorted descending with most recent date at the top.

   {
     name: "timeIn",
     label: "Time In",
     options: {
       sortDirection: "desc",
       searchable: false
     }
   },
   

2. for some reason likely my fault, the values passed into the mui-datatable come in 100's of times even though there are only 75 records. I can see this by doing first doing a console log in the child component then another console.log within mui-datatables on one of the columns which has a customBody Render.

I am really not sure what I am doing wrong here, as the dates are sorted before they are passed to mui-datatables, and from console logs in the parent component, only 75 records are printed out as oppose to hundreds in mui-data table console.logs

Answer 1

Try giving a format to the Date of "YYYY-MM-DD"