Pubnub receiving duplicate messages in one channel, but not in another channel

Question

Business Code:

const NodeDetails = (): React.Node => {
  ......
  return (
    <Suspense fallback={<Loader loaded={false} />}>
      <Pubnub_A />
      <Content
        ......
      />
    </Suspense>
  );

function Content(): React.Node {
  ......
  return (
    <>
       <Pubnub_B />
       ......
    </>
  );

Pubnub_A:

export default function Pubnub_A(): null {
  pubNubSub({
    namespace: "test_A",
    namespaceId: "test_namespaceId",
    event: "DONE",
    callback: () => {
      console.log('Pubnub_A')
    },
  });
  return null;
}

Pubnub_B:

export default function Pubnub_B(): null {
  pubNubSub({
    namespace: "test_B",
    namespaceId: "test_namespaceId",
    event: "DONE",
    callback: () => {
      console.log('Pubnub_B')
    },
  });
  return null;
}

pubNubSub:

export type Sub = {
  namespace: string,
  namespaceId?: ?string,
  event?: ?string,
  callback: EventCallback,
};

export default function pubNubSub(
  sub: Sub
) {
  const subs = useMemo(() => [sub], [sub]);

  const {client} = useContext(PubNubContext);

  useEffect(() => {
      const ids = subs.map(sub =>
        {
          return client.subscribe(
          {
            namespace: sub.namespace,
            namespaceId: sub.namespaceId,
            event: sub.event,
          },
          sub.callback
        )
        }
      );
      return function clear() {
        ids.forEach(id => {
          client.unsubscribe(id);
        });
      };
  }, [subs, client]);
}

In Business Code, Pubnub_A receives one message, but Pubnub_B receives duplicate message when I refresh the page. If I put Pubnub_A and Pubnub_B together, like:

const NodeDetails = (): React.Node => {
  ......
  return (
    <Suspense fallback={<Loader loaded={false} />}>
      <Pubnub_A />
      <Pubnub_B />
      <Content
        ......
      />
    </Suspense>
  );

function Content(): React.Node {
  ......
  return (
    <>
       ......
    </>
  );

or

const NodeDetails = (): React.Node => {
  ......
  return (
    <Suspense fallback={<Loader loaded={false} />}>
      <Content
        ......
      />
    </Suspense>
  );

function Content(): React.Node {
  ......
  return (
    <>
      <Pubnub_A />
      <Pubnub_B />
       ......
    </>
  );

Both Pubnub_A and Pubnub_B receive one message.

If I delete Pubnub_A in origin Business Code, Pubnub_B receive one message.

It seems that Pubnub_A and Pubnub_B can't be in different components. Or the later will receive duplicate messages.

I want to know why it happens and how to make Pubnub_A and Pubnub_B receive one message in origin code. Thanks!