Each child in a list should have a unique "key" prop, React

Question

I have such jsx:

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map(person =>
      <Grid.Column key={person.id}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

The error says to Check the render method of RowComponent. I tried putting key on Grid.Row, RowComponent and ImageComponent (and Image that is within it). Nothing of that is working, so I am confused as to where should I put key. According to the thread:

Warning: Each child in a list should have a unique "key" prop

It should be outermost element, but I put it on the outermost Grid.Row, RowComponent itself and it still shows.. I verified that person.id is unique id.

Update

There are two errors of the same type. The first one is:

I eliminated it by generating key differently for the Grid.Column:

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person, idx) =>
      <Grid.Column key={`column-${idx}-img-${person.id}`}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

I don't understand why this is needed though since each person.id is unique. Another error still persists:

Answer 1

import React from 'react'
import { Grid, Image } from 'semantic-ui-react'

const RowComponent = ({ rowList, personToFind }) => 
  <Grid.Row columns={3} centered>
    {rowList.map((person,index) =>
      <Grid.Column key={person.id+""+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   
  </Grid.Row>

const GamePage = React.memo(({ peopleList }) => {
  const randomPeopleList = getNRandomItems(peopleList, 6)
  
  const topRow = randomPeopleList.slice(0, 3)
  const bottomRow = randomPeopleList.slice(3)
  const personToFind = getRandomItem(randomPeopleList)
  
  return (
    <Grid>
      <RowComponent rowList={topRow} personToFind={personToFind} />
      <RowComponent rowList={bottomRow} personToFind={personToFind} />
    </Grid>
  ) 
})

{rowList.map((person,index) =>
      <Grid.Column key={person.id+" "+index}>
        <ImageComponent person={person} personToFind={personToFind} />
      </Grid.Column>)
    }   

The reason behind using key={person.id+" "+index} is , key should be as much unique as it can be . what if you have same person.id with two or more child ? To handle such test cases , we are doing that key = {person.id+" "+index}