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

погрузим часть контента, которая отвечает за навигационную панель Navbar и шапку Header

src\layouts\office\Office.js
один из главных слоёв layouts содержит повторяющую сущность Navbar и Header

{children}

это пропсы или параметр функции, в которые будем передавать весь тот контент, который будет отличаться

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

const Office= ({children}) =>{
 return (
 <div className={classes.main}>
  
 <div className={classes.main_navigation}><Navbar/></div>
 <div className={classes.main_content}>
 <Header/>
 {children}
 </div>

 </div>
)
}
export default Office