MQTT.JS example: the useEffect return cause client closure

Why this is a good first issue

The useEffect cleanup prematurely closes the MQTT client.

AI Summary

The issue involves the `useEffect` cleanup in the `useMqtt` hook closing the MQTT client when the component unmounts, making it unusable on other pages. The fix requires modifying the cleanup logic to avoid premature closure. No major blockers are apparent.

Issue Description

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

the useEffect return cause client closure and so the mqtt client is not usable in the other pages. 

return () => {
      if (client) {
        topicHandlers.forEach((th) => {
          client.unsubscribe(th.topic);
        });
        client.end();
      }
    };

Which example does this report relate to?

mqtt.js

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

the useEffect return cause client closure and so the mqtt client is not usable in the other pages.

Expected Behavior

the useEffect return cause client closure and so the mqtt client is not usable in the other pages.

To Reproduce

Use the example

GitHub Labels

examples