React.js, Each child in a list should have a unique “key” prop. how to fix if key is already given

Im getting the warning Warning: Each child in a list should have a unique "key" prop.. My understanding of react was that when you pass to a new component you give it the Id of a prop, which i am doing, yet im still getting this warning. In my code i have some dummy data that is used to set the state of table data i.e

const DumData = 
    {   id: 1,
        UserGroup:[
    {
        id: "1",
        Name: "Dax Johnson",
        AddressLine: "82 Mahu road",
        Email: '[e-mail]',
        ContactNumber: "02791743",
        Zip: '8801',
        Notes: 'His dog is swag',
        Animals: [
                {   id: "1",
                    PatientID: "23",
                    AnimalName: 'SwagDog',
                    Species: "Canine",
                    Breed: "Dog",
                    Gender: "Male",
                    DOB: "",
                    Vists: [{
                        id:1 ,
                        time: 'October 31st 2021'
                    },
                    {
                        id:2 ,
                        time: 'October 21st 2021'
                    }]
                },
                { id: '2',
                AnimalName: 'CoolCat',
                Species: "Feline",
                Breed: "Cat",
                Gender: "Female",
                DOB: "",
                Vists: [{
                    id:1 ,
                    time: 'March 4th 2021'
                }]
                }
                ],
    },
    {
        id: "12",
        Name: "Willam McDonald",
        AddressLine: "2 Wacky Ave",
        Email: '[e-mail]',
        Zip: '8661',
        ContactNumber: "033777300",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Molder",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'February 4th 2022'
            }]
            }
            ],


      },    
      {
        id: "3",
        Name: "Oscar Issac",
        AddressLine: "2 Wacky Ave",
        Email: '[e-mail]',
        Zip: '7041',
        ContactNumber: "0279000",
        Notes: 'His cat is cool',
        Animals: [
              { 
              id: "1",
              PatientID: "23",
              AnimalName: "Cool cat",
              Species: "Feline",
              Breed: "Cat",
              Gender: "Female",
              DOB: "2008",
              Vists: [{
                id:1 ,
                time: 'June 24th 2021'
            }]
              }
              ],
      }    ]
    
    };

and then later const [tableData, settableData] = useState(DumData);

I create a component table called Hometable where i pass it the tableData and the key id

<div className='Hometable-div'>
                <Hometable
                    data={tableData}
                    key={tableData.id}
                ></Hometable>
            </div>

and then i map the data so it is displayed in the table in the Hometable component. like so

function Hometable(props) {
    var OwnerName;
    var Animalname;
    var breed;

    return (
      <div className='table-container'>
          <table>
              <thead>
                  <tr>
                      <th>Owner</th>
                      <th>Animal Name</th>
                      <th>Type/Breed</th>
                      <th>Vist Time</th>
                  </tr>
              </thead>
              <tbody>
              {props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist) => (
                            <tr>
                                <td>  <i class="bi bi-person-fill"></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

                <tr>
                  <td className='footer'> 
                      
                      </td>
                      <td className='footer'> 
                          
                      </td>
                      <td className='footer'>
                          
                          </td>
                      <td className='footer'>
                          <button className='TableButton'> Page 1</button>
                      </td>
                  </tr>
              </tbody>
          </table>

      </div>
    );
  }
  
  export default Hometable;

I understand i dont use the key value in Hometable so this might be an easy fix if anyone can help me resolve this warning?

Answer

Try passing the key here in the code

{props.data.UserGroup.map((person) => (
                    OwnerName = person.Name,
                    person.Animals.map((Animal) => ( 
                        Animalname = Animal.AnimalName,
                        breed = Animal.Breed,
                        Animal.Vists.map((vist, index) => (
                         // or visit.id if available
                            <tr key={index}>
                                <td>  <i class="bi bi-person-fill"></i> {OwnerName} </td>
                                <td> {Animalname}</td>
                                <td> {breed} </td>
                                <td> {vist.time} </td>
                            </tr>
                        )) 
                    )) 
                ))}

It’s recommended to use keys coming from the data source such as visit.id. Last resort should be using index. For more information you can read here.