Вынос дублированных элементов в общий блок

Рефактаринг
Вставка слоя Office во все роуты

src\routes\Courses\Courses.js

import React from 'react'
import Office from './../../layouts/office/Office';

const Courses= () =>{
 return (
<Office>
 <div>Courses</div>
</Office>
)
}
export default Courses

src\routes\News\News.js

import React from 'react'
import classes from './../../style.module.scss';
import NewItem from './modules/NewItem';
import Office from './../../layouts/office/Office';

const News = () =>{
const {stateData, dispathchData} = React.useContext(ContextData)
console.log(stateData)
const news=stateData.news;

React.useEffect(()=>{
const fetchNews=async ()=>{
try{
const response = await fetch(`${NET.APP_URL}/news`)
if (response.status === 200){
const result = await response.json()
dispatchData({
type:"FETCH_NEWS",
payload:result
})
}
} catch (e){
console.log(e)
}
}
fetchNews()
},[])

return (
<Office>
{news.map((elem,index)=>{
return(
<NewItem data={elem} key={index}/>
)
})}
</Office>
)
}
export default News

src\routes\Shop\Shop.js

import React from 'react'
import Office from './../../layouts/office/Office';

const Shop= () =>{
 return (
<Office>
 <div>Shop</div>
</Office>
)
}
export default Shop