Please forgive me as I am a complete noob to JavaScript and React. I am trying to output a list of friends. props.friends is an array consisting of the friends' names. However, my code just outputs the <li> tags as text on the page

My code:

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>
    )
}

If anyone can please help me to figure why this is not rendering an actual list, and is just showing <li>friend1</li><li>friend2</li><li>friend3</li> as text, it would be greatly appreciated. Thank you!