p tag is removing new line character in string

I have a string that contains a new line character. For example:

const myString = `hellonstring`

I am then trying to diaply this string in a functional component, which is wrapped around a p tag. For example:

export default function App() {
  const testString = "hinString";
  return (
    <div className="App">
      <p>{testString}</p>
    </div>
  );
}

For some reason, the p tag simply displays “hello string” on one line when I’d like for it to be displayed across two lines. Is there a way that I can stop the p tag from removing the new-line character from within the string?

The following Code Sandbox contains the executable example: https://codesandbox.io/s/unruffled-allen-ehrsd8?file=/src/App.js