ngx-quill-upload uploading image but the image disappears from the editor too

Question

I'm using ngx-quill to create a rich-text-editor. Due to the document limits firebase sets I had to find a way to upload my images to the firebase storage and then get back the embedded url. I'm using the ngx-quill-upload package for that. But I noticed that once I click on a picture to use in my editor, it uploads to my storage but vanishes from the editor. If I click on a different picture it uploads that one too but then in my editor the previous uploaded image appears.

This is my ngx-quill-upload code:

imageHandler: {
      upload: (file: File) => {
        return new Promise((resolve, reject) => {
          if (file.size < 5000000) {
            return this.uploadFile(file).toPromise()
              .then(result => {
                resolve(result)
              })
              .catch(error => {
                reject('Upload failed');
                console.error('Error: ', error);
              });
          } else {
            return reject('Size too large');

          }
        })
      },
      accepts: ['png', 'jpg', 'jpeg', 'jfif']
    } as Options

And this is my service file which uploads the image to firebase storage:

downloadURL!: Observable<string>;

  uploadFile(file: File) {
    const filePath = `/images/${Math.random().toString(36).substring(2)}`;
    const fileRef = this.storage.ref(filePath);
    const task = this.storage.upload(filePath, file);

    task.snapshotChanges().pipe(
      finalize(() => this.downloadURL = fileRef.getDownloadURL())
    )
      .subscribe()
    
    return this.downloadURL;
  }