How does preserving component state really work?

Hi everyone!

So I was reading through the new React Docs beta and stumbled upon how state in a component can be preserved as long as the UI tree is resembles the previous render. Check this example from the docs:
https://codesandbox.io/s/g1hk4?file=/App.js&from-sandpack=true
“It’s the same component at the same position, so from Reacts perspective, it’s the same counter.”. This seems reasonable enough.

But then I read about nesting components and got confused. The following example actually resets the input state even though the same component is rendered at the same position.
https://codesandbox.io/s/eljps?file=/App.js&from-sandpack=true

So why doesn’t react handle nested components like I would expect?

Link to article