React Hook Form Validation with Error Message

App.js

import React from 'react'
import { useForm } from 'react-hook-form'
import { ErrorMessage } from '@hookform/error-message'

function App() {
  // prettier-ignore
  const { register, handleSubmit, formState: { errors } } = useForm()

  const onSubmit = ({ username, password }) => {
    alert(`Username: ${username}, Password: ${password}`)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <input
          {...register('username', {
            required: 'Username required',
            minLength: {
              value: 8,
              message: 'Minimal 8',
            },
          })}
          type="text"
          placeholder="Username"
        />
        {/* if as component as={<Text />} */}
        <ErrorMessage errors={errors} name="username" as="div" />
      </div>
      <div>
        <input
          {...register('password', {
            required: 'Password required',
            minLength: {
              value: 6,
              message: 'Minimal 6',
            },
          })}
          type="text"
          placeholder="Password"
        />
        {/* if as component as={<Text />} */}
        <ErrorMessage errors={errors} name="password" as="div" />
      </div>
      <button>Login</button>
    </form>
  )
}

export default App