React.jsにてパスワードの表示、非表示の目のマークを配置したい

Question

前提

React.jsにてパスワードの入力フォームを作っています。

実現したいこと

パスワードの入力フォームにパスワードを見えるようにする目のマークを配置したい

発生している問題・エラーメッセージ

現状のコードでは
目のマークをクリックすると
パスワードを表示したり、隠したりできるのですが、
パスワードを入力した状態で目のマークを押すと
入力していたパスワードが消えてしまう

該当のソースコード

const Login = () => {

  // パスワード表示制御用のstate
  const [isRevealPassword, setIsRevealPassword] = useState(false);

  const togglePassword = () => {
    setIsRevealPassword((prevState) => !prevState);
  }

  useEffect(() => {
  },[]);

  return (
.
.
.
                    <input 
                    placeholder='Old Password' className='form-control update_password_form'
                    type={isRevealPassword ? 'text' : 'password'} {...register('password', { required: true })} />

                    <span
                        onClick={togglePassword}
                        role="presentation"
                        className="password_reveal"
                        >
                        {isRevealPassword ? 
                          <FontAwesomeIcon icon={faEye} />
                          : 
                          <FontAwesomeIcon icon={faEyeSlash} />
                        }
                    </span>

Comments

[muteki_gamer]

提示されているコード内には問題がないように見えます。
値が消えることで一番予想されるのはreact-hook-formのmethods.resetをuseEffectで仕込んであるパターンかと思いますが、判断がつきません。
問題になってそうなコードを上げていただければ、解答できるかもしれないです。

[Tomato_leaf]

そうですね。UseEffectは追記のような状態で問題ないさそうなのですが、不思議です。。。

[muteki_gamer]

register宣言してる部分が質問には記載されていなくて、その周りのコード載せることは可能ですか？
記載のコード自体も今はそのままだと動かないので、動くそのままのコード載せていただけると助かります。

[Tomato_leaf]

すいません。解決しました。大変失礼しました。

Answer 1

解決しました。
間違いの原因は
諸事情で
同じinput フォームを３つ作っていたことが原因でした。