An alternative to this would be to use css to display it with line breaks. This also makes it easier to copy and paste with the original line breaks as well as distinguishing between one break (\n) and two breaks (\n\n).
Just add the style white-space: pre-wrap; to your element.
<div style={{whiteSpace: "pre-wrap"}}>{note.note}</div>
There are additional white-space options if that doesn’t do exactly what you’d like: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space