Reactでパスワード入力項目の目マークを押下してもキーボードが非表示にならない方法(備忘録 アプリ開発)

パスワードの項目の目のマークを押下してもキーボードを非表示にしない

[背景]

　子コンポーネントで、パスワード入力項目の目のマーク(目隠し切り替えの目アイコン)を押下
　した時に仮想キーボードが非表示なってしまう状態になっていた為、目のマークを押下して
　パスワードのマスク切り替えしてもキーボードを非表示にせず入力エリアをフォーカスした
　ままにしたい。

[問題]

　通常のref属性をただ使用すると
　'ref' が複数回指定されているため、ここでの使用は上書きされます。ts(2783)
　というエラーが表示され使えない。

解決した実装イメージ

import { useRef, useState } from 'react'
import classNames from 'classnames'
import { useFormContext } from 'react-hook-form'
import classes from '・・省略'
import closeIcon from '・・省略/close_icon.svg'
import openIcon from '・・省略/open_icon.svg'

・・・Type定義省略

/**
 * パスワード入力欄
 */
export const PassInput: React.FC<Props> = () => {
  const { register } = useFormContext()

  const [isMask, setIsMask] = useState(true)

  const inputRef = useRef<HTMLInputElement | null>(null)

  const { ref, ...rest } = register('registerName')

  /**
   * 表示切替処理
   */
  const handleMaskChange = () => {
    setIsMask(!isMask)
    // ↓これで入力エリアをフォーカスする
    inputRef.current?.focus()
  }

　・・・省略

  return (
    <div>
      <div className={classes['クラス名']}>
        <input
          type={isMask ? 'password' : 'text'}
          className={classNames( クラス名 )}
          {...rest}
          onChange={(event) => イベントファンクション(event.target.value)}
          // ↓ここの部分
          ref={(e) => {
            ref(e)
            inputRef.current = e
          }}
        　// ↑ここまでの部分が今回必要な部分
        />
        <span
          className={classes[' クラス名 ']}
          onClick={handleMaskChange}
          role='presentation'
        >
          <img src={isMask ? closeIcon : openIcon} alt='' />
        </span>
      </div>
    </div>
  )
}