Multiple Continuous API Requests Issue

I have created a WebChat UI in React using the botframework-directlinejs package. While subscribing to messages, the application is continuously sending multiple API requests. This is leading to performance issues and unnecessary load on the server.

Expected Behavior:
The application should only send API requests when necessary, such as when new messages are received.

Actual Behavior:
The application is continuously sending multiple API requests, as shown in the attached screenshot.

my code :
const subscribeToBotMessages = useCallback(() => {
if (!directLine) return;

directLine.connectionStatus$.subscribe((status) => {
  if (status === 2 && !conversationId) {
    localStorage.setItem("conversationId", directLine.conversationId);
    localStorage.setItem("token", directLine.token);
    localStorage.setItem("watermark", directLine.watermark);
  }
});

directLine.activity$
  .filter(
    (activity) =>
      activity.type === "message" && activity.from.id !== "myUserId"
  )
  .subscribe((message) => {
    const timestamp = new Date().toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
    });

    const newBotMessage = {
      from: "bot",
      botMessage: message,
      timestamp,
      liked: false,
      disliked: false,
      attachment:
        message.attachments && message.attachments.length > 0
          ? message.attachments.length === 1 && message.attachments[0]
          : null,
      carousel:
        message.attachments && message.attachments.length > 0
          ? message.attachments.length > 1 && message.attachments
          : null,
    };
    setLoading(false);
    if (message.text) {
      try {
        receiveAudioRef.current.play();
      } catch (error) {
        console.log("failed to play", error);
      }
    }
    setMessages((prevMessages) => [...prevMessages, newBotMessage]);
  });

directLine.activity$
  .filter(
    (activity) =>
      activity.type === "message" && activity.from.id === "myUserId"
  )
  .subscribe((message) => {
    const timestamp = new Date().toLocaleTimeString([], {
      hour: "2-digit",
      minute: "2-digit",
    });

    const newUserMessage = {
      from: "user",
      userMessage: message,
      timestamp,
      attachment: filePreview,
    };
    setMessages((prevMessages) => {
      // Check if the user message already exists
      if (
        prevMessages.some(
          (msg) => msg.timestamp === timestamp && msg.from === "user"
        )
      ) {
        return prevMessages;
      }
      return [...prevMessages, newUserMessage];
    });
  });

}, [directLine, conversationId]);

@billba

Start by reproducing the behavior with the supplied React subscription code and inspect how often subscribeToBotMessages is invoked and how activity$ subscriptions are created. Compare the resulting network requests with activity$ emissions and confirm that requests occur only when new messages are received, without duplicate subscriptions.