Warning: Each child in a list should have a unique "key" prop even tho it has unique key React

React keys need to be on the outer-most returned element from the mapping.

{musics && musics.map((name, i)=>{
  return(
  <Fragment key={i}>
    //it does not render the third array properly
    <li>
      <button onClick={play} value={name}>Play</button>
      {name}
    </li>
  </Fragment>)
})}

Notice here that in order to do this the react fragment shorthand is incompatible, you must use the Fragment component. Or since there is only a single element the Fragment is mostly useless, remove it and place the key on the li where it was.

{musics && musics.map((name, i)=>{
  return(
  <li key={i}>
    <button onClick={play} value={name}>Play</button>
    {name}
  </li>)
})}