Hola, estoy usando material Ui React, puedo detectar qué tipo de tarjeta se ingresa usando el código a continuación, pero no puedo restringir los números a 15 o 16, sea cual sea el tipo de tarjeta y también si la tarjeta es tipo visa, necesito mostrar = 4242 4242 4242 4242 así, pero estoy mostrando 424242424242 simple, cómo mostrar esto. Principalmente estaba buscando la visualización de la tarjeta American Express en el cuadro de texto. Cualquier ayuda, por favor. Mi código para detectar el tipo de tarjeta está en " 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} />