添加日期占位符：在React

Question

我还看到了其他答复，详细说明了如何在标准HTML / CSS中向日期字段添加占位符。例如this post使用此方法：

<input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

这需要更多的精力来涉及React中的状态，但这是我的尝试：

const myForm = () => {
  const [inputType, setInputType] = useState('text');
  ...
  return (
     <Input
        id="dob"
        name="dob"
        onChange={handleChange}
        type={inputType}
        placeholder="Date of Birth"
        value={state.dob}
        onFocus={() => setInputType('date')}
        onBlur={() => setInputType('text')}
      />
  )
}

占位符正确显示，并且当我选择它时它会更改为日期字段，但是除非我第二次单击该字段，否则它不会给我弹出日期选择器。如何在第一次点击时弹出日期选择器？