Как замаскировать поля ввода onKeyUp с помощью пользовательского интерфейса реагировать?

Question

Я создал форму входа в систему, в которой есть поля DOB и PHONE. Где пользователь должен напечатать это. При вводе он должен маскировать значения в формате DOB (ГГГГ-ММ-ДД) и в формате телефона (999) 999-9999. Я использовал материал пользовательского интерфейса для TextFied и Reaction-hook-формы для проверки формы. Я могу достичь какой-то части, дав регулярное выражение на KeyUp. Но он принимает письмо в поле Number. Здесь я добавил пример в CodeSandbox: https://codesandbox.io/s/react-material-ui-login-tdcoh

А также здесь я пишу код. Пожалуйста, помогите мне с этим.

Заранее спасибо

import React from "react";
import {Paper,withStyles,Grid,TextField,Button,FormControlLabel,Checkbox } from "@material-ui/core";
import { Face, Fingerprint } from "@material-ui/icons";
import { useForm } from "react-hook-form";
const styles = theme => ({
  margin: {
    margin: theme.spacing.unit * 2
  },
  padding: {
    padding: theme.spacing.unit
  }
});
const LoginTab = () => {
  const { handleSubmit, register, errors, reset } = useForm({
    mode: "onChange"
  });
const onSubmit = values => {
    alert(JSON.stringify(values));
  };

  return (

        <form onSubmit={handleSubmit(onSubmit)}>
          <Grid container spacing={8} alignItems="flex-end">
            <Grid item>
              <Face />
            </Grid>
            <Grid item md={true} sm={true} xs={true}>
              <TextField
                id="dob"
                label="DOB"
                name="dob"
                onKeyUp={e => {
                  var v = e.target.value;
                  if (v.match(/^\d{4}$/) !== null) {
                    e.target.value = v + "/";
                  } else if (v.match(/^\d{4}\/\d{2}$/) !== null) {
                    e.target.value = v + "/";
                  }
                }}
                inputRef={register({
                  required: "FIELD_REQUIRED_MESSAGE",
                  pattern: {
                    value: /(\d{2})-(\d{2})-(\d{4})/,
                    message: "Please enter a correct DOB pattern."
                  }
                })}
              />
              {errors.dob && <p>{errors.dob.message}</p>}
            </Grid>
          </Grid>
          <Grid container spacing={8} alignItems="flex-end">
            <Grid item md={true} sm={true} xs={true}>
              <TextField
                id="username"
                label="PHONE"
                name="phone"
                onKeyUp={e => {
                  let x = e.target.value
                    .replace(/\D/g, "")
                    .match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
                  e.target.value = !x[2]
                    ? x[1]
                    : "(" + x[1] + ") " + x[2] + (x[3] ? "-" + x[3] : "");
                }}
                inputRef={register({
                  required: "FIELD_REQUIRED_MESSAGE",
                  pattern: {
                    value: /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
                    message: "PHONE_VALIDATION_PATTERN_MESSAGE"
                  }
                })}
              />
              {errors.phone && <p>{errors.phone.message}</p>}
            </Grid>
          </Grid>
          <Grid container alignItems="center" justify="space-between">
            <Grid item>
              <FormControlLabel
                control={<Checkbox color="primary" />}
                label="Remember me"
              />
            </Grid>
            <Grid item>
              <Button
                disableFocusRipple
                disableRipple
                style={{ textTransform: "none" }}
                variant="text"
                color="primary"
              >
                Forgot password ?
              </Button>
            </Grid>
          </Grid>
          <Grid container justify="center" style={{ marginTop: "10px" }}>
            <Button
              variant="outlined"
              color="primary"
              type="submit"
              style={{ textTransform: "none" }}
            >
              Login
            </Button>
          </Grid>
        </form>

  );
};

export default withStyles(styles)(LoginTab);