我在密码和文本之间切换输入类型以在登录表单中显示密码时遇到麻烦。功能是当点击密码输入上的眼睛图标时，它应该以纯文本显示密码，但这并没有发生。从技术上讲，我试图将密码输入的类型更改为文本，但没有成功。这是代码：

const [showPassword, setShowPassword] = useState(false)
  const passwordRef = useRef<HTMLInputElement>(null);

  const handleShowPassword = (ref: React.RefObject<HTMLInputElement>) => {
    if (ref.current && ref.current.id === 'password') {
      setShowPassword((prev) => !prev);
      if (showPassword) {
        ref.current!.type = "password";
        console.log('passwordRef.current?.type: ', ref.current?.type); // password
      } else {
        ref.current!.type = "text";
        console.log('passwordRef.current?.type: ', ref.current?.type); // text
      }
    }
  };

return (

<Container>
  <BackgroundBox />
  <FormBox>
  
      {/* Password */}
      <div className='auth-input-container login-password'>
        <FaKey className="auth-icon" size='20px' />
        <input
          type="password"
          id="password"
          name="password"
          placeholder="Enter password"
          className="auth-input"
          onChange={formik.handleChange}
          onBlur={formik.handleBlur}
          value={formik.values.password}
          ref={passwordRef}
        />
        {
          showPassword ? <FaEyeSlash className="auth-icon-password-eye" onClick={() => handleShowPassword(passwordRef)} />
            : <FaEye className="auth-icon-password-eye" onClick={() => handleShowPassword(passwordRef)} />
        }
      </div>
      {formik.touched.password && formik.errors.password ? (
        <div className="error-message">{formik.errors.password}</div>
      ) : null}
// and closing tags

字符串
当我记录类型在密码显示密码它实际上显示文本或密码，因为它应该在年底实际passwordRef类型是永远不会改变为文本，但始终保持文本。
奇怪的是，如果我使用Vanilla JS而不是useRef：

const handleShowPassword = (ref: React.RefObject<HTMLInputElement>) => {
const DOMref = document.getElementById('password') as HTMLInputElement;
if (DOMref.id === 'password') {
  console.log('DOMref: ', DOMref);
  if (DOMref.type === 'password') {
    DOMref.type = 'text'
  } else {
    DOMref.type = 'password'
  }
}

型
};
这样就行了
怎么回事？怎么解决这个问题？