Error: Missing "key" prop for element in array react/jsx-key

When deploying on Vercel I get this deployment error.

I use this Table Component:

<Table
      columnsConfig="80px 3fr 2fr 2fr 80px"
      data={dataFeed3}
      header={[
        '',
        <span>Fight</span>,
        <span>Staked</span>,
        <span>Action</span>,
        ''
      ]}
      maxPages={3}
      onPageNumberChanged={function noRefCheck(){}}
      pageSize={5}
    />

Data to the data object goes from this:

const dataFeed3 = stakedFights
    .map((stakedFights, index) => [<span key={index}></span>, <Link href="/fights/[address]" as={`/fights/${stakedFights.contract}`}>{`Fight `+stakedFights.contract.substring(0,6)+`...`+stakedFights.contract.substring(38,42)}</Link>,
    <span>{Math.floor(Web3.utils.fromWei(((stakedFights.Staked).toString()), 'ether'))+` SLICE`}</span>,
    <Button variant='outline-secondary' onClick={()=>onUnstake(stakedFights.Staked, stakedFights.contract)}>Unstake</Button>, ''])

As you can see I use the key prop in the array, so I am stuck here.

Please help.

[spavlovic77]

Thank you @locothedev very much for helping. It works now.

[locothedev]

Just add key to each item inside the array .

See this example for reference

https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-template/blob/main/src/views/Admin/Module/Overview/Overview.tsx#L46-L80