Keys in React when mapping VS when normal components

Why in following code:

<ul>
  <li>abc</li>
  <li>def</li>   // works fine
</ul>

we do not need key and React will not throw any warnings and everything will work smoothly.

BUT

In following example:

<ul>
  {['abc', 'def'].map((item) => <li key={item}>{item}</li>)}  // throws warning if no key
</ul>

WE DO need key, otherwise React will throw warnings.

What is the difference between mapped li components and normal li components?

Why mapped li requires key? And normal li does not?