선생님 useEffect로 ajax응용문제2번 버튼지우기 질문있습니다

(App 컴포넌트의 상단 return() 외부)

(App 컴포넌트의 return()내부)

유저가 상품더보기 버튼을 누르면 axios로 데이터를 받아와 products를 보여주는 기능 구현중입니다.
1. 유저가 버튼 누를때마다 json을 순차적으로 받아옴
2. 더이상 받아올 json이 없다면 .catch()문을 통해 로딩화면이 사라짐, alert()띄워줌, btnInvisible의 state를 바꿔줌

근데 여기서 문제는 useEffect(()=>{},[btnInvisible]) 을 활용해서 btnInvisible state가 변경될때 useEffect가 실행되어야 하는데
메인페이지가 랜더링 되자마자 useEffect가 실행되어 버튼이 그냥 사라집니다.

위 사진처럼 되어야하는데 아래 사진처럼 사라집니다.

setTimeout은 적용되고 있습니다.
왜 useEffect가 btnInvisible state가 변경되지 않았는데 작동하는지 궁금합니다.
제 생각엔 .catch() 문 안의 setBtnInvisible로 state가 변경되어야만 useEffect가 실행되어야 할텐데.. 잘 모르겠습니다

+ 추가로 .catch()문 안에서 setBtnInvisible을 없애서 state가 변경되지 않도록 했지만 useEffect가 작동합니다.