WebChat - Direct Line Speech adapter error: WebSocket connection failed with 400

I have a Bot service running on Azure. I'm trying to voice enable the bot, however I keep getting Websocket connection error.

I have the echo-bot running on the server side. I followed this tutorial and I added a Direct Line Speech channel to the bot with a cognitive speech service on Azure portal. As the client, I used the sample Direct Line Speech sample. Here is the full code:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <script
      crossorigin="anonymous"
      src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
    <title>Speech Test</title>
          <style>
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
      }

      #webchat {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body >
    <div id="root"></div>
    <div id="webchat" role="main"></div>
    <script>
      (async function () {
        async function fetchCredentials(){
          const res = await fetch(
            "https://westeurope.api.cognitive.microsoft.com/sts/v1.0/issueToken",
            {
              method: "POST",
              headers: {
                "Ocp-Apim-Subscription-Key": `XXXXXXXXX`,
              },
            }
          );
          if (!res.ok) {
            throw new Error("Failed to fetch authorization token and region.");
          }
          return { authorizationToken: await res.text(), region: "westeurope" };
        };
        const adapters = await window.WebChat.createDirectLineSpeechAdapters({
          fetchCredentials
        });

        window.WebChat.renderWebChat(
          {
          ...adapters
          },
          document.getElementById("webchat")
        );
        document.querySelector("#webchat > *").focus();
      })().catch((err) => err);
    </script>
  </body>
</html>

What might be the reason for Websocket to fail? I appreciate any help.

Version

<meta name="botframework-directlinespeech:version" content="4.11.0">
<meta name="botframework-webchat:bundle:variant" content="full">
<meta name="botframework-webchat:bundle:version" content="4.11.0">
<meta name="botframework-webchat:core:version" content="4.11.0">
<meta name="botframework-webchat:ui:version" content="4.11.0">

Error

Firefox can’t establish a connection to the server at wss://westeurope.convai.speech.microsoft.com/api/v3?language=en-US&format=simple&Authorization=<XXXXXXXXXXXX>&X-ConnectionId=7047B4CE339E4DFDA5435664DEF8CE58