How do I delete a single file from input type file multiple?

Question

I am following this documents https://www.webtricks.cf/2022/08/preview-an-image-before-it-is-uploaded.html for multiple image uploader and i am trying to delete one specific image or file from input mulitple file but unfortunatly preview image is deleting on client side but not deleting from input file please help me how can I resolve that thank u ?

html view

  <input type="file" multiple />

javascript

/** Variables */
let files = [],
dragArea = document.querySelector('.drag-area'),
input = document.querySelector('.drag-area input'),
button = document.querySelector('.card button');
select = document.querySelector('.drag-area .select');
container = document.querySelector('.container');


/** CLICK LISTENER */
select.addEventListener('click', () => input.click());;


/* INPUT CHANGE EVENT */
input.addEventListener('change', () => {
    let file = input.files;
        
        // if user select more than 1 image or no image
        if (file.length > 1 || file.length == 0) return;
         
    files.push(file[0]);
    input.files = null;
    showImages();
})



/* SHOW IMAGES */
function showImages() {
   let images = files.reduce(function(prev, file, index) {
       return (prev += `<div class="image">
            <img src="${URL.createObjectURL(file)}" alt="image">
            <span onclick="delImage(${index})">&times;</span>
        </div>`);
        container.innerHTML = images;
   }, "");
}

input.addEventListener('change', () => {
    let file = input.files;
        
        // if user select more than 1 image or no image
        if (file.length > 1 || file.length == 0) return;
         
        files.push(file[0]);
        input.files = null;
        container.innerHTML = `<div class="image">
            <img src="${URL.createObjectURL(file[0])}" alt="image">
            <span onclick="delImage(0)">&times;</span>
        </div>`;
})

/* DELETE IMAGE */
function delImage(index) {
   files.splice(index, 1);
   showImages();
}