Como obter um único valor do banco de dados através do AngularFirestore e mostrar seus dados via Observable?

Esse seria o template

<div>
    <form [formGroup]="animalForm" fxLayout="row">
      <mat-form-field>
        <input matInput placeholder="Microchip" formControlName="IdChip" #IdChip>
      </mat-form-field>
      <button mat-icon-button (click)="searchAnimal()" color="accent">
        <mat-icon>search</mat-icon>
      </button>
      <mat-form-field>
        <input matInput placeholder="Tutor" formControlName="Tutor">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="DataNasc" formControlName="DataNasc">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Especie" formControlName="Especie">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Nome" formControlName="Nome">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Observações" formControlName="Observacoes">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Raça" formControlName="Raca">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Tamanho" formControlName="Tamanho">
      </mat-form-field>
    </form>
  </div>

Esse é o component.ts

import { Component, OnInit } from '@angular/core';
import { AnimaisService } from '../shared/animais.service';
import { MatSnackBar } from '@angular/material';
import { iAnimais } from '../models/animais.model';
import { Observable } from 'rxjs';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-animais',
  templateUrl: './animais.component.html',
  styleUrls: ['./animais.component.css']
})
export class AnimaisComponent implements OnInit {

  animal$: Observable<iAnimais[]>;

  animalForm = this.fb.group({
    IdChip: ['', [Validators.required]],
    Tutor: ['', [Validators.required]],
    DataNasc: ['', [Validators.required]],
    Especie: ['', [Validators.required]],
    Nome: ['', [Validators.required]],
    Observacoes: ['', [Validators.required]],
    Raca: ['', [Validators.required]],
    Tamanho: ['', [Validators.required]],
    Ocorrencias: ['']
  })


  constructor(
    private fb: FormBuilder,
    private snackBar: MatSnackBar,
    private animaisService: AnimaisService,
  ) { }

  ngOnInit() {

  }

  searchAnimal() {
    this.animal$ =
      this.animaisService.getAnimal(this.animalForm.value.IdChip);
    console.log(this.animal$);
    console.log('Setando formulario')
    this.animalForm.setValue(this.animal$);

  }

E o código que eu utilizo para buscar os dados no Firebase é atráves do serviço é esse:

getAnimal(IdChip: String): Observable<iAnimais[]> {
    return this.afs.collection<iAnimais>('animais',
      ref => ref.limit(1).where('IdChip', '==', IdChip))
      .valueChanges();
}

O que eu consegui identificar é que o getAnimal() está retornando um valor indefinido.

async searchAnimal() {
    this.animal$ = await
      this.animaisService.getAnimal(this.animalForm.value.IdChip);
    console.log(this.animal$);
    console.log('Setando formulario')
    this.animalForm.setValue(this.animal$);

  }