diff --git a/components/lib/messages/Messages.js b/components/lib/messages/Messages.js
index 8fc3bda367..01da40eadc 100644
--- a/components/lib/messages/Messages.js
+++ b/components/lib/messages/Messages.js
@@ -83,15 +83,16 @@ export const Messages = React.memo(
         return (
             <div id={props.id} ref={elementRef} className={props.className} style={props.style} {...otherProps}>
                 <TransitionGroup>
-                    {messagesState.map((message) => {
-                        const messageRef = React.createRef();
-
-                        return (
-                            <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} options={props.transitionOptions}>
-                                <UIMessage ref={messageRef} message={message} onClick={props.onClick} onClose={onClose} />
-                            </CSSTransition>
-                        );
-                    })}
+                    {messagesState &&
+                        messagesState.map((message) => {
+                            const messageRef = React.createRef();
+
+                            return (
+                                <CSSTransition nodeRef={messageRef} key={message.id} classNames="p-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} options={props.transitionOptions}>
+                                    <UIMessage ref={messageRef} message={message} onClick={props.onClick} onClose={onClose} />
+                                </CSSTransition>
+                            );
+                        })}
                 </TransitionGroup>
             </div>
         );
diff --git a/components/lib/toast/Toast.js b/components/lib/toast/Toast.js
index 1127f8bfc2..e461ae753a 100644
--- a/components/lib/toast/Toast.js
+++ b/components/lib/toast/Toast.js
@@ -104,15 +104,16 @@ export const Toast = React.memo(
             return (
                 <div ref={containerRef} id={props.id} className={className} style={props.style} {...otherProps}>
                     <TransitionGroup>
-                        {messagesState.map((messageInfo) => {
-                            const messageRef = React.createRef();
-
-                            return (
-                                <CSSTransition nodeRef={messageRef} key={messageInfo._pId} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} onEntered={onEntered} onExited={onExited} options={props.transitionOptions}>
-                                    <ToastMessage ref={messageRef} messageInfo={messageInfo} onClick={props.onClick} onClose={onClose} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} />
-                                </CSSTransition>
-                            );
-                        })}
+                        {messagesState &&
+                            messagesState.map((messageInfo) => {
+                                const messageRef = React.createRef();
+
+                                return (
+                                    <CSSTransition nodeRef={messageRef} key={messageInfo._pId} classNames="p-toast-message" unmountOnExit timeout={{ enter: 300, exit: 300 }} onEntered={onEntered} onExited={onExited} options={props.transitionOptions}>
+                                        <ToastMessage ref={messageRef} messageInfo={messageInfo} onClick={props.onClick} onClose={onClose} onMouseEnter={props.onMouseEnter} onMouseLeave={props.onMouseLeave} />
+                                    </CSSTransition>
+                                );
+                            })}
                     </TransitionGroup>
                 </div>
             );