title: Next React child component uses old props when rendering which causes an error
body: <p>I have a parent component who has an A component and a B component as children. When i'm on A, i get data by click a button, the parent component is re-rendering after fresh data has been set to parent's state, everything is okay. But when i switch to B, B keeps A's data and crashes as A and B data structures are different. How could i reset parent's state when route changes for B to not use A's data?</p>
  
  <p>I tried to give child components key props but as i'm using React.cloneElement to render them, i didn't figure out how to actually do it correctly.</p>
  
  <pre><code>class App extends React.Component {
    state = {
      data: null
    };
  
    getData = async () =&gt; {
      // asynchronously fetch data from api and set response as new data value
      this.setState({ data });
    }
  
    render() {
      const { children } = this.props;
  
      return (
        &lt;div className="App"&gt;
          Home
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to="/a"&gt;A&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/b"&gt;B&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button onClick={this.getData}&gt;Get data&lt;/button&gt;
          {Children.map(children, child =&gt;
            React.cloneElement(child, { data: this.state.data })
          )}
        &lt;/div&gt;
      );
    }
  }
  
  const BrowserRouter = createBrowserRouter({
    routeConfig: makeRouteConfig(
      &lt;Route path="/" Component={App}&gt;
        &lt;Route path="a" Component={A} /&gt;
        &lt;Route path="b" Component={B} /&gt;
      &lt;/Route&gt;
    ),
  
    renderError: (
      { error }
    ) =&gt; &lt;div&gt;{error.status === 404 ? "Not found" : "Error"}&lt;/div&gt;
  });
  </code></pre>
  
  <p>Expected results would be to get A's data while on A, go to B and get B's data. But actually B's using A data to render and crashes.</p>