useEffect 잘못 쓴걸까요?

선생님이 알려주신대로 li 클릭하면 백그라운드 바꾸는건 해냈는데요 ..

function App() {
  let [gnbBtn, setGnbBtn] = useState('')
  let [clicked, setClicked] = useState(0)

useEffect(() => {
     setClicked(1);
}, [])

return (
<li  onClick={() => {
              navigate("/");
              setClicked(1);
              setGnbBtn('btn_color')
            }}
            className={clicked === 1 ? gnbBtn : ''}     >

<li onClick={() => {
            navigate("/about");
            setClicked(2);
            setGnbBtn('btn_color')
          }}
           className={clicked === 2 ? gnbBtn : ''} >

이렇게 해서 클릭하면 gnbBtn 이라는 클래스를 추가하는건 작동을 하는데요

화면 처음 업로드 되었을때 첫번째 li가 클래스가 추가가 되어있어야 해서 

useEffect 쓰면 될거라 생각하고 업로드했을때 setClicked 값이 1이면 될거 같았는데

안됩니다 ㅠㅠ  이 방법이 아닌건가요??