fix(Toaster): code breaks when toaster is in a useEffect

related rsuite#2336

src/toaster/test/toasterSpec.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
+import React, { useEffect } from 'react';
+import { screen, render } from '@testing-library/react';
 import toaster from '../toaster';
 
 const element = document.createElement('div');
@@ -83,4 +83,17 @@ describe('toaster', () => {
     clock.tick(400);
     expect(screen.queryByTestId('message')).not.to.exist;
   });
+
+  it('Should not throw errors when push() is called via useEffect', () => {
+    function MyComponent() {
+      useEffect(() => {
+        toaster.push(<div>Hi toaster!</div>);
+      }, []);
+
+      return <div>My component</div>;
+    }
+
+    expect(() => render(<MyComponent />)).not.to.throw();
+    expect(screen.getByText('Hi toaster!')).to.exist;
+  });
 });

src/toaster/toaster.tsx

@@ -9,7 +9,7 @@ export interface Toaster {
    * @param message
    * @param options
    */
-  push(message: React.ReactNode, options?: ToastContainerProps): string;
+  push(message: React.ReactNode, options?: ToastContainerProps): string | undefined;
 
   /**
    * Remove a message by key
@@ -56,15 +56,15 @@ toaster.push = (message: React.ReactNode, options: ToastContainerProps = {}) =>
   if (!container) {
     container = createContainer(options.placement ?? '', options);
   }
-  return container.current!.push(message);
+  return container.current?.push(message);
 };
 
 toaster.remove = (key: string) => {
-  containers.forEach(c => c.current!.remove(key));
+  containers.forEach(c => c.current?.remove(key));
 };
 
 toaster.clear = () => {
-  containers.forEach(c => c.current!.clear());
+  containers.forEach(c => c.current?.clear());
 };
 
 export default toaster;