why we should Only Call Hooks at the Top Level
So this is why hooks must always be called at the top level of a component. It's the only way React can be sure that each hook will be called in exactly the same order each time the component is rendered. The best way to enforce this rule is to install the ESLint plugin