Привет, не могу сделать хук useIndex, который для каждого компонента

Question

Привет, не могу сделать хук useIndex, который для каждого компонента

будет возвращать уникальный ему индекс, при чем пока компонент не удалился должен быть один и тот же. Вот код:

let _index = 0;

const useIndex = () => {
const index = useMemo(() => _index++, []);
// const [index] = useState(_index++); - same problem
console.log("INDEX", index);
return index;
};

const useHook = () => {
const index = useIndex();

console.log("Now index is", index);

useEffect(() => {
return () => {
console.log(`Remove ${index}`);
};
}, []);

return { index };
};

export default function App() {
const [isIndex, setIsIndex] = useState(true);
return (
<div className="App">
{isIndex && <NonIndexComponent />}
{!isIndex && <IndexComponent />}
<button onClick={() => setIsIndex(!isIndex)}>
Toggle indexes components
</button>
</div>
);
}

const IndexComponent = () => {
const { index } = useHook();
return <h1>My index is {index}</h1>;
};

const NonIndexComponent = () => {
return <h1>I'm without index</h1>;
};

Вот вывод консоли:

INDEX 0
Now index is 0
INDEX 1
Now index is 1
// вывод ниже после удаления компонента
Remove 1

Почему один компонент получает разные индексы?

Codesandbox - https://codesandbox.io/s/gallant-hooks-1drpy?file=/src/App.js