Login form with react-hook-form

A simple Login component with react-hook-form:

src/components/login/Login.tsx:

import React from "react";
import { useForm } from "react-hook-form";

export type LoginData = {
  username: string;
  password: string;
};

type Props = {
  onLogin: (data: LoginData) => void;
};

const Login: React.FC<Props> = ({ onLogin }) => {
  const { register, handleSubmit, errors } = useForm<LoginData>();

  return (
    <div>
      <form onSubmit={handleSubmit(onLogin)}>
        <div>
          <label htmlFor="username">Username</label>
          <input
            ref={register({ required: true, minLength: 4 })}
            type="text"
            name="username"
            placeholder="Username"
          />
          {errors.username && (
            <div>Username must have at least four characters</div>
          )}
        </div>

        <div>
          <label htmlFor="password">Password</label>
          <input
            ref={register({ required: true })}
            type="password"
            name="password"
            placeholder="Password"
          />
          {errors.password && <div>Password is required</div>}
        </div>

        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
};

export default Login;

Usage example:

src/pages/login.tsx:

import React, { useState } from "react";
import Login, { LoginData } from "../components/login/Login";
import ky from "ky";

const LoginPage = () => {
  const [user, setUser] = useState<any>(null);

  async function handleLogin(data: LoginData) {
    const user = await ky.post("https://example.com", { json: data }).json();
    setUser(user);
  }
  return (
    <div>
      <Login onLogin={handleLogin} />
      {user && <pre>{JSON.stringify(user)}</pre>}
    </div>
  );
};

export default LoginPage;