New notifications not being received by the socket connection

const NotificationProvider = ({ children }: { children: React.ReactNode }) => {
    const [notifications, setNotifications] = useState<IMessage[]>([])
    const { cacheConfig } = useAppStore()
    const [loading, setLoading] = useState(false)
    const headlessServiceRef = useRef<HeadlessService | null>(null)
    const [pageNum, setPageNum] = useState(0)
    const [fetchNotifsError, setFetchNotifsError] = useState(false)
    const fetchNotifications = useCallback(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.fetchNotifications({
                listener: ({ isError, isLoading, status }) => {
                    if (isError) {
                        setFetchNotifsError(true)
                    }
                    setLoading(isLoading)
                },
                onSuccess: response => {
                    setFetchNotifsError(false)
                    setHasMore(response.hasMore)
                    setLoading(false)
                    setNotifications(response.data)
                },
                onError(error) {
                    setLoading(false)
                },
                page: pageNum,
            })
        }
    }, [pageNum, cacheConfig?.host])
    useEffect(() => {
        const headlessService = new HeadlessService({
            applicationIdentifier: process.env.REACT_APP_NOVU_APPLICATION_ID || "",
            subscriberId: cacheConfig?.host,
        })

        headlessService.initializeSession({
            listener: res => {},
            onSuccess: session => {
                headlessServiceRef.current = headlessService
                fetchNotifications()
                fetchUnread()
            },
            onError: error => {
                console.log("headless error:", error)
                setFetchNotifsError(true)
            },
        })
    }, [fetchNotifications, cacheConfig?.host])

    
    useEffect(() => {
        const headlessService = headlessServiceRef.current
        if (headlessService) {
            headlessService.listenNotificationReceive({
                listener(message) {
// !THIS LISTENER FN IS NOT BEING CALLED DESPITE NOTIFICATIONS BEING TRIGGERRED SUCCESSFULLY FROM THE DASHBOARD
                    console.log(message)

                    // Do something with message
                    }
                },
            })
        }
    }, [cacheConfig?.host])
    
    return (
        <NotificationContext.Provider
            value={{
                notifications,
                pageNum,
                fetchNotifications,
                hasMore,
                loading,
                unread,
                fetchNotifsError,
            }}
        >
            {children}
        </NotificationContext.Provider>
    )
}
const useNotification = () => useContext(NotificationContext)
export { useNotification, NotificationProvider }