I have 2 phone number fields in my form. Previously I had only 'required' and regex pattern validations but I added a custom validator so I can check if the 2 fields are equal to each other. When I added the custom validator, the regex pattern stopped working. Any thoughts?

 <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>

The second field is similar to this one with the same validations.