Toast component with dismiss logic (part of https://aibolik.github.io/blog/creating-toast-api-with-react-hooks)

Toast.jsx

const Toast = ({ children, id }) => {
  const { removeToast } = useToast();
  
  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(id);
    }, 3000); // delay
    
    return () => {
      clearTimeout(timer);
    };
  }, [id, removeToast]);

  // ...render toast content as before...
}