focus를 읽을 수 없습니다?

메인 프로젝트 작업을 진행하고 있다.
마이페이지에 닉네임을 수정할 수 있도록 컴포넌트를 제작하는데 조금 더 사용성을 좋게 하고자
아래의 기능을 넣어보았다.

1. 닉네임 옆 편집버튼을 눌렀을 때 input 창으로 변경하기
2. 편집버튼을 눌렀을 때 생성되는 input 창에 자동으로 focus가 되기
3. input 작성 후 엔터 버튼으로 마이페이지의 닉네임 변경하기

function MyPage() {
  const inputEl = useRef();
  const [name, setName] = useState('닉네임');
  const [isEdit, setIsEdit] = useState(false);

  function nameEditBtn() {
    setIsEdit(!isEdit);
    inputEl.current.focus();
  }
  function nameChange(e) {
    setName(e.target.value);
  }
  function enterPress(e) {
    if (e.key === 'Enter') {
      setIsEdit(!isEdit);
    }
  }
  return (
      <ProfileBlock>
        <UserImg background={profile1} />
        <div>
          <UserName>
            {!isEdit ? (
              <p>{name}</p>
            ) : (
              <input
                type="text"
                ref={inputEl}
                value={name}
                onChange={nameChange}
                onKeyPress={enterPress}
              />
            )}
            <TiPencil onClick={nameEditBtn} />
          </UserName>
          <p>생성날짜</p>
        </div>
      </ProfileBlock>
  );
}

export default MyPage;

하나하나 차근차근 작성하는데 focus부분을 구글링해서 진행하던 도중 떡 하니 에러가 나왔다

아예 focus를 읽지 못한다니 이게 뭔소린가 싶어서 에러문구를 긁어 스택오버플로우에 검색해보았다.
알아보니 비동기처리가 되지않아 생긴 문제였다. 해당 useRef로 넣어둔 변수에 값이 들어가기도 전에
focus 메소드가 진행되려고하니 undefined라고 떴던 것!
그래서 비동기 처리 방법인 setTimeout()을 사용해서 해결했다.

  function nameEditBtn() {
    setIsEdit(!isEdit);
    setTimeout(() => {
      inputEl.current.focus();
    }, 10);
  }