решение проблемы было в том, что нужно использовать в родительском элементе, этот тег указывает react, где отображать вложенные элементы, импортируется он из
import {Link, Outlet} from "react-router-dom";
НО у меня почему то react не видит эту функцию, но она работает, так что если будите использовать, не обращайте внимания что реакт не видит его в инпорте, по крайней мере у меня так
В кратце нужно этот Outlet прописать в header
<Routes>
<Route path='/settings' element={<Header />}>
<Route index path='create' element={<CreateFieldProvider/>}/>
<Route path='lists' element={<FieldsList/>}/>
</Route>
<Route path={'/work'} element={<Work/>}/>
</Routes>
А вот сам header
<>
<header>
<div className="content">
<div className={classes.header_wrapper}>
<div className={classes.wrapper_logo}>
<img src="/image/logo.png" alt=""/>
</div>
<div className={classes.wrapper_list}>
<Link to='/settings'>Главная</Link>
<Link to='/settings/create'>Создать </Link>
<Link to='/settings/lists'>Список </Link>
</div>
</div>
</div>
</header>
{(loading_list || loading_create) && <Preloader />}
<Outlet />
</>