Reactjs show selected option by object

I got an object called data and already show values as option in select now I want to show selected option via selected object, but no success:

let data = [
  {id: 1, name: 'xxx'},
  {id: 2, name: 'yyy'},
  {id: 3, name: 'zzz'},
  {id: 4, name: 'sss'},
  {id: 5, name: 'vvv'},
];

let selected = [
  {id: 1, name: 'xxx'},
  {id: 3, name: 'zzz'},
  {id: 5, name: 'vvv'},
]


<select multiple={true}>
data.map(function(Creator, index){
  return (
    <option key={Index}>{Creator.name}</option>
  )
});
</select>

I did:

{data.map(function(Cr, In){
    {selected.map(function (Creator, Index) {
        return (
            <option selected={Creator.name === Cr.name ? true : false} key={In}>{Cr.name}</option>
        )
    })}
})}

But return no option and I guess this is not best practice, how can I fix this and what is best practice?

Answer

Do not iterate selected object, just read them by Index like this selected[index]

data.map(function(Creator, index){
  return (
    <option selected={Creator.id === selected[index].id ? true : false}>{Creator.name}</option>
  )
});