const { actionStatus, setActionStatusNotVisible } = props; const ToastRoot = styled("Toast.Root")` display: flex; flex-direction: row; justify-content: end; align-items: center; color: #fff; background-color: #1e1f28; border-radius: 0.5rem; padding: 1rem; `; const Text = styled.p` padding: 0; margin: 0; `; const [open, setOpen] = useState(true); const onOpenChange = () => { setActionStatusNotVisible(actionStatus); setOpen(false); }; return ( <Toast.Provider swipeDirection="right" duration={3000}> <ToastRoot open={open} onOpenChange={onOpenChange}> <Toast.Description asChild> <Text>{actionStatus.status}</Text> </Toast.Description> </ToastRoot> <Toast.Viewport /> </Toast.Provider> );