Pusher triggering only after the page reloads

I am using Pusher for triggering an alert when data is inserted in my database. The server-side triggering is working, but on the client side, the trigger only works when I refreshes the page. Here's the App.js ->

    useEffect(() => {
    const pusher = new Pusher("xxxxxxxxxxxxxx", {
      cluster: "xxxxxxxx",
    });
    const channel = pusher.subscribe("xxxxxxx");
    channel.bind("xxxxxxxxxx", function (newMessage) {
      alert(newMessage);
    });
    return () => {
      channel.unbind_all();
      channel.unsubscribe();
    };
  }, [messages]);

Any help is greatly appreciated !