If anyone is still struggling with this in 2025 the regex pattern that works is

"\\(?\\d{3}\\)?-?.?\\s?\\d{3}-?.?\\s?\\d{4}"

for some reason JSX just won't use square brackets properly even when escaping them. It could also be because I have the regex expression in a ternary operator.

pattern={
                name === "phone"
                  ? "\\(?\\d{3}\\)?-?.?\\s?\\d{3}-?.?\\s?\\d{4}"
                  : name === "email"
                  ? "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$"
                  : undefined
              }