HTML “code” displayed merely instead of showing the content as usual

I was creating my first react project, notes app. when the “Enter” key is pressed it worked as expected while editing when i refresh, the the “Enter” space is gone and the words sits together like
from this:
to this:

So i planned to store the note div’s innerHTML instead of textContent. So just i could preserve the format the user want. but it doesnt worked as i expected. the note section displays whole instead of the textContext without by processing the HTML code i passed as string.

the problem

but i’ve figured out the problem though. when i save the note (innerHTML)
it somehow converts “<” & “>” angle brackets ig into HTML entities like this




so thats y this is happening. all i wanna know now is to prevent this

actual problem

problem in browser

please help me solve this…