Angular file input changes only shows in the first component

Question

I have an image component formed from two input types : 1- text input 2- file input

image.html

<div>
 <mat-card>
    <mat-card-content>
        <label for="cam">Take picture</label>
        <input id="cam" style="display: none;" type="file" accept="image/*" capture="camera" (change)="onSelectFile($event)" /> <br>OR<br>
        <label for="gallery">Open gallery</label>
        <input id="gallery" style="display: none;" type="file" accept="image/*" multiple (change)="onSelectFile($event)" />
    </mat-card-content>

    <img *ngFor="let image of imagesList" [src]="imagesMap.get(image)" mat-card-avatar (click)="deleteImage(image)"> <br/>
    <br>

    <mat-card-header *ngIf="imagesList.length > 0">
        <mat-card-subtitle>Click on image to remove it</mat-card-subtitle>
    </mat-card-header>
</mat-card>

<input type="text"   placeholder="Ex. [email protected]">

image.ts

  import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {
  files!: File[];

  imagesMap: Map<string, string> = new Map<string, string>();
  imagesList: string[] = new Array<string>();
  url = "";
  constructor() { }

  ngOnInit(): void {
  }

  onSelectFile(event: any) {
    this.files = event.target.files;
    if (this.files && this.files.length > 0) {

      for (let file of this.files) {
        if (!this.imagesMap.has(file.name)) {

          let url: string = "";
          var reader = new FileReader();
          reader.readAsDataURL(file);

          reader.onload = (event) => {
            //@ts-ignore
            url = event.target.result;
            this.imagesMap.set(file.name, url);
            this.imagesList.push(file.name);
          }
        }
      }
    }
  }

  deleteImage(imageName: string) {
    let indexToRemove = this.imagesList.indexOf(imageName);
    if (indexToRemove != -1) {
      this.imagesList.splice(indexToRemove, 1);
      this.imagesMap.delete(imageName);
      indexToRemove = this.files.findIndex(file => file.name == imageName);
      if (indexToRemove != -1)
        this.files.splice(indexToRemove, 1);
    }
  }
}

The problem is that when I call this component several times or duplicate it from app components ,

app.component.html

<app-image></app-image>
<app-image></app-image>

the image that had been selected from the second or third … component , it always shows in the first one instead, this problem is with inputs of type File , inputs with type text are working fine . Kindly refer to the image below for a clearer view.

Component screenshot

I want to when I add pictures in the second component (same component but duplicated) , they must shows in the second component . Each duplicated component must be independent from others.

Please can help me to solve this issue. Thanks