Javascript string does not break in new lines

You might want to change your React.Fragment shorthand to div? Then, add inline style:

return (
    <div style={{whiteSpace: 'pre-line'}}>
        {`${t('UserName')}: ${Username}n 
        ${t('FirstName')}: ${FirstName}n
        ${t('LastName')}: ${LastName}`}
    </div>
);

Try giving it a css property "whiteSpace: 'pre-wrap'" few days back I was facing same issue it worked for me

Currently, the newline characters are being treated the same as other white space because of the default white-space value which is normal

From MDN Web Docs:

white-space:normal - Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.

You can use white-space: pre-line if you really must do your layout with n.

white-space:pre-line - Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.

document.getElementById("root").innerHTML="<div>123n456</div>"

div {
   white-space: pre-line;
}

<div id="root"></div>

Try this

  return (
    <>
      {`${t('UserName')}: ${Username}`<br>
        `${t('FirstName')}: ${FirstName}`<br>
        `${t('LastName')}: ${LastName}`}
    </>
  );