title: Material-UI DateRangePicker TypeScript Error Can't use (Date | null)[] for DateRange<any>
body: <pre><code>TypeScript error in C:/**.tsx(109,45):
  Argument of type '(Date | null)[]' is not assignable to parameter of type 'SetStateAction&lt;DateRange&lt;any&gt;&gt;'.
    Type '(Date| null)[]' is not assignable to type '(prevState: DateRange&lt;any&gt;) =&gt; DateRange&lt;any&gt;'.
      Type '(Date | null)[]' provides no match for the signature '(prevState: DateRange&lt;any&gt;): DateRange&lt;any&gt;'.  TS2345
  
      107 |                   console.log('Submitted Dates:', newValue);
      108 |                   console.log('Corrected Dates:', utcCorrectedDates);
    &gt; 109 |                   setCarrierTransactionDate(utcCorrectedDates);
          |                                             ^
      110 |                 }}
      111 |                 onError={(
      112 |                   errorReason: DateRangeValidationError,
  </code></pre>
  <p>Full Function is</p>
  <pre><code>        onChange={(newValue: DateRange&lt;any&gt;) =&gt; {
            const utcCorrectedDates = newValue.map(date =&gt; {
              if (date) return convertMissDatedToUTC(date);
              return null;
            });
            console.log('Submitted Dates:', newValue);
            console.log('Corrected Dates:', utcCorrectedDates);
            setCarrierTransactionDate(utcCorrectedDates);
          }}
  </code></pre>
  <p>I see the type def of DateRange is</p>
  <pre><code>export declare type DateRange&lt;TDate = unknown&gt; = [TDate | null, TDate | null];
  </code></pre>
  <p>my type def of convertMissDatedToUTC is</p>
  <pre><code>convertMissDatedToUTC = ( origDate: string | Date | null ): Date | null
  </code></pre>
  <p>I can't for the life of me figure out how to convert this new array to DateRange.</p>
  <p>Basically the problem I am trying to fix is the DateRangePicker is creating values like this since my Client is in the Central Time Zone:</p>
  <pre><code>[
      &quot;2022-01-13T06:00:00.000Z&quot;,
      null
  ]
  </code></pre>
  <p>When I need them to be UTC:</p>
  <pre><code>[
      &quot;2022-01-13T00:00:00.000Z&quot;,
      null
  ]
  </code></pre>
  <p>So I created the function to fix these values.</p>
  <pre><code>const convertMissDatedToUTC = (
    origDate: string | Date | null
  ): Date | null =&gt; {
    if (origDate === null) return null;
    const tzDateObj = new Date(origDate);
    const utcDateObj = new Date();
    utcDateObj.setUTCFullYear(tzDateObj.getFullYear());
    utcDateObj.setUTCMonth(tzDateObj.getMonth());
    utcDateObj.setUTCDate(tzDateObj.getDate());
    utcDateObj.setUTCHours(tzDateObj.getHours());
    utcDateObj.setUTCMinutes(tzDateObj.getMinutes());
    utcDateObj.setUTCSeconds(tzDateObj.getSeconds());
    utcDateObj.setUTCMilliseconds(tzDateObj.getMilliseconds());
    return utcDateObj;
  };
  </code></pre>