I am trying to use useRef to auto focus on the mui textfield in the app. However, the textfield only apper after I clicked a button, so it is not initially mounted when the app is rendered. Therefore, the inputRef.current alway return undefined to me when I am using the useEffect hook, because the inputRef is hooked only after the textfield is appeared.

So instead I hook my inputRef.current?.focus() on the buttonlike this: <Button onClick={() => {toggleCreateWindow(); useInput.current?.focus();}}>

But it won't work either, until I put it like an inline async function like this: <Button onClick={ async () => { await toggleCreateWindow(); useInput.current?.focus();}}>

Now it is working properly, but the vscode always remind me 'await' has no effect on this type of expression

Do anybody know why the async function works? I mean the function should not be asynchronous because it is only a setState & toggle window function: const toggleCreateWindow = () => {setOpenCreate(!openCreate);}; Also, why the vscode is giving me this warning?

Much appreicated