React Warning: flattenChildren (...): there are two children with the same key `. $ {Index} `

When trying to match and display items that I am getting from the external api, I get a message that there are children with the same key, even though I know the IDs are different and only the first card is displayed.

This throws an error, it doesn't matter if I use {test.id}

or {index}

as a key:

 {tests.map( test =>
       <Col span="8" xs={{span:22}} md={{span:6}} key="{test.id}">
         <Card title={test.title} bordered={false}>{test.content}</Card>
       </Col> )}

      

        
        
        
      

    

But on the other hand, when I try to display it in a simple one <ul>

:

{tests.map( test =>
  <li className="list-group-item" key={test.id}>
    {test.title}
  </li>
)}

      

        
        
        
      

    

Everything works fine and I am showing all the items I received.

I'm still new to React and Redux, so I'm not sure where to look for a solution.

Many thanks.