How to use multiple eventName to attach with event listner.

[Sam-Simplifed]

``
Use Case
I've created a hook name use usePusher and I want to attach two events with same channel name. I'm creating a chat application , where after login user directed to dashboard , which is tab in bottom tab navigator. My application also have a inbox tab, where user can see received or sent messages. After login I am passing channel name and eventName which is "Notification-Count" in the usePusher hook inside dashboard which will update the count badge on inbox icon tab. Once I go to inbox , I'm registering another eventName which is "New-Message" , which I am using to show the new message in realtime.

Issue
When I navigate to dashboard and registering the "Notification-Count" event, it's working fine . I'm receiving the updated count. But when I go to inbox screen, "New-Message" event replacing the "Notification-Count" event. I'm receiving the new messages but notification event not working
Here's my code for custom hook for registering the event.

`import {useEffect} from 'react';
import {PUSHER_KEY, PUSHER_CLUSTER} from '@env';
import {Pusher} from '@pusher/pusher-websocket-react-native';

const usePusher = (channelName, eventName, onEvent) => {
useEffect(() => {
const pusher = Pusher.getInstance();

const initPusher = async () => {
  try {
    await pusher.init({
      apiKey: PUSHER_KEY,
      cluster: PUSHER_CLUSTER,
    });

    await pusher.subscribe({
      channelName,
      eventName,
      onEvent,
      onSubscriptionSucceeded,
      onSubscriptionError,
      onSubscriptionCount: count => {
        console.log('count:', count);
      },
      onError: error => {
        console.log('error:', error);
      },
    });
    console.log('pusher connected');
    await pusher.connect();
  } catch (e) {
    console.log(`ERROR: ${e}`);
  }
};

initPusher();
return () => {
  console.log('disconnecting from pusher');
  // pusher.disconnect();
};

}, [channelName, eventName]);

const onSubscriptionSucceeded = () => {
console.log(channelName + ' ' + eventName + ' subscription succeeded');
};
const onSubscriptionError = error => {
console.log(channelName + ' subscription error:', error);
};
return null;
};

export default usePusher;
`

[endruuu]

init function will remove all listeners and adding the new ones.
I would suggest you use Context to initialize the pusher so that it's only initialized once.