UseEffect not being called

const MqttProvider = ({ children, options }: Props) => {
  const [mqtt, setMqtt] = useState<MqttClient>();
  const [connected, setConnected] = useState(false);

  const onConnect = () => {
    setConnected(true);
  };

  const onClose = () => {
    setConnected(false);
  };

  const initMqtt = async () => {
    try {
      const broker = await getBroker();

      const newMqtt = connect(broker, options);
      newMqtt.setMaxListeners(0);
      newMqtt.on("connect", onConnect);
      newMqtt.on("close", onClose);
      newMqtt.on("error", onClose);
      setMqtt(newMqtt);
    } catch (e) {
      console.error(e);
    }
  };

  useEffect(() => {
    initMqtt();
  }, []);

  useEffect(() => {
    console.log(mqtt?.connected);
  }, [mqtt?.connected]);

  return (
    <MqttContext.Provider value={{ mqtt }}>{children}</MqttContext.Provider>
  );
};