Tengo 2 campos de número de teléfono en mi formulario. Anteriormente, solo tenía validaciones de patrones 'requeridas' y expresiones regulares, pero agregué un validador personalizado para poder verificar si los 2 campos son iguales entre sí. Cuando agregué el validador personalizado, el patrón de expresiones regulares dejó de funcionar. ¿Alguna idea?

 <Form.Item name="primary_phone_number" className={styles.formItem} label={<span className={styles.label}>PRIMARY PHONE NUMBER*</span>} colon={false} rules={[ { required: true, message: 'The field cannot be empty', }, { pattern: /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/im, message: 'Please, enter a valid phone number', }, { validator: (_, value, callback) => { const secondaryNumber = formRef.current.getFieldValue('secondary_phone_number'); if (value === secondaryNumber) callback('Primary and Secondary phone numbers must be different.'); }, }, ]} > <Input defaultValue={user?.primary_phone_number?.value} placeholder="Primary Phone Number" className={combineCss( styles.input, userFields?.primary_phone_number?.length ? styles.filled : '', )} onChange={(e: any) => onChangeSelectOptions('primary_phone_number', e.target.value)} /> </Form.Item>

El segundo campo es similar a este con las mismas validaciones.