Передайте Props в this.props.children

Я новичок в React, и у меня возникла проблема с передачей пользовательских свойств в this.props.children. Я пробовал React.cloneElement и вижу опору, когда делаю console.info в классе, который я создал, но он теряется, когда я пытаюсь пропустить его. Я не знаю, может быть, React-Router-Dom что-то делает, чтобы пропустить опору. любая помощь будет принята с благодарностью.

Я начал этот проект, используя Create-React-App из GitHub. У меня установлено следующее программное обеспечение.

"react": "^16.3.2",
"react-dom": "^16.3.2",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.4",
"redux": "^3.7.2",

в App.js

render() {
 return (
  <Provider store = {store}>
    <BrowserRouter> 
    <Switch>
      <Route exact path = "/" component = {LoginPage} />
      <Route path = "/Login" component = {LoginPage} />
      <RootPage>
        <Route path = "/TestPage" component = {testPage} />
      </RootPage> 
    </Switch>
   </BrowserRouter>
  </Provider>
 );
}

в RootPage.js (родительский)

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

    var childrenWithProps = React.Children.map(children, child => React.cloneElement(child, { doSomething: "Test String" }));

    console.info(childrenWithProps)
    return (
        <div>
           {childrenWithProps}
        </div>
    );
}

С console.info выше в RootPage.js я вижу опору «doSomething».

в TestPage.js (Ребенок)

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

    console.info(this.props)

    return (
        <div> 
        </div>
    );
}

в приведенном выше console.info в TestPage.js я не вижу пропуска "doSomething", который я передал.

Спасибо за любую помощь.