let variable reassigned but stay undefined (socket.io, node.js, react) - node.js

Question

I am implementing a real time chat app using react and node but struggling with sending messages to the server. Below is my Chat component where socket connection with the server starts.
The problem is when I hit the send button, sendMsg runs and gives me an error TypeError: Cannot read property 'emit' of undefined. socket is assigned the return values of socketIOClient(ENDPOINT)inside useEffect but seems to stay undefined at the time of hitting the send button. I guess
Can someone please help me fix this?
import React, { useState, useEffect } from 'react';
import socketIOClient from "socket.io-client";
import Button from '#material-ui/core/Button';
import Box from '#material-ui/core/Box';
import Loading from './Loading';
import TextField from '#material-ui/core/TextField';
import { Container, Typography } from '#material-ui/core';
import { Fragment } from 'react';
import queryString from 'query-string';
import { Redirect } from 'react-router-dom';
const ENDPOINT = "http://localhost:4001";
const Chat = ({location}) =>{
const [msgList, setMsgList] = useState([]);
const [name, setName] = useState(null);
let socket;
useEffect(()=>{
const {name} = queryString.parse(location.search);
setName(name)
socket = socketIOClient(ENDPOINT);
socket.emit("setName", name)
if(socket){
socket.on("greeting", (data)=>{
setMsgList(msgList => [...msgList, {type: "server", msg:data}]);
console.log(msgList)
})
}
return()=>{
if(socket){
socket.disconnect();
}
}
},[location.search, name])
const sendMsg = (event)=>{
event.preventDefault();
console.log(socket)
socket.emit("message", {msg: event.target.message.value})
}
return (
<Fragment>
<Container >
<Box maxWidth="600px" height="100vh" marginX="auto" marginY="0" textAlign="center" position="relative">
<Box paddingY="15px">
<Typography variant="h4">Let's Chat!</ Typography>
</Box>
<Box>
{msgList.map((msgObj, index)=>{
return <p key={index + 1}>{msgObj.type}: {msgObj.msg}</p>
})}
</Box>
<Box position="absolute" bottom="0" left="0"width="100%" zIndex="10">
<form autoComplete="off" onSubmit={sendMsg}>
<TextField name="message" label="say something" variant="outlined" fullWidth />
<Button type="submit" color="secondary" fullWidth variant="contained">Send</Button>
</form>
</Box>
</Box>
</Container>
</Fragment>
);
}
export default Chat;