React Router для рендеринга компонента с сеткой начальной загрузки

Question

У меня есть боковая навигационная панель, на которой должен отображаться один и тот же компонент с различными данными рядом с ним.Поскольку это тот же компонент с другими данными, я должен был использовать render вместо component

const EngineeringInputs = ({ myData }) => {
  let tempVariable = myData.Inputs;
  return (
    <div>
      <hr />
      <div className="row">
        <div className="col-md-1">
          <Router>
            <SideNavBar buildingTypes={tempVariable} />
            <Switch>
              {Object.keys(tempVariable).map((key, index) => (
                <Route
                  path={`/${key}`}
                  render={props => (
                    <RunValues {...props} tempVariable={tempVariable[key]} />
                  )}
                />
              ))}
            </Switch>
          </Router>
        </div>
      </div>
    </div>
  );
};

Этот код отображает компонент RunValues ​​ниже SideNavBar, но я хочу что-то вроде

<>
<div className='col-md-1'>
 <SideNavBar buildingTypes={runValuesData} />
{Router stuff}
</div>  
<div className='col-md-11>
 <RunValues />
</div>
</>

как структурировать мои компоненты для достижения этой цели?