我目前正在学习React js和typescript。我有一个演示应用程序，可以用来输入用户，即姓名和年龄。该应用程序包括一个ErrorModal，应该显示在屏幕上，如果用户试图提交不正确的数据，即用户名或年龄字段为空或年龄不在特定值之间。
下面我只包括了我认为相关的代码，但如果我需要包括其他部分或整个代码，请让我知道。
我使用了一个Typescript接口将错误定义为具有标题和消息。

export interface IError { 
    errorTitle: string; 
    errorMessage: string; 
    onConfirmError?(): void; 

}

如果输入了无效数据，我将使用useState方法设置错误状态。
例如：

const [error, setError] = useState<IError | null | undefined>(); 

const addUserHandler = (event: any) => { 
    event.preventDefault();     
    if(enteredUsername.trim().length === 0 ){ 
        setError({ 
            errorTitle: 'Invalid Username',  
            errorMessage: 'Username must be more than 4 characters', 
}) 
return;

....
在AddUser组件中，如果出现错误，我将在组件return语句中显示错误模态。

... 

{error && <ErrorModal error={error} onConfirmError={errorHandler}/>} 
...

但这给了我错误。
类型"{错误："IError ;}"不能赋给类型"IntrinsicAttributes & IError"。类型"IntrinsicAttributes & IError"上不存在属性"error"。
我可以通过为标题和消息以及onConfirmError方法设置单独的属性，并将这些属性作为属性传递给..来解决这个问题。

{error && <ErrorModal  
    errorTitle={error.errorTitle}  
    errorMessage={error.errorMessage}  
    onConfirmError={errorHandler}/>

但是我想如果我把一个错误定义为一个接口的示例，那么把它作为props传递会更合适，所以我的问题是这个问题有一个简单的解决方案，还是我走错了路？
这是我的ErrorModal的代码。

type Props = IError; 

const ErrorModal: React.FC<Props> = (props) => { 
return ( 
<div> 
    <div className={styles.backdrop} onClick={props.onConfirmError}/> 
        <Card className={styles.modal}> 
            <header className={styles.header}> 
                <h2>{props.errorTitle}</h2> 
            </header> 
            <div className={styles.content}> 
                <p>{props.errorMessage}</p> 
            </div> 
            <footer className={styles.actions}> 
                <Button onClick={props.onConfirmError}>OK</Button> 
            </footer> 
        </Card> 
    </div> 
) 
} 

export default ErrorModal;

先谢了。