Credit card form

import { useForm } from "react-hook-form"
import { useViraMask } from "@virastack/mask"
 
function CreditCardForm() {
  const form = useForm({
    defaultValues: { card: "", expiry: "", cvv: "" },
  })
 
  const { card, expiry, cvv } = useViraMask({
    form,
    schema: {
      card: { preset: "card", errorMessage: "Invalid card number" },
      expiry: { preset: "expiry", errorMessage: "Invalid or past date" },
      cvv: "cvv",
    },
  })
 
  return (
    <>
      <input {...card} placeholder="0000 0000 0000 0000" />
      <input {...expiry} placeholder="12/28" />
      <input {...cvv} placeholder="123" />
    </>
  )
}