How to work with additional adding of files via input (multiple)?

Question

JavaScript

There is a form in which the First Name, Last Name and several photos (multiple) are entered.
For example, I add 2 photos through input, then I want to add 1 more. But when adding the last one, I lose the previous 2.

How to make a handler to solve this issue?
Add. nuance: If the file does not match the size or type, then it is displayed below the input button, but is crossed out. At the same time, it can be removed (I will do this myself later).

<form action="" method="post" enctype="multipart/form-data" name="anketa">
    <input type="file" name="images[]" multiple id="imageUploader">
    <input type="text" name="name" placeholder="Имя" id="name">
    <input type="text" name="lastname" placeholder="Фамилия" id="lastname">
    <input type="submit">
</form>
<script>
    const imageUploader = document.getElementById("imageUploader");
    let imageArrAll = []; // Все загруженные файлы, в том не подходящие по типу или размеру
    let imageArrFilter = []; // Отфильтрованные файлы

    imageUploader.addEventListener('change', (e) => {
        сonst files = e.target.files;
        // Здесь нужно:
        // 1. Объединить добавленные файлы с уже имеющими в массиве (без дублей), и записать в массив imageArrAll
        // 2. Проверить все файлы на соответствие типу и размеру, и записать их в массив imageArrFilter
        // 3. Изменить массив в форме в форме images[] на файлы из п.2. 
    });
</script>