Sending a message to every point is working, I only have getting messages in real time left to do

Author: songa1

package-lock.json

@@ -61,6 +61,8 @@
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
+    "socket.io": "^4.0.0",
+    "socket.io-client": "^4.0.0",
     "testing-library": "^0.0.2",
     "yup": "^0.32.6"
   },

package.json

@@ -13,10 +13,10 @@ function ListMessages(props){
                     <div key={chat.id}>
                         {chat.receiver != receiver ?
                         <ListItem style={{backgroundColor: '#257AAA', textAlign: 'right', color: '#fff', opacity: 50}}>
-                        {chat.type === 'plain-text' ? <ListItemText primary={chat.message}/> : <img src={chat.image} alt='Received Image' style={{width: 'auto', height: '100px', borderRadius: 10}}/>}{"\n"}
+                        {chat.type==='plain-text'?<ListItemText primary={chat.message}/>: <img src={chat.message} style={{height: '150px'}}/>}
                     </ListItem> :
                         <ListItem>
-                            {chat.type === 'plain-text' ? <ListItemText primary={chat.message}/> : <img src={chat.image} alt='Received Image' style={{width: 'auto', height: '100px', borderRadius: 10}}/>}{"\n"}
+                            {chat.type==='plain-text'?<ListItemText primary={chat.message}/>: <img src={chat.message} style={{height: '150px'}}/>}
                         </ListItem> }
                     </div>
                 )): <p>Welcome, How can we help you?</p>}

src/components/Chat/Visitors/ListMessages.js

@@ -19,21 +19,34 @@ function NewForm(props){
         props.getSupportResponse();
     }, [])
     const handleSubmit = () => {
-        if(message === ''){
-            setFeedbackText('Please type something!')
-        }else{
+        if(message != ''){
             const senderEmail = localStorage.getItem('visitorEmail');
             const messageData = {
                 sender: senderEmail,
                 receiver: 'support-team',
                 message: message,
-                
+                type: 'plain-text'
             }
             props.visitorsMessage(messageData).then(() => {
                 props.getSupportResponse();
             });
             setFeedbackText('Message sent!');
             setMessage('')
+        }else if(image != ''){
+            const senderEmail = localStorage.getItem('visitorEmail');
+            const messageData = {
+                sender: senderEmail,
+                receiver: 'support-team',
+                message: image,
+                type: 'image'
+            }
+            props.visitorsMessage(messageData).then(() => {
+                props.getSupportResponse();
+            });
+            setFeedbackText('Image sent!');
+            setMessage('')
+        }else{
+            setFeedbackText('Please type something!')
         }
     }
     return (