The way React works is by figuring out which DOM elements need to be updated and optimizing those updates. For elements that are dynamically created, there is no easy way to identify which elements maps to which piece of data. The key helps with that. The key allows you to create a mapping between a visual and the data (from an array, web service, etc.) that React can optimize changes for.
For example, let’s say you are displaying 10 items from an array. If Item #5 is the only one that changes, React would want to only update the visual for just that item. Without a key value, it would have no way of knowing how to go from data in the array to specifically Item #5. It would have to unnecessarily update all 10 items. The key avoids that from happening.
Now, in more recent versions of React, the key is automatically set I believe. I will need to dig-in further and see when that does or doesn’t happen. This article goes a bit further into what I explained: https://www.kirupa.com/react/from_data_to_ui_in_react.htm