Добавление дочерних компонентов в React

Самый простой способ - вызвать {props.children}

function Wrapper(props) {
  return (
      <div className="demo">{props.children}</div>
  )
}
ReactDOM.render(
  <Wrapper>
      <span>This is something</span>
  </Wrapper>
, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root" ></div>

Из ответа @Soringh Chehresa на Что такое {это .props.children} и когда его следует использовать? скажите, что:

this.props.children служит для отображения всего, что вы вставлять между открывающим и закрывающим тегами при вызове компонента

Измените свой компонент оболочки на это:

function Wrapper({ children }) {
  return (
    <>
      <div className="demo">Something</div>
      {children}
    </>
  );
}

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

function Wrapper({children}) {
    return (
        <div className="demo">{children}</div>
    )
}