AutoCompleteは使わないで、パスワードにマスクをかける方法【React×MUI】

AutoCompleteは使わないで、パスワードにマスクをかける方法を記載します。
セキュリティの観点でオートコンプリートが使えないような実装に適していると思います。
また、本記事ではMUIコンポーネントを使用しています。

import React, { useState, ChangeEvent } from "react";
import { TextField, IconButton, InputAdornment } from "@mui/material";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import VisibilityIcon from "@mui/icons-material/Visibility";

const AuthLogin: React.FC = () => {
  const [password, setPassword] = useState("");
  const [maskedPassword, setMaskedPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

  // パスワード入力時の処理
  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
    const newValue = event.target.value;

    if (showPassword) {
      // パスワード表示時は最後尾の文字のみを更新
      if (newValue.length > password.length) {
        setPassword(password + newValue.charAt(newValue.length - 1));
      } else {
        // バックスペースでの削除を処理
        setPassword(newValue);
      }
    } else {
      // パスワード非表示時は伏字で表示
      if (newValue.length > maskedPassword.length) {
        setPassword(password + newValue.charAt(newValue.length - 1));
        setMaskedPassword(maskedPassword + "•");
      } else {
        setPassword(password.slice(0, -1));
        setMaskedPassword(maskedPassword.slice(0, -1));
      }
    }
  };

  // パスワードの表示・非表示を切り替える
  const togglePasswordVisibility = () => {
    if (!showPassword) {
      setMaskedPassword("•".repeat(password.length));
    }
    setShowPassword(!showPassword);
  };

  // パスワード入力フィールドの描画
  return (
    <div>
      <TextField
        type="text"
        fullWidth
        onChange={handlePasswordChange}
        label="パスワード"
        placeholder="パスワード"
        value={showPassword ? password : maskedPassword}
        autoComplete="off" // ブラウザのオートコンプリート機能を無効化
        InputProps={{
          endAdornment: (
            <InputAdornment position="end">
              <IconButton
                onClick={togglePasswordVisibility}
                edge="end"
              >
                {showPassword ? <VisibilityOffIcon /> : <VisibilityIcon />}
              </IconButton>
            </InputAdornment>
          ),
        }}
      />
    </div>
  );
};

export default AuthLogin;