我正在尝试构建一个表格组件，并使其中一个单元格可编辑。
我需要这个单元格是可点击的，如果点击，一个输入组件将取代按钮，它将自动获得焦点，以便用户可以决定这个单元格的文本。
现在，在第一次呈现中，将呈现按钮，这导致Input的绑定引用失败。
下面是我的简化代码：

import { Input, InputRef, Button } from 'antd'
import { useRef, useState, useEffect } from 'react'
export default function App() {
  const [showInput, setIsShowInput] = useState(false)
  const inputRef = useRef<InputRef>(null)
  useEffect(() => {
    console.log(inputRef.current)
  }, [inputRef, showInput])
  return (
    <div className="App">
      {showInput ? <Input ref={inputRef} onBlur={() => {
        setIsShowInput(false)
      }} /> :
        <Button onClick={() => {
          setIsShowInput(true)
          if (showInput) inputRef.current?.focus()
        }}>Edit me</Button>}
    </div>
  );
}

我怎样才能使ref的绑定在第一次渲染时生效，这样当我点击按钮时，Input就会获得焦点。或者有其他方法可以实现这一点吗？