Text with carriage returns without dangerouslySetInnerHTML #react

TextWithCR.js

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';

const TextWithCR = ({ text }) => {
  const lines = text.split('\n');
  
  return (
    <Fragment>
      {lines.map(line => (
        <Fragment key={line}>
          <p>{line}</p>
        </Fragment>
      )}
    </Fragment>
  );
};

TextWithCR.propTypes = {
    text: PropTypes.string.isRequired,
};