incoming msgs/msgs sent by user are not being rendered after changing rooms

Let me start by saying that I only have a month of react-js experience -
My reactjs is connected to to a flask socketio backend app. I have tested it multiple times and the issue does not arrive from here (its the usual join,leave,send functions). The problem is that when joining any room (done by clicking one of the 3 buttons, general, room_1, room_2) for the first time everything renders correctly. The incoming messages as well as the ones you send to the server show up. However, clicking the button to join any other room after already being in one stops any incoming msgs from rendering.
Ex: clicking the "general" button then the "room_2" will display "user left general" and will not render anything else. Going back to "general" makes everything work again (this applies to whichever room you joined first, if it was room_2, going back to it will result in the expected behavior").

Ex2:

• User joined general!
• hello world
  [changes room]
  [chat box clears]
• user left general
  [no other msgs are rendered]

function ChatComponent(props) {
const socket = io('//localhost:5000/', {
transport: ['websocket'],
cors: { origin: '//localhost:5000/' },
extraHeaders: {"Auth" : sessionStorage.getItem('access_token') }
});
const [texttmsg,setTextmsg] = useState([])
const [sender,setSender] = useState([])
const [input, setInput] = useState("")
const [rooms, setRoomc] = useState("")
const [loading, setLoading] = useState(false)
const Message = (e) => {
e.preventDefault();
console.log("msgs: ",texttmsg)
console.log("room :",rooms,"Input:", input)
if(input.trim() !== ''){
socket.emit('send',{room: rooms, message: input, user_id : props.id})
setInput("")
} // end of if
console.log("msgs: ",texttmsg)
console.log("room :",rooms,"Input:", input)
} //end of message
const joinRoom =  (newRoom) => {
//console.log("old room:", rooms,"new room: ", newRoom)
if(rooms !== ""){socket.emit('leave', {room: rooms, user_id : props.id});}
if(rooms !== newRoom){socket.emit('join', {room : newRoom, user_id : props.id });} // if we want to pass more variables we can write it like this and add more
setRoomc(newRoom)
console.log("ROOM CHANGE!")
setTextmsg([]);
setSender([]);
//setLoading(false)
};
//setLoading(true)
useEffect( () =>{
console.log("USE EFFECT!")
socket.off("message");
socket.off("change");
socket.on("message", (data) => {
setTextmsg((prevTextmsg) => [...prevTextmsg, data.msg]);
setSender((prevSender) => [...prevSender, data.sender]);
});
socket.on("change", (data) => {
setTextmsg((pastTextmsg) => [...pastTextmsg, data.msg])
});
return () => {
socket.off("message");
socket.off("change");   
}
},[]) 

The expected behavior is for the rendering to continue working as intended.
modules being used: axios, socket.io-client, flask, flask_socketio, sessions, flask_jwt

edit 2: I would like to note that the msgs being sent can be seen if you were to open up another client and join the room were the initial client starts having issues for the first time.

I figured it out. const socket must be placed outside of the function. However,because I am using session storage every time someone calls any socket.io. This would cause it to send "null" since the token wasn't being created fast enough despite the promise functions. To fix this, I am now taking care of my timed sessions using the database. This allows me to place const socket outside my function without running into any timing issues.