Как вывести в компонент другие компоненты, переданные как prop?

Header у вас является компонентом, а не элементом (экземпляром). Поэтому получая его из пропсов, вы получаете обычный компонент, который стандартным образом рисуете.

const { Header, Footer } = this.props;

return (
    <Fragment>
        <Header />
        <Footer />
     </Fragment>
);

Но лучше передавать не компонент, а render функцию https://reactjs.org/docs/render-props.html.

Вы передаете в рендер функцию компонента вместо того чтобы его отрисовывать.
Проблему исправит:

const { header: Header, footer: Footer } = this.props;

return (
  <Fragment>
    <Header />
    <Footer />
  </Fragment>
);

Но советую вам спроектировать этот участок иначе. Со стороны не видно никакого смысла в передаче Header и Footer в виде свойств. Их лучше импортировать в файле компонента Layout.