You can iterate over the mapping method and split it whenever it encounters any "/n". Alternatively, you can create an ordered list for this purpose. For example, find the code below.

import React from 'react';
    
const items = "\n1. apple\n2. mango";

const ListComponent = () => {
    const itemList = items.split('\n').map((item, index) => {
        const trimmedItem = item.replace(/^\d+\.\s/, '');
        if (item.trim()) {
          return 
{ trimmedItem}
;
        }
        return null;
    });

    return (
        

            
Here is the list:
            
These are the items:
            
{itemList}
        
    );
};

export default ListComponent;
    

You should split the string with newlines and then map it to multiple paragraph tags

const items = "These are the items:\n1. apple\n2. mango";

// or if you want it t be reactive:
const [items, setItems] = useState("These are the items:\n1. apple\n2. mango");

Then in html:

    

      {items.split('\n').map((el) => (
         
{el}
       ))}
    

Now the list displays correctly, if the items are centered and you want them to be left aligned, just enter text-align: left; in the list css class