@ViewChild берет HTMLElement из другого компонента

У меня есть этот компонент презентации

add-publication.ts

в основном пустой класс

add-publication.html

<div class="file-upload" fxLayout="row">
  <div class="file-upload__portrait">
    <app-take-photo></app-take-photo>
  </div>
  <div class="file-upload__gallery" fxLayout="column">
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
    <app-take-photo></app-take-photo>
  </div>
</div>

И этот компонент

take-photo.ts

export class TakePhotoComponent implements OnInit {
  @ViewChild('img', { read: ElementRef })
  img: ElementRef<HTMLImageElement>;

  constructor(private service: TakePhotoService) {}

  ngOnInit(): void {}

  async onChange(files: FileList) {
    try {
      const result = await this.service.compressAndRemoveExifFromPhoto(files && files[0]);
      this.img.nativeElement.src = result;
    } catch (e) {
      console.error(e);
    }
  }
}

<img #img class="upload__preview" alt="Upload your photo">

<input id="upload" class="upload__input" type="file" accept="image/*" capture="environment"
  (change)="onChange($event.target.files)">
<label class="upload__action" for="upload">
  &nbsp;
</label>

Проблема в этом компоненте. Когда я нажимаю, например, третий компонент изнутри .file-upload__gallery, тогда this.img всегда будет первым (я имею в виду тот, который находится внутри .file-upload__portrait). Не знаю почему.

Я ожидал получить <img> изнутри выбранного компонента, а не из другого.

Это потому, что каждый <img> имеет #img в качестве идентификатора?