Рендеринг props.children с родительским контейнером для каждого дочернего элемента

Я пытаюсь создать боковое меню, которое принимает детей и отображает их. Боковое меню отображает дочерние элементы, но каждый дочерний элемент оборачивает все выходные данные рендеринга бокового меню. Я не могу найти способ остановить это.

Я пробовал без использования материального пользовательского интерфейса со стилями, но происходит то же самое.

Вот как он выводится с использованием базового рендеринга, используя return <div>{this.props.children}</div> или приведенный ниже код.

Выход инспектора

Код:

Главная страница

<SideMenu>
    <Tab id="Search" header="Search" icon={<SearchIcon />}>
        <p>Some text</p>
        <Foo />
    </Tab>
    <Tab  id="home" header="Home" icon={<SearchIcon />}>
        <h1>Some text again</h1>
        <Foo />
        <Bar />
    </Tab>
</SideMenu>

Боковое меню

import React from "react";
import PropTypes from "prop-types";

import {
  withStyles
} from "@material-ui/core";

import styles from "./styles";

class SideMenu extends React.Component {
  static propTypes = {
    classes: PropTypes.object.isRequired,
    children: PropTypes.any,
    // events
  };

  state = {

  }

  renderChildren(children) {
    return React.Children.map(children, p =>
      React.cloneElement(p, {})
    )
  }

  render() {
    const { children, classes } = this.props;

    return (
      <div className={classes.sideMenuRoot}>
        <div className={classes.sideMenuTabPane}>
        </div>

        <div className={classes.sideMenuContent}>
          {this.renderChildren(children)}
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(SideMenu);

Вкладка

import React from "react";
import PropTypes from "prop-types";

class Tab extends React.Component {
  static propTypes = {};

  state = {};

  render() {
    return null
  }
}

export default Tab;