focus input on page loading

한창 typescript 와 react 로 맛을 보던중... 페이지 로딩할때 input 태그에 바로 focus 를 어떻게 해야하는지 찾아보았다
사실 간단한데 typescript 로 짤려니까 에러가 보기싫더라구...ㅠ

const Search = () => {

    const [input, setInput] = useState("");
    const history = useHistory();
    const inputRef = useRef();

    const search = (e: React.MouseEvent) => {
        e.preventDefault();
        history.push("/search");
    };

    useEffect(() => {
        // error
        inputRef.current.focus();
    }, []);

    return (
        <form className="search">
            <div className="search__input">
                <SearchIcon className="search__inputIcon" />
                // ref 쪽에서 에러
                <input ref={inputRef} value={input} onChange={e => setInput(e.target.value)}/>
                <MicIcon/>
            </div>
        </form>
    )
};

타입을 넣어줘야해서 이런식으로도 해봄

const inputRef = useRef<HTMLInputElement>();

근데 역시 초기값이 없다보니 useEffect에서 에러를 발생하고 있어서 그냥 엘레먼트를 만들어줌 그러니깐 된다 헤헤

const inputRef = useRef<HTMLInputElement>(document.createElement("input"));