I'm building a React application that connects to AWS IoT via MQTT. I'm using Amazon Cognito for authentication and obtaining credentials from an Identity Pool.

Despite successful authentication and credential retrieval, the MQTT client remains offline and does not receive messages.

import { useEffect, useState, useMemo } from "react";
import mqtt from "mqtt";
import { SignatureV4 } from "@aws-sdk/signature-v4";
import { Sha256 } from "@aws-crypto/sha256-browser";
import { HttpRequest } from "@aws-sdk/protocol-http";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-providers";
import { useAuth } from "react-oidc-context";

// AWS IoT Configuration
const AWS_REGION_IOT = "XXXX";
const AWS_REGION_POOL = "XXXX";
const IOT_ENDPOINT = "XXXX.iot.XXXX.amazonaws";
const IDENTITY_POOL_ID = "XXXX:XXXX-XXXX-XXXX-XXXX-XXXXXXXX";

// Define MQTT message structure
interface MqttMessage {
  status: string;
  progress: number;
  id_job?: string;
  error?: number;
}

type MqttMessagesState = Record<string, MqttMessage>;

const useMQTT = (): MqttMessagesState => {
  const [mqttMessages, setMqttMessages] = useState<MqttMessagesState>({});
  const auth = useAuth();

  // Ensure token is available before proceeding
  const idToken = useMemo(() => auth.user?.id_token || "", [auth.user]);

  useEffect(() => {
    if (!auth.isAuthenticated || !idToken) {
      console.warn("❌ User is not authenticated. Cannot connect to MQTT.");
      return;
    }

    console.log("