ERROR: Undefined is not a function (near '.addEventListener...')

I have a page in which two ion-items act as a place to drop files. Unfortunately, they cannot be given the addEventListener function. The items were brought into the page.ts using @ViewChild and a console.log() confirms that I am getting an ion-item element. Also - I am using ngAfterViewInit so I am sure that the HTML is loaded before I call the element, that seems to be the usual cause of this error message.

<ion-row>
        <ion-col>
          <ion-item #dropper1 class="drop">
            <ion-label>Add FASTQ File Here</ion-label>
          </ion-item>
        </ion-col>
        <ion-col>
          <ion-item #dropper2 class="drop">
            <ion-label>Add FASTQ File Here</ion-label>
          </ion-item>
        </ion-col>
  </ion-row>

export class NewProjectPage implements AfterViewInit{
  @ViewChild('dropper1') fileDrop1;
  @ViewChild('dropper2') fileDrop2;

ngAfterViewInit() {
    this.fileDrop1.addEventListener('drop', (e) => {
      e.preventDefault();
      e.stopPropagation();
      for (let f of e.dataTransfer.files) {
        console.log('You dragged in: ', f);
      }
      console.log(e.dataTransfer.files);
    });
}