我有一个用于用户注册的表单页面，每当我从API中遇到任何错误时，都会在该页面上显示警报，因此我创建了此警报组件

<Snackbar
    open={open}
    autoHideDuration={9000}
    onClose={() => {
      setOpen(false);
    }}
  >
    <Alert
      severity={type}
      onClose={() => {
        setOpen(false);
      }}
    >
      {msg}
    </Alert>
  </Snackbar>

在用户注册表单中，我打开了一个状态，每当用户单击用户创建按钮时，该状态就会变为真

<Button
            variant="contained"
            type="submit"
            id="root"
            sx={{
              width: "25%",
             
            }}
            onClick={()=> setOpen(true)}
          >
            Create
</Button>

我的alert组件也在用户注册表中调用，alert和msg是根据来自数据API响应的帖子设置的

{alert ? <Alert msg={msg} type={type} setOpen={setOpen} open={open} setMsg={setMsg}/> : ""}

但问题是警报弹出窗口总是首先显示先前错误，然后显示实际错误。
我的表单组件中有open、msg和所有状态。