reactjs - 我可以将 Material-UI 中的 Typography 添加到 Formik 和 Yup 的 .matches 中吗

Question

我有以下代码：

validationSchema: Yup.object({
 email: Yup.string()
    .min(8, <Typography color = "error">Must be at least 8 characters</Typography>)
    .max(20, <Typography color = "error">Must be less than 20 characters</Typography>)
    .required(<Typography color = "error">Email is required</Typography>)
    .email(<Typography color = "error">Must have email format.</Typography>),
  firstname: Yup.string()
    .min(3, <Typography color = "error">Must be at least 3 characters</Typography>)
    .max(20, <Typography color = "error">Must be less than 20 characters</Typography>)
    .required(<Typography color = "error">Email is required</Typography>)
    .matches(/^[a-zA-Z0-9]+$/, <Typography color = "error">Cannot contain special characters or spaces</Typography>),
}),

“.min”、“.max”和“.required”有效，但“.matches”中的错误消息未显示。甚至可以在“.matches”中使用排版吗？