【React】React Date Pickerのinput要素をスマホでタップした時に、キーボードが表示されて邪魔な件

直したいイメージ

個人開発でReactDatePickerを使っていたところ、表題の問題に直面しちょっと悩んだのでメモ&共有。
下記のように、input要素（2022/05/06のテキストボックス）をスマホでタップすると、いちいちキーボードが表示されてしまう。
これではちょっと使いづらいので、これを解決したい！

結論

input要素にreadonly属性を追加すると良い

GitHubのissueでいろんな人があれこれ試してたので、こちらも参考に
https://github.com/Hacker0x01/react-datepicker/issues/1480

コード例

下記はあるコンポーネントの一部ですが、styled-compoentsでスタイリングしたSInputをCustomInputという関数でreturnしています。このSInputでreadOnlyを指定します。

const CustomInput = React.forwardRef((props: any, ref) => {
  return <SInput {...props} forwardRef={ref} readOnly />;
});

<Controller
  control={control}
  name="period"
  render={() => (
    <DatePicker
      {...register("period", {
        validate: () => {
          const now = new Date();
          const d = getDateObj(now);
          return startDate >= new Date(`${d.year}/${d.month}/${d.day}`);
        },
      })}
      dateFormat="yyyy/MM/dd"
      locale="ja"
      selected={new Date(select.selected_date)}
      onChange={handleChange}
      customInput={<CustomInput />}
    />
  )}
/>

const SInput = styled.input`
  max-width: 340px;
  width: 100%;
  height: 45px;
  padding: 0;
  border: none;
  border-radius: 6px;
  text-align: center;
  font-size: 1rem;
`;

完成イメージ

input要素をタップしてもキーボードが出てこない！良い感じですね

Developerツールで確認しても、readonly属性がきちんと付与されています。