Как получить средние часы, минуты, секунды и миллисекунды jQuery?

Question

Как усреднить часы, минуты, секунды и миллисекунды на основе числа, выбранного во входе. Например:

const dates = [
00: 01: 10: 100 +
00: 02: 02: 200 +
00: 03: 03: 400 +
00: 04: 05: 500
] =
00: 10: 35: 300 / 4 = 00: 02: 35: 300.

Среднее значение 00: 02: 35: 300 . До сих пор я могу получить среднее значение, используя date.length

Проблема возникает, когда время делится на 3 или 2 или любое другое число, et c et c. Если бы в приведенном выше примере я делил на 3, правильное значение было бы 00: 03: 31: 766 , но результат возвращает неправильный 'Недопустимая дата: NaN'. Как это исправить?

$(window).on("load", function() {


     $('#Btn_Calculate_Average').click(function() {
          let in_One         = $('#in_One').val();
          let in_Two         = $('#in_Two').val();
          let in_Three       = $('#in_Three').val();
          let in_Four        = $('#in_Four').val();
          let in_AVG         = $('#in_AVG').val();

          
          const dates = [
                    in_One,
                    in_Two,
                    in_Three,
                    in_Four,
               ].map((date) => new Date(00, 0, 0, ...date.split(':')));
         
          // If I use 'dates.length' to split the result it is 00: 02: 35: 300.
          // const average = new Date(dates.reduce((a, b) => +b + a, 0) / dates.length);
          
          // The problem occurs when I need to divide the times by another number, for example by 3 or 2 etc.
          const average = new Date(dates.reduce((a, b) => +b + a, 0) / parseInt(in_AVG));

          const averageString = average.toLocaleTimeString() + ':' + average.getMilliseconds(); 

          console.log(averageString); 
          let in_Media = $('#in_Media').val(averageString);
         

     });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
          <button id="Btn_Calculate_Average">Calculate Average</button>

          <div class="container">
               <label  for="in_AVG">Divide By:</label>
               <input   name="in_AVG" id="in_Média"  type="text" value="3" list="lsit_in_AVG">
               <datalist id="lsit_in_AVG">
                    <option value="1">
                    <option value="2">
                    <option value="3">
                    <option value="4">
                    <option value="5">
                    <option value="6">
                    <option value="7">
               </datalist>
          </div>

          <div class="Dv">
               <label for="in_One">Tempo A</label>
               <input type="text" id="in_One" value="00:01:10:100" >
          </div>
          <div class="Dv">
               <label for="in_Two">Tempo B</label>
               <input type="text" id="in_Two" value="00:02:02:200" >
          </div>
          <div class="Dv">
               <label for="in_Three">Tempo C</label>
               <input type="text" id="in_Three" value="00:03:03:400" >
          </div>
          <div class="Dv">
               <label for="in_Four">Tempo D</label>
               <input type="text" id="in_Four" value="00:04:05:500" >
          </div>
          <span>=</span>
          <div class="Dv">
               <label for="in_Media">Média</label>
               <input type="text" id="in_Media" value="" >
          </div>