Javascript 无法在主页中使用自定义组件-Typescript错误

我正在尝试创建自定义警报组件：

type Severity = "error" | "success" | "info" | "warning" | undefined;

export default function CustomAlert(severity: Severity, text: string){
    return(
    <Alert style={{width:'50%'}} severity={severity}> {text}</Alert>)
}

---

功能组件接收一个参数：

props

。可以使用整个对象或对其进行分解，但不能传递多个对象

函数CustomAlert（{severity:severity，text:string}）

函数CustomAlert（props:{severity:severity，text:string}）

功能组件接收一个参数：

道具

。可以使用整个对象或对其进行分解，但不能传递多个对象

函数CustomAlert（{severity:severity，text:string}）

函数CustomAlert（props:{severity:severity，text:string}）

  function StatusMessage(){
        if (errorMessage.includes(`Couldn't find user`)){
          return (
            <div>
            <CustomAlert severity='error' text='User Not Found'></CustomAlert>
            </div>
              )
  }

Type '{ severity: string; text: string; }' is not assignable to type '(IntrinsicAttributes & "success") | (IntrinsicAttributes & "info") | (IntrinsicAttributes & "warning") | (IntrinsicAttributes & "error")'.
  Type '{ severity: string; text: string; }' is not assignable to type '"error"'.ts(2322)