Autohide Toast message using reactstratp library

Question

I have tried everything and still my toast does not dissappear by itself here is the component

interface Props {
  setGlobalToast?: typeof setGlobalToast;
  toast?: ToastRequest;
}
/**
 * Displays toast notifications to user on any page of the site.
 */
const ToastGlobal: FunctionComponent<Props> = ({ setGlobalToast, toast }) => {
  return (
    <Toast className="GlobalToast" isOpen={!!toast} transition={{key:"1", transitionLeaveTimeout:3000}}>
      <ToastHeader icon={toast && toast!.type} toggle={() => setGlobalToast!(null)}>
        {toast && toast.heading}
      </ToastHeader>
      <ToastBody>{toast && toast.body}</ToastBody>
    </Toast>
  );
};

Answer 1

Try this

<Toast className="GlobalToast" show={!!toast} transition={{key:"1", transitionLeaveTimeout:3000}} onClose={()=>setGlobalToast(!toast)} delay={2000} autohide>
      <ToastHeader icon={toast && toast!.type}>
        {toast && toast.heading}
      </ToastHeader>
      <ToastBody>{toast && toast.body}</ToastBody>
</Toast>