useEffect 최초 실행 막기

안녕하세요.
Lifecycle과 useEffect2 수업을 듣다가 궁금한 점이 있어 질문 드립니다.
강의 숙제에서 input에 입력한 값이 숫자가 아니면 alert창에 ('숫자를 입력하세요')를 띄우는 부분에서
컴포넌트가 최초로 랜더링 될 때 useEffect 내부의 alert의 실행을 막고 싶습니다.
구글링 해본 결과 useRef를 이용하는 방법과 useState를 이용하는 방법 두 가지를 찾았습니다.
그런데 useState를 이용한 방법으로는 최초 실행 막기에 성공했는데,
useRef를 이용한 방법에서는 최초 실행 막기에 실패했습니다.
useRef를 이용한 방법에서 어느 부분이 잘못되었는지 알고싶습니다.

감사합니다. 

// useState를 이용한 코드

// useRef를 이용한 코드