добавить в массив значения из <input >

HTML блок ввода:

<form id="file-form">
        <button type = "button" onclick="checkDir()">добавить</button>
        <input type="file" id="dir_input" webkitdirectory="" directory="" style="display:none" >
        </form>

Мне нужно. чтоб пользователь выбирал папку, и адрес этой папки добавлялся в массив(push). Потом выбрал еще одну папку, и адрес добавился в этот же массив. Я реализовал это так:

let arrDir = []
function checkDir(){  
$(function()
{
    let dir = document.getElementById('dir_input').click();
    $('#dir_input').on('change', function () 
    {
        var filePath = document.getElementById('dir_input').files[0].path ;
        arrDir.push(filePath);
        console.log(arrDir);
        return arrDir;
    });
});
}

Но почему-то с добавлением второй папки получается ерунда (результаты в консоли):

     ["C:\"]
 (2) ["C:\", "C:\Users"]
 (3) ["C:\", "C:\Users", "C:\Users"]

Как добиться результата такого плана? :

     ["C:\"]
 (2) ["C:\", "C:\Users"]