1  import React,{useState, useEffect} from 'react';
 2  import * as Toast from '@radix-ui/react-toast';
 3  
 4  const ErrorToast = () => {
 5      const [open, setOpen] = useState(false);
 6  
 7      useEffect(()=> {
 8          if(errorMessage) {
 9              setOpen(true);
10  
11              const timeoutId = setTimeout(()=> {
12                  setOpen(false)
13                  onClose();
14              }, 5000);
15              return ()=> {
16                  clearTimeout(timeoutId);
17              };
18          }
19      },[errorMessage, onClose]);
20  
21      return (
22          <Toast.Root open={open} onOpenChange={()=> setOpen(!open)}>
23              <Toast.Title>Error</Toast.Title>
24                  <Toast.Description>{errorMessage}</Toast.Description>
25                  <Toast.Action>
26                      <button onClick={()=> setOpen(false)}>Dismiss</button>
27                  </Toast.Action>
28          </Toast.Root>
29      );
30  };
31  
32  export default ErrorToast;