[FEATURE] Animate relative to the `layoutRoot` on shared layout animations with `layoutId`

Is your feature request related to a problem? Please describe.
When a new component is added that has a layoutId prop that matches an existing component, it will automatically animate out from the old component. However, when there is a content shift at the same time, it doesn't take the content shift into account and animates from the wrong position.

See this CodeSandbox for a demonstration (switch from 🍅 to 🥬 to see the tab underline incorrectly move to 🥬 from the right).

Describe the solution you'd like
Adding layout layoutRoot to a parent corrects this for layout animations and could do the same for shared layoutId animations (e.g. in the Sandbox example changing the unordered list element to <motion.ul layout layoutRoot>).

Describe alternatives you've considered
By delaying the shared layout animation until after the content shift has happened, this can be prevented but shouldn't be necessary.

  const selectTab = (item: Ingredient) => {
    setShowSidebar(item.label === "Lettuce"); // perform what causes content shift first
    setTimeout(() => setSelectedTab(item), 0); // delay shared animation
  };

Start with the linked CodeSandbox and reproduce the incorrect underline movement by switching from 🍅 to 🥬. Compare the existing layout layoutRoot behavior with the shared layoutId case, then locate the relevant shared-layout implementation in the repository. Done means the content shift is incorporated without requiring the setTimeout workaround.