Don't remount wrap components when navigating within Set

[Tobbe]

<Router>
  <Route path="/" page={HomePage} name="home" />
  <Set wrap={SetContextProvider}>
    <Route path="/ctx-1-page" page={Ctx1Page} name="ctx1" />
    <Route path="/ctx-2-page" page={Ctx2Page} name="ctx2" />
    <Set wrap={SetContextProvider}>
      <Route path="/ctx-3-page" page={Ctx3Page} name="ctx3" />
    </Set>
  </Set>
  <Set wrap={SetContextProvider}>
    <Route path="/ctx-4-page" page={Ctx4Page} name="ctx4" />
  </Set>
</Router>

Given the router above here what we want to happen:
User navigates from / to /ctx-1-page: SetContextProvider is mounted
User continue navigating to /ctx-2-page: SetContextProvider is not remounted
User continue navigating to /ctx-3-page: A new SetContextProvider is mounted. The old one stays mounted too.
User navigates back to /ctx-1-page: The new SetContextProvider that was mounted is unmounted. The original SetContextProvider is still mounted (and has not been remounted).
User navigates to /ctx-4-page: The original SetContextProvider is finally unmounted and a new one is mounted instead.

This PR makes the above work as expected by assigning each Set a unique id and then using that id as a key when rendering all the wrapper components. So even though, in the case where the user navigates from /ctx-2-page to /ctx-3-page, the original SetContextProvider is rerendered React knows it's the same component (because the key is the same) so it's never unmounted.

Fixes #9105

[KrisCoulson]

Looks good to me. Only small suggestion