A React Hook Form with validation

Form.tsx

import { useForm } from 'react-hook-form';

export default function Form() {
    const methods = useForm({
        defaultValues: {
            username: '',
            email: '',
            isAdmin: true,
            createdAt: '',
        },
    });

    return (
        <form
            className="flex flex-col mt-10 bg-white px-4 py-5 shadow rounded-lg sm:m-6 sm:p-6 w-full lg:w-3/6 text-gray-600"
            onSubmit={methods.handleSubmit((d) => console.log(d))}
        >
            <div className="flex flex-col mt-4">
                <label htmlFor="username">Username</label>
                <input
                    className="mt-2 border-solid border-gray-300 border py-2 px-4 w-full rounded focus:outline-none focus:ring focus:ring-purple-500"
                    id="username"
                    {...methods.register('username', {
                        required: 'Username is required',
                        validate: {
                            minLength: (v) =>
                                v.length >= 5 ||
                                'The username should have at least 5 characters',
                            matchPattern: (v) =>
                                /^[a-zA-Z0-9_]+$/.test(v) ||
                                'Username must contain only letters, numbers and _',
                        },
                    })}
                />

                {methods.formState?.errors?.username?.message && (
                    <small className="block text-red-600">
                        {methods.formState.errors.username.message}
                    </small>
                )}
            </div>

            <div className="flex flex-col mt-4">
                <label htmlFor="email">Email</label>
                <input
                    className="mt-2 border-solid border-gray-300 border py-2 px-4 w-full rounded focus:outline-none focus:ring focus:ring-purple-500"
                    id="email"
                    {...methods.register('email', {
                        required: 'Email is required',
                        validate: {
                            maxLength: (v) =>
                                v.length <= 50 ||
                                'The email should have at most 50 characters',
                            matchPattern: (v) =>
                                /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(
                                    v
                                ) || 'Email address must be a valid address',
                        },
                    })}
                />

                {methods.formState?.errors?.email?.message && (
                    <small className="block text-red-600">
                        {methods.formState.errors.email.message}
                    </small>
                )}
            </div>

            <div className="mt-4">
                <label htmlFor="isAdmin">IsAdmin</label>
                <input
                    className="ml-2"
                    id="isAdmin"
                    type="checkbox"
                    {...methods.register('isAdmin')}
                />
            </div>

            <div className="flex flex-col mt-4">
                <label htmlFor="createdAt">Creation Date</label>
                <input
                    className="mt-2 border-solid border-gray-300 border py-2 px-4 w-full rounded focus:outline-none focus:ring focus:ring-purple-500"
                    id="createdAt"
                    type="date"
                    {...methods.register('createdAt', {
                        required: 'Date is required',
                    })}
                />

                {methods.formState?.errors?.createdAt?.message && (
                    <small className="block text-red-600">
                        {methods.formState.errors.createdAt.message}
                    </small>
                )}
            </div>

            <button
                className="bg-purple-600 p-3 mt-12 rounded-lg text-white font-medium m-auto w-3/6 hover:opacity-75"
                type="submit"
            >
                Submit
            </button>
        </form>
    );
}