Por favor, perdóname porque soy un completo novato en JavaScript y React. Estoy tratando de generar una lista de amigos. props.friends es una matriz que consta de los nombres de los amigos. Sin embargo, mi código solo genera las etiquetas <li> como texto en la página

Mi código:

 const Friends = (props) => { return( <div> <p>Hello, {props.name}.</p> <p>Below is a list of your friends: </p> <ul> {props.friends.map(x => '<li>' + x + '</li>')} </ul> </div> ) }

Si alguien puede ayudarme a entender por qué esto no representa una lista real y solo muestra <li>friend1</li><li>friend2</li><li>friend3</li> como texto, sería ser muy apreciado. ¡Gracias!