add useEffect

-import React from "react";
+import React, { useEffect } from "react";
 import styled from "styled-components";
 import styled from "styled-components";
 import Header from "../../Components/Header";
 import Header from "../../Components/Header";
 import Input from "../../Components/Input";
 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 { pathname } = location;
   const roomName = pathname.slice(1, pathname.length);
   const roomName = pathname.slice(1, pathname.length);
+  useEffect(() => subscribeToNewMessage(), []);
 
 
   return (
   return (
     <Wrapper>
     <Wrapper>
@@ -172,6 +179,7 @@ export default ({ location, message, onSubmit, messageArray }) => {
             <Title>Selected Menu Title</Title>
             <Title>Selected Menu Title</Title>
           </ChatScreenHeader>
           </ChatScreenHeader>
           <ChatScreenBox>
           <ChatScreenBox>
+            <ul>
               {messageArray &&
               {messageArray &&
                 messageArray.seeAllMessage.map((e) => (
                 messageArray.seeAllMessage.map((e) => (
                   <Message
                   <Message
@@ -181,6 +189,7 @@ export default ({ location, message, onSubmit, messageArray }) => {
                     avatar={e.sender.avatarUrl}
                     avatar={e.sender.avatarUrl}
                   />
                   />
                 ))}
                 ))}
+            </ul>
             <InputContainer className="InputContainer">
             <InputContainer className="InputContainer">
               <form onSubmit={onSubmit}>
               <form onSubmit={onSubmit}>
                 <Input
                 <Input