Стилизация компонентов в React

Проброс компонента NewItem в место кода New

src\routes\News\News.js

import React from 'react'
import classes from './../../style.module.scss';
import Navbar from './../../modules/Navigation/Navbar';
import Header from './../../modules/Navigation/Header';
import NewItem from './modules/NewItem';

const News = () =>{
const {stateData, dispathchData} = React.useContext(ContextData)
console.log(stateData)
const news=stateData.news;
...
 return (
 <div className={classes.main}>
 <div className={classes.main_navigation}>
<Navbar/>
</div>
 <div className={classes.main_content}>
<Header/>
пройтись по циклу (новостям) и выведем в div
{news.map((elem,index)=>{
return(
проброс в data элемент elem и key index 
<NewItem data={elem} key={index}/>
)
}
export default News

В компоненте NewItem нужны элементы elem принимаем через параметр data

src\routes\News\news.modules.scss
файл отвечает за стили в роуте (пример News)

.new{
display:flex;
отступы
padding-top:20px;
padding-left:20px;
}

src\routes\News\modules\NewItem.js
пробрасываем класс news.module.scss

import React from 'react'
import classes from './../news.module.scss'

const NewItem = ({data})=>{
<div className={classes.news}>
 
<div>
<img src={data.image}/>
</div>

<div>
<div>{data.title}</div>
<div>{data.description)</div>
</div>

</div>
}
export default NewItem