Hello I am working on a lightning-input field whose type is a file. In this component I want to allow the users to upload several files and show its name and an option to delete the selected file the user cants to delete but the problem is that it deletes all of the files.

.html

<lightning-input accept={acceptedFormats} 
                    label='Attachments' 
                    required={isIdentificationRequired}
                    onchange={handleAddFiles} 
                    type="file" multiple>
        </lightning-input>
        <template if:true={fileUploaded}>
            <template for:each={fileNamesArr} for:item="fileName">
            <lightning-button-icon key={fileName.Name} class="slds-p-right_x-small" icon-name="action:close" onclick={removeFiles} alternative-text="Remove document" size="x-small"></lightning-button-icon>
                <span key={fileName.Name} class="slds-text-body_medium slds-text-color_success slds-p-right_x-small">
                    {fileName.Name}
                </span>
                <br key={fileName.Name}>
            </template>
        </template>

.js

@track fileUploaded = false; // Render template
@track fileNamesArr = []; // Display file names
filesArr = []; // Store read file objects to pass to Apex
filePromises = []; // Called my Promise.all
@track showSpinner = true;
@track isIdentificationRequired =true;
get acceptedFormats() {
         return ['.pdf', '.png', '.jpg', '.tiff'];
 }
 // Handles front end; build FileReader object in a helper and call apex
 handleAddFiles(event) {
  if (event.target.files.length > 0) {
    // Validate file size
    for(let i = 0; i < event.target.files.length; i++) {
        let file = event.target.files[i]
        if(file.size > 1000000 ) {
            console.log('File too large, size: ' + file.size)
            return;
        }
    }
    this.fileUploaded = true; // Show element
    if (this.isIdentificationRequired) { // Condition for multiple files
        for (let i = 0; i < event.target.files.length; i++) {
            let file = event.target.files[i];
            this.fileNamesArr.push({Name: file.name}); // Iterate html
            this.filesArr.push(file);
        }
    } else { // Single file upload
        let file = event.target.files[0];
        this.fileNamesArray = [];
        this.fileNamesArr.push({Name: file.name});
        this.filesArr.push(file);
    }
}
}

  // Called by Submit button
handleEnviarDocumentosFirmar() { 
for (let i = 0; i < this.filesArr.length; i++) {
    let build = new Promise((resolve, reject) => {
            let freader = new FileReader();
            freader.readAsDataURL(this.filesArr[i]); // reads file contents
            freader.onload = f => {    // executes after successful read
                let base64 = 'base64,';
                let content = freader.result.indexOf(base64) + base64.length;
                let fileContents = freader.result.substring(content);
                resolve({ // returns a value after successful promise
                    Title: this.filesArr[i].name, // Store file name
                    VersionData: fileContents
                })
            };
        })
    this.filePromises.push(build); // filePromises called by Promise.all()
}
return Promise.all(this.filePromises) // Execute all file builds asynchronously
.then(result => {
    this.handleSaveFiles(result) // Pass file objects to Apex
}) 
}
removeFiles(event)
{
    this.showSpinner = false;
     this.files = undefined; 
    this.fileNamesArr = []; 
    this.filesArr = [];
    this.filesUploaded = [];
}

The problem is that in this case I do not know how to manage the removeFiles function. Could anybody help me?