im trying to display data from angular object but it return me this message ''error TS2339: Property 'name' does not exist on type 'Pet[]' ''

Question

I'm trying to display one reccord of my mockapi data can display data in a console.lo but when i try to display it on my .html file i'm getting this message "error TS2339: Property 'name' does not exist on type 'Pet[]'"

there is my .ts code

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Pet } from '../../Interfaces/Pet';
import { PetitionnairesService } from '../../Services/petitionnaires.service';

@Component({
  selector: 'app-details-pet',
  templateUrl: './details-pet.component.html',
  styleUrls: ['./details-pet.component.css']
})
export class DetailsPetComponent implements OnInit {
  public dataOfOnePet: Array<Pet> = [];
  dataOne: Array<Pet> = [];
  name!: string;

  constructor(
    private readonly PetService: PetitionnairesService,
    private readonly dialog: MatDialog,
    public dialogRef: MatDialogRef<DetailsPetComponent>,
    @Inject(MAT_DIALOG_DATA) public data:Pet
    ) { }

  ngOnInit(): void {
    this.getOnePet(this.data)
  }

  getOnePet(data: Pet) {
    this.PetService.getOnePet(data.id_Pet).subscribe({
      next: (dataOne:Array<Pet>) => {
        this.dataOfOnePet = dataOne
        for (let index = 0; index < this.dataOfOnePet.length; index++) {
          const element = this.dataOfOnePet[index];
          console.log('name', element)
        }
        console.log('données de one', this.dataOfOnePet)
      }
    })
  }

  closeModal() {
    console.log('tu as fermé')
    this.dialogRef.close()
    
  }

}

and the .html code

<div class="level-right has-text-danger">
    <i class="fa fa-times-circle fa-3x" (click)="closeModal()"></i>
</div>
<h1>Modifier le Pétitionnaire</h1>
test de texte {{ dataOfOnePet.name }}
<div class="field">
    <label class="label">Name</label>
    <p class="control">
        <input class="input" type="text" placeholder="Text input">
    </p>
</div>

<div class="field">
    <label class="label">Username</label>
    <p class="control has-icon has-icon-right">
        <input class="input is-success" type="text" placeholder="Text input" value="bulma">
        <span class="icon is-small">
      <i class="fa fa-check"></i>
    </span>
    </p>
    <p class="help is-success">This username is available</p>
</div>

<div class="field">
    <label class="label">Email</label>
    <p class="control has-icon has-icon-right">
        <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
        <span class="icon is-small">
      <i class="fa fa-warning"></i>
    </span>
    </p>
    <p class="help is-danger">This email is invalid</p>
</div>


<div class="field is-grouped">
    <p class="control">
        <button class="button is-primary">Submit</button>
    </p>
    <p class="control">
        <button class="button is-link">Cancel</button>
    </p>
</div>

result of console.log('data Of One', dataOne)

Result of Console.log

Please help me to resolve this bug i'm on it since 2 days

thank to
Misha Mashina for tip i resolve it. I replace

`public dataOfOnePet: Array<Pet> = [];`

by

public dataOfOnePet: any