NavLink не формируется стока React

const NewItews=(props)=>{
return (
    <div>
        <NavLink to={"/news/" + props.id}>{props.newsTitle}</NavLink>    
        <p>{props.newsContent}</p>
    </div>
);

} export default NewItews;

let newItems =[
{id:1, newsTitle:'Новость 1', contentNews: 'Контент первой новости'},
{id:2, newsTitle:'Новость 2', contentNews: 'Контент второй новости'},
{id:3, newsTitle:'Новость 3', contentNews: 'Контент третьей новости'},

];

let newsElements = newItems.map(n=>)

const News =()=>{ return( {newsElements} ); } export default News;

const Nav=()=>{
return(
    <div className={n.nav}>
        <ul className={n.nav__items}>
            <li className={n.item}><NavLink to='profile'>Мой Профиль</NavLink></li>
            <li className={n.item}><NavLink to='tasks'>Задание</NavLink></li>
            <li className={n.item}><NavLink to='news'>Новости</NavLink></li>
            <li className={n.item}><NavLink to='post'>Блог</NavLink></li>
            <li className={n.item}><NavLink to='forum'>Форум</NavLink></li>
        </ul> 
    </div>
);

} export default Nav;

Почему то формируется строка при переходе по ссылке "Новости" http://localhost:3000/news/undefined Что я не так делаю?