How do you setup Material UI DataGrid Initial State Filter Model for Date?

Question

I want to render a Matial UI datagrid with an initial filter model so only upcoming dates are shown. (until the user clears the default set filter)

I have no problems creating a filter for the date after the datagrid is loaded without any initialState set. manually setting filters after rendered datagrid

However! When I attempted the initial filter model involving the date column

initialState = {{
     filter: {
          filterModel:{
               items: [{
                    columnField: 'class_end_date',
                         operatorValue: 'onOrAfter',
                         value: new Date()
               }],
           }
     }
}}
     

I continually get Uncaught TypeError: filterItem.value.match is not a function top of the stacktrace

buildApplyFilterFn gridDateOperators.js:10
getApplyFilterFn gridDateOperators.js:62

Errors resulting from default filter model

I am assuming there's some kind of type conversion I need for the value property in the items filter object. Still researching, but I can't find anything helpful in MUI docs hence far. If anyone has tackled this one I'd be grateful for a step in the right direction! Thank you.

I also ensured that my type and valueGetter were defined appropriately in my columns array. Remember I want an initial state filter model for class_end_date

{
            field: 'class_start_date',
            headerName: 'Start Date',
            width: 140,  
            type: 'date',
            valueGetter: (params) => {
                return new Date(params.value)
            }
          
        },
        {
            field: 'class_end_date',
            headerName: 'End Date',
            width: 140,  
            type: 'date',
            valueGetter: (params) => {
                return new Date(params.value)
            }
        },

I've also tried using dateTime for the column type, formatting the dates from the valueGetters and the filtermodel value to mm/dd/yyyy format, and I tried ensuring the value property was a string

filterModel:{
               items: [{
                    columnField: 'class_end_date',
                         operatorValue: 'onOrAfter',
                         value: `${new Date()}`
               }],
           }

Answer 1

Interestingly enough, converting today's date to yyy-mm-dd string did the trick.

My take is that while the MUI valueGetter returns date object it will be converting back to a string upon comparison in the filter.

initialState = {{
      filter: {
        filterModel:{
             items: [{
                 columnField: 'class_end_date',
                 operatorValue: 'onOrAfter',
                 value: `${formatDate(new Date())}`
             }],
        }
   }
}}

WHERE formatDate is a utility function of mine that converts to 'yyyy-mm-dd'