ReactJS Wrappable Component Inside Unordered List, gives error acording to the place where it's wrapped

Question

I'm still learning ReactJS but I found something weird, I'm using the special props children for a Card component, which is going to be wrapped around some elements fetched from Firebase. I was using a tutorial but then I decided to replicate it by myself, while doing that I found that if I wrap Card around the Children component I get a Unique key error, but when I wrap it around the li used inside Children definition, the error is gone, the wirdest thing is that when I inspect the element in both cases, the HTML code is exactly the same, here are the two scenarios:

This gives an error:

//    Inside the Parent component
       <ul className={classes.list}>
        {props.children.map((child) => {
            return (
             <Card>
                <Children
                    key={child.id}
                    ...
                    title={child.title}
                />
             </Card>
            )
        })}
       </ul>

This not gives an error:

// Inside the Children component definition
<Card>
    <li>
       <div>{props.title}</div>
       ... 
       <div>
           <button>Something</button>
       </div>
    </li>
</Card>

In both cases the HTML Structure is like this:

<ul class='Parent__List'>
   <div class='Card'>
      <li class='Children__someClassName'>

What I want to know is, how to know if placing some wrappable component will give an error? Or, why this gives an error only in one of both scenarios? Hope you can answer this and tell where in the docs is this info, so I can read it.