I am working on a 2 screen chat application which displays a list of connected users on the first screen and when a user is clicked, the user's data is stored in the redux state and it is retrieved in the second screen to load the message of the user on the second screen.

On my local machine, It loads the user's data on the second screen, but when I deployed to heroku, It doesn't load the user's data. i don't know if it happens so fast and should be delayed for some milliseconds

SCREEN ONE

const showChat = (id) => {
    dispatch({
      type: 'SET_CHAT_USER',
      payload: id,
    })
  }


return (

<div style={{ overflowY: 'scroll', height: 500 }}>
    {chats.length > 0
        ? chats.map((chat, i) => (
            <Typography variant='subtitle2' onClick={() => showChat(chat.messengerId)}>
                {chat.firstName} {chat.lastName}
            </Typography>    
            ))
            : 'No Chat'}
</div>
)

SCREEN TWO

import * as io from 'socket.io-client'

const MessageChat = () => {
   const { chatUser } = useSelector((state) => ({ ...state })) // retrieved the id

   const socket = useRef()

    useEffect(() => {
    const loadMessages = () => {
      socket.current.emit('loadMessages', {
        userId: user._id,
        messagesWith: chatUser,
      })

      socket.current.on('messagesLoaded', ({ chat }) => {
        setMessages(chat.messages)
        setBannerData({
          firstName: chat.messagesWith.firstName,
          lastName: chat.messagesWith.lastName,
          profilePicUrl: chat.messagesWith.profilePicUrl,
        })

        openChatId.current = chat.messagesWith._id
        divRef.current && scrollDivToBottom(divRef)
      })

      socket.current.on('noChatFound', async () => {
        const { firstName, lastName, profilePicUrl } = await ChatGetUserInfo(
          chatUser,
          user.token
        )

        setBannerData({ firstName, lastName, profilePicUrl })
        setMessages([])

        openChatId.current = chatUser
      })
    }

    if (socket.current && chatUser) {
      loadMessages()
    }
  }, [chatUser])
}