Chat.js

const [client, setClient] = useState(null);
const clientRef = useRef(null);
clientRef.current = client;

const [channel, setChannel] = useState(null);
const channelRef = useRef(null);
channelRef.current = channel;

const [message, setMessage]= useState('');
const messageRef = useRef('');
messageRef.current = message;

const [messageData, setMessageData]= useState([]);
const messageDataRef = useRef([]);
messageDataRef.current = messageData;

useEffect(() => {
    initializeClient();
    createChannel();
}, []);

const initializeClient = async () => {
    const {data} = await axios.post("api/generate_token",{name:'client'});
    const client = new StreamChat(process.env.MIX_STREAM_API_KEY, { timeout: 6000 });
    await client.setUser({id: 'client', name: 'Ukeh Hyginus'}, data.token);
    setClient(client);
}

const createChannel =  async () => {
    const {data} =  await axios.post('api/get_channel', {
        from_username: "client",
        to_username: "admin",
        from: "client",
        to: "admin",
    })
    if(clientRef.current && data){
        const channel = clientRef.current.channel('messaging', '', {
            name: 'LiveChat channel',
            members: ["client", "admin"]
        });

        channel.watch().then(state => {
            channel.on('message.new', event => {
                const messages = [...messageDataRef.current, event.message];
                setMessageData(messages);
            });
         })
        setChannel(channel);
    }
}

const getMessageHandler = (e) => {
    setMessage(e.target.value);
}

const sendMessageHandler = async (e) => {
    if(e.charCode === 13){
        if(channelRef.current){
            if(messageRef.current.trim().length > 0){
                const message = await channelRef.current.sendMessage({
                    text:messageRef.current
                });
                setMessage('');
            }
        }
    }
}