Code review: React Context y FormData

Bueno, se que esto es algo que cada uno debería estudiar por su cuenta, pero lo explicaré como lo entendí, mi aporte.

FormData es una Web API que crea una estructura con los valores del formulario (No está disponible solo en React, sino en cualquier archivo js). La ref que se crea del form no es una ref como la que normalmente se aplica a un input; normalmente cuando agregamos una ref a un input, podemos acceder al value haciendo inputRef.current.value; en este caso, la ref del form tiene todos los inputs adentro, pero no se puede acceder a sus valores con un form.current.value; FormData entonces crea una estructura de pares llave-valor que contiene esos valores, pero require que le pasemos una ref del formulario al constructor, por eso usamos la ref del form. También habría podido hacerse de esta forma usando javascript normal:

const form = document.getElementById("form");
const formData = new FormData(form);

Pero como es React, el useRef nos sirve más para el constructor del formData (no podemos usar getElementById porque, al ser React, en el momento en que el navegador lea estas líneas de código, aún no habrá agregado el form al DOM, por eso debemos usar useRef). Ese FormData entonces es una estructura clave-valor tipo Map, la cual trae la función get(<key>) para obtener el “valor” de cualquiera de sus “llaves”. Por eso las líneas 22, 23 y 24 usan formData.get(<key>).

Espero que se entienda y sirva de algo.

Me quedó de la siguiente manera:

Como pueden ver le agregué un botoncito para mostrar u ocultar la contraseña usando Hero Icons.
Primero hacen la importanción y el estado local

import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
...
const [showPassword, setShowPassword] = useState(false);
// Password Visibility
const togglePasswordVisibility = () => {
	setShowPassword(!showPassword);
};

Luego agregan la maquetación del botón a su estilo:

        <p>
          <span className='font-normal'>Password: </span>
          <span className='relative'>
            <input
              type={showPassword ? 'text' : 'password'}
              className='pr-10'
              value={parsedAccount?.password}
              readOnly
            />
            <button
              className='absolute right-0 top-1/2 transform -translate-y-1/2 bg-transparent border-none'
              onClick={togglePasswordVisibility}
            >
              {showPassword ? (
                <EyeSlashIcon
                  className='h-5 w-5 text-gray-400 hover:text-gray-600'
                  aria-hidden='true'
                />
              ) : (
                <EyeIcon
                  className='h-5 w-5 text-gray-400 hover:text-gray-600'
                  aria-hidden='true'
                />
              )}
            </button>
          </span>
        </p>

Asi va quedando

Hola, les recomiendo tomarse un momento para leer la documentación y comprender mejor
https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Está muy buena, vale la pena leerla