How to break lines in received JSON data

I am using a poetry API in my application and when I receive the poem lines in JSON, they are formatted as:

lines: Array(14) 0: "I met a traveller from an antique land" 1: "Who said: Two vast and trunkless legs of stone" 2: "Stand in the desert...Near them, on the sand," 3: "Half sunk, a shattered visage lies, whose frown," 4: "And wrinkled lip, and sneer of cold command," 5: "Tell that its sculptor well those passions read" 6: "Which yet survive, stamped on these lifeless things," 7: "The hand that mocked them, and the heart that fed:" 8: "And on the pedestal these words appear:" 9: "'My name is Ozymandias, king of kings:" 10: "Look on my works, ye Mighty, and despair!'" 11: "Nothing beside remains. Round the decay" 12: "Of that colossal wreck, boundless and bare" 13: "The lone and level sands stretch far away." length: 14

I'm having trouble displaying each item in the JSON array as a new line when I output it onto my page.

Currently I have a component that maps each returned poem into a card with the respective author, title, and lines of the poem

poem.map(item => {
  let author = item.author;
  let title = item.title;
  let lines = item.lines;
  if (author != undefined && title != undefined) {
    return (
      <>
        <div className="viewer">
          
{author}
{title}
{lines}

      
    );
  }
});

What ends up getting displayed on my webpage is each line after the next without any line breaks between them.