Issue in connecting to bot service via Directline channel

Question

I have the integrated "botframework-webchat" package for my web chat panel, I'm generating token using directline secret and creating direcline object using it. Note: I have grped the directline secret from Azure Bot Service in the directline channel.

In my react app, I'm using "ReactWebChat" component from "botframework-webchat" and passing directline object to it.

import React, { useEffect, useMemo, useState } from "react";
import ReactWebChat, { createDirectLine } from "botframework-webchat";
import "./webchat.css";
import { StyleOptions } from "botframework-webchat/lib/index-minimal";
import { FlexBox, Icon, Title } from "@ui5/webcomponents-react";
import "@ui5/webcomponents-icons/dist/arrow-left.js";
import { ReactComponent as BotButton } from "./assets/bot_button.svg";
import { ReactComponent as BotLogo } from "./assets/bot_logo.svg";

export default function WebChat() {
  const [showChat, setShowChat] = useState(false);
  const [directLine, setDirectLine] = useState<any>();
  const [token, setToken] = useState("");

  useMemo(async () => {
    if(token) {
    setDirectLine(createDirectLine({ token }));    
    }
  }, [token]);

  useEffect(() => {
    const getToken = async () => {
      const tokenObj = window.sessionStorage.getItem("directlineToken");
      if (tokenObj === null) {     
        const res = await fetch(
          "https://commandb.azurewebsites.net/api/config"
        );
        const { token } = await res.json();
        window.sessionStorage.setItem("directlineToken", token);     
        setToken(token);
      } else {
        setToken(tokenObj);
      }
    };
    getToken();
  }, []);

   <ReactWebChat
            directLine={directLine}
            role="main"
            className={"webchatMain"}
            styleOptions={styleOptions}
          />

/* I'm using it like this*/

Directline object connection status should be changed to "Online". In my case it always showing "Connecting".