Hi i am using material Ui React, I am able to detect what type of card is entered using below code but not able to restrict numbers to 15 or 16 whatever card type is and also if card is visa type i need to show= 4242 4242 4242 4242 like this but i am displaying plain 424242424242, how to display this. mainly i was looking for american express card display in textbox, Any help please My code for detecting the card type is in "value2":

 const onChange = (e) => {
      let value = e.target.value.replace(/\D/g, '')
      let value2;
      console.log(value)
      setInput({ ...input, [e.target.name]: value })
      // setInput({ ...input, [e.target.name]: e.target.value.replace(!/^[0-9]{14,16}$/) })

      const regexPattern = {
        MASTERCARD: /^5[1-5][0-9]{1,}|^2[2-7][0-9]{1,}$/,
        VISA: /^4[0-9]{2,}$/,
        AMERICAN_EXPRESS: /^3[47][0-9]{5,}$/,
        DISCOVER: /^6(?:011|5[0-9]{2})[0-9]{3,}$/,
        DINERS_CLUB: /^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/,
        JCB: /^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/
      };
      for (const card in regexPattern) {
        if (value.replace(/[^\d]/g, "").match(regexPattern[card]))
          value2 = card
      }
      console.log(value2)
    
  };

<TextField
              name="cardnumber"
              label="Card number"
              error={errors.cardnumber}
              value={input.cardnumber}
              onChange={onChange}
              helperText={errors.cardnumber && "Invalid card number"}
              className={classes.cardHolderNumberInputs}
            />