Как работает useState в реакте

Есть много примеров упрощенной реализации useState, чтобы объянить как он работает. Суть в следеующем, хранить масссив вызовов useState и при вызове изменения значения, сбрасывать счетчик вызова и доставать оттуда стейт во время рендера, увеличивая счетчик. Но такая реализация легко ломается, если у нас испольуется условный рендеринг. Т.е мы последовательно вызывали useState для 2 компонентов, но если появилось, например, еще 2 новых компонента между первыми двумя, то на выходе получаем, что стейт переместится от 4 компонента ко второму. Но если использывать useState из react, то он как-то понимает, где какой компонент находится, и обрабатывает правильно.

Схематично отобразил ниже. Т.е порядок компонентов при условном рендере меняется, и поэтому в new1 (справа) попадет стейт от component2 (слева), а должен попадать из component2 туда же (красная стрелка).

Вопрос, можно ли как-то доработать упрощеную реализацию, чтобы она работала правильно?

Вот упрощенная реализация: https://codesandbox.io/s/wizardly-rgb-rqixxt?file=/src/index.js Вот реализация из react: https://codesandbox.io/s/dazzling-breeze-c5nz9e?file=/src/index.js