title: MUI V5 React unit test not triggering the Date Picker handler
body: <p>I just upgraded my React project to MUI V5 where the KeyboardDatePicker component has been migrated to DatePicker as per the MUI docs. For some reason the React Library test is not able to trigger the mock handler function of the date picker component.</p>
  <p><strong>My Component</strong></p>
  <pre><code>import React from &quot;react&quot;
  import AdapterDateFns from '@mui/lab/AdapterDateFns';
  import moment from &quot;moment&quot;
  import LocalizationProvider from '@mui/lab/LocalizationProvider';
  import DatePicker from '@mui/lab/DatePicker';
  import { TextField } from &quot;@mui/material&quot;
  // Required for Material UI datepicker since it is timezone sensitive
  export const formatDate = date =&gt;
      date ? new Date(moment(date).year(), moment(date).month(), moment(date).date()) : null
  
  export default function IndependentDateRangePicker({
      handleStartDateChange,
      handleEndDateChange,
      startDateValue,
      endDateValue,
      disableDate
  }) {
      return (
          &lt;LocalizationProvider dateAdapter={AdapterDateFns}&gt;
              &lt;DatePicker
                  inputFormat=&quot;MM/dd/yyyy&quot;
                  aria-label=&quot;change start date&quot; 
                  disabled={disableDate}
                  value={formatDate(startDateValue)}
                  onChange={handleStartDateChange}
                  maxDate={endDateValue ? formatDate(endDateValue) : &quot;&quot;}
                  InputProps={{ &quot;data-testid&quot;: &quot;start-date-picker&quot; }}
                  renderInput={(props) =&gt; &lt;TextField  {...props} label=&quot;Start Date&quot; variant=&quot;standard&quot;/&gt;}
              /&gt;
              &lt;DatePicker
                  style={{ marginTop: 5 }}
                  inputFormat=&quot;MM/dd/yyyy&quot;
                  aria-label=&quot;change start date&quot;
                  disabled={disableDate}
                  value={formatDate(endDateValue)}
                  onChange={handleEndDateChange}
                  minDate={startDateValue ? formatDate(startDateValue) : &quot;&quot;}
                  InputProps={{ &quot;data-testid&quot;: &quot;end-date-picker&quot; }}
                  renderInput={(props) =&gt; &lt;TextField {...props} variant=&quot;standard&quot; label=&quot;End Date&quot; /&gt;}
              /&gt;
          &lt;/LocalizationProvider&gt;
      )
  }
  </code></pre>
  <p><strong>My React Test file</strong></p>
  <pre><code>import React from &quot;react&quot;
  import { render, fireEvent } from &quot;@testing-library/react&quot;
  import IndependentDateRangePicker, { formatDate } from &quot;../components/IndependentDateRangePicker&quot;
  
  describe(&quot;&lt;IndependentDateRangePicker /&gt;&quot;, () =&gt; {
      let c, handleEndDateChangeMock, handleStartDateChangeMock
  
      beforeEach(() =&gt; {
          handleEndDateChangeMock = jest.fn()
          handleStartDateChangeMock = jest.fn()
      })
      
  
  
      describe(&quot;When no dates are passed as props&quot;, () =&gt; {
          beforeEach(() =&gt; {
              c = render(
                  &lt;IndependentDateRangePicker
                      handleStartDateChange={handleStartDateChangeMock}
                      handleEndDateChange={handleEndDateChangeMock}
                      startDateValue={&quot;&quot;}
                      endDateValue={&quot;&quot;}
                  /&gt;
              )
          })
  
          it(&quot;should not call handlers when dates are empty&quot;, () =&gt; {
              fireEvent.change(c.getByTestId(&quot;start-date-picker&quot;).querySelector('input'), {
                  target: { value: &quot;&quot; }
              })
              fireEvent.change(c.getByTestId(&quot;end-date-picker&quot;).querySelector('input'), {
                  target: { value: &quot;&quot; }
              })
              expect(handleStartDateChangeMock).not.toHaveBeenCalled()
              expect(handleEndDateChangeMock).not.toHaveBeenCalled()
          })
  
          it(&quot;should call handler when start date is updated&quot;, async () =&gt; {
              fireEvent.change(c.getByTestId(&quot;start-date-picker&quot;).querySelector('input'), {
                  target: { value: &quot;01/03/2000&quot; }
              })
              expect(handleStartDateChangeMock).toHaveBeenCalledWith(expect.any(Date), &quot;01/03/2000&quot;)
          })
  
          it(&quot;should call handler when end date is updated&quot;, () =&gt; {
              fireEvent.change(c.getByTestId(&quot;end-date-picker&quot;).querySelector('input'), {
                  target: { value: &quot;01/04/2000&quot; }
              })
              expect(handleEndDateChangeMock).toHaveBeenCalledWith(expect.any(Date), &quot;01/04/2000&quot;)
          })
      })
  
  })
  </code></pre>
  <p><strong>Test Error Message</strong></p>
  <pre><code> ● &lt;IndependentDateRangePicker /&gt; › When no dates are passed as props › should call handler when end date is updated
  
      expect(jest.fn()).toHaveBeenCalledWith(...expected)
  
      Expected: Any&lt;Date&gt;, &quot;01/04/2000&quot;
  
      Number of calls: 0
  
        55 |              target: { value: &quot;01/04/2000&quot; }
        56 |          })
      &gt; 57 |          expect(handleEndDateChangeMock).toHaveBeenCalledWith(expect.any(Date), &quot;01/04/2000&quot;)
           |                                          ^
        58 |      })
        59 |  })
        60 |
  
        at Object.&lt;anonymous&gt; (src/__tests__/IndependentDateRangePicker.test.js:57:36)
  </code></pre>
  <p>you can see there is some problem in triggering the handleEndDateChangeMock function.</p>
  <p>Please help me with this. TIA.</p>