Hook

Hooks are named like that, because they are hooks from your component to the "insides" of the React machinery.

When you use a hook in a component, you must always use that hook. And you must use the exact same hooks in the exact same order every time you render the component.

If not, React will throw a error:

React Hook "useState" is called conditionally. React Hooks must be called in the exact same
order in every component render. Did you accidentally call a React Hook after an
early return?

So, You need to put all your hooks before any attempt to return anything in the component.