Should a key be directly on your component or on the container element within your component?

If I want to return one of my components from a map, can I just do this?

<Component data={data} key={`component-${data.id}`} />

or, are you supposed to do something like this, within the component itself?

const Component = ({data}) => {
  return (
     <div key={`component-${data.id}`}>
     // Rest of component
     </div>
  )
}