How to use the botframework-webchat.createCognitiveServicesSpeechServicesPonyfillFactory function in botframework-webchat

componentWillReceiveProps(nextProps) {
    if (nextProps.speechServicesOptions !== this.props.speechServicesOptions) {
      createCognitiveServicesSpeechServicesPonyfillFactory(nextProps.speechServicesOptions).then(speechServicesPonyfill => {
        this.setState(() => ({ speechServicesPonyfill }));
      });
    }
  }

async componentDidMount() {
    const res = await fetch('https://webchat-mockbot.azurewebsites.net/directline/token', { method: 'POST' });
    const { token } = await res.json();
    const webSpeechPonyfillFactory = await createCognitiveServicesSpeechServicesPonyfillFactory({
      authorizationToken: fetchSpeechServicesToken,
      region: await fetchSpeechServicesRegion()
    });

    this.setState(() => ({
      directLine: createDirectLine({
        token
      }),
      webSpeechPonyfillFactory
    }));
  }

useEffect(() => {
    if (speech === 'bingspeech') {
      createCognitiveServicesBingSpeechPonyfillFactory({
        authorizationToken: () => fetchAndMemoizeBingSpeechAuthorizationToken(Date.now())
      }).then(webSpeechPonyfillFactory => setWebSpeechPonyfillFactory(() => webSpeechPonyfillFactory));
    } else if (speech === 'speechservices') {
      const webSpeechPonyfillFactory = createCognitiveServicesSpeechServicesPonyfillFactory({
        authorizationToken: () => fetchAndMemoizeSpeechServicesAuthorizationToken(Date.now()),
        region: 'westus2'
      });

      setWebSpeechPonyfillFactory(() => webSpeechPonyfillFactory);
    } else {
      setWebSpeechPonyfillFactory(() => createBrowserWebSpeechPonyfillFactory());
    }
  }, [speech, setWebSpeechPonyfillFactory]);