add useEffect

-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import Header from "../../Components/Header";
 import Input from "../../Components/Input";
@@ -147,9 +147,16 @@ const StyledLink = styled(Link)`
   }
 `;
 
-export default ({ location, message, onSubmit, messageArray }) => {
+export default ({
+  location,
+  message,
+  onSubmit,
+  messageArray,
+  subscribeToNewMessage,
+}) => {
   const { pathname } = location;
   const roomName = pathname.slice(1, pathname.length);
+  useEffect(() => subscribeToNewMessage(), []);
 
   return (
     <Wrapper>
@@ -172,15 +179,17 @@ export default ({ location, message, onSubmit, messageArray }) => {
             <Title>Selected Menu Title</Title>
           </ChatScreenHeader>
           <ChatScreenBox>
-            {messageArray &&
-              messageArray.seeAllMessage.map((e) => (
-                <Message
-                  text={e.text}
-                  time={e.createdAt}
-                  key={e.id}
-                  avatar={e.sender.avatarUrl}
-                />
-              ))}
+            <ul>
+              {messageArray &&
+                messageArray.seeAllMessage.map((e) => (
+                  <Message
+                    text={e.text}
+                    time={e.createdAt}
+                    key={e.id}
+                    avatar={e.sender.avatarUrl}
+                  />
+                ))}
+            </ul>
             <InputContainer className="InputContainer">
               <form onSubmit={onSubmit}>
                 <Input