Как автоматически отформатировать мой содержание при наборе текста, используя React Hooks?

Question

Я работаю над виджетом оплаты банковской картой. картинка

const PaymentWidget = () => {


  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => {
    console.log(data);
  };

  return (
    <Fragment>
      <Widget
        onSubmit={handleSubmit(onSubmit)}
        register={register}
        errors={errors}
      />
    </Fragment>
  );
};
export default PaymentWidget;

и входы выглядят так:

 <form className="card-form" onSubmit={onSubmit}>

    <input
                          ref={register({
                            required: true,
                            minLength: 16,
                            maxLength: 16,
                            pattern: /^[0-9]*$/
                          })}
                          maxlength="16"
                          type="text"
                          name="cardnumber"
                          id="cardpay-cardnumber"
                          className="card__input form-control field-card-number cc-number"
                          placeholder="XXXX XXXX XXXX XXXX"
                        />
                        {errors.cardnumber && (
                          <p className="form-errmesage">Невірна картка</p>
                        )}
                        <i className="card__type"></i>
      </form>

Я использую ответную форму для проверки входов. Как реализовать автоматическое форматирование входов (чтобы поставить пробелы между номерами карт и / между датой). Попробовал расщепление. js - но тогда проверки в форме ответа не работают.