My text value is getting empty every time in React

Question

This is my code here I am trying to get the value of input of the webchat using refs. In the below code const message is always empty and in the stop function the focus doesn't focus as soon as I click stop.

I am using azure speech.

**Edit:** 
const WebChatRef = React.createRef();

function App() {

const currentWebchat = WebChatRef.current as HTMLDivElement | null;
  const textBox = currentWebchat?.querySelector(
    ".webchat__send-box-text-box__input"
  ) as any;
  const textBoxRef = useRef(null);
  textBoxRef.current = textBox;

**Initial Code:** 

const [recognizing, setRecognizing] = useState(false);
  const [recognizer, setRecognizer] = useState<SpeechRecognizer | undefined>(
    undefined
  );
  // const [val, setVal] = useState("")

  const textBoxHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
  //@ts-ignore
  const message = textBox?.value.trim();
        console.log('message at enter', message);

      if (message) {
        empwc.sendMessage(message);
      }
    }
    console.log("e", e);
  };

  const startButton = () => {
    if (textBox) {
      textBox.removeEventListener("keyup", textBoxHandler as any);
      textBox.addEventListener("keyup", textBoxHandler as any);
    }
    if (recognizing) {
      stop();
      setRecognizing(false);
    } else {
      setRecognizing(true);
      if(textBox) {
        textBox.value = "";
      }
      console.log("record");

      const audioConfig = AudioConfig.fromDefaultMicrophoneInput();

      const speechConfig = SpeechConfig.fromSubscription(
        SUBCRIPTION_KEY,
        SPEECH_REGION
      );
      speechConfig.speechRecognitionLanguage = "en-US";
      speechConfig.enableDictation();

      const recognizer = new SpeechRecognizer(speechConfig, audioConfig);
      recognizer.recognizing = recognizerCallback;
      recognizer.recognized = recognizerCallback;

      setRecognizer(recognizer);
      recognizer.startContinuousRecognitionAsync();
    }
  };

  const recognizerCallback = (s: any, e: any) => {
    const speechText = e.result.text;
    const reasonIndex = e.result.reason;
    console.log("e.result", e.result);

    if (speechText) {
      switch (reasonIndex) {
        case ResultReason.RecognizedSpeech:
          textBox.value += speechText;
          console.log('value',textBox.value)
          break;
        default:
          break;
      }
    }
  };

  const stop = () => {
    if (recognizer) {
      recognizer.stopContinuousRecognitionAsync(
        () => {
          recognizer.close();
          setRecognizer(undefined);
          if (textBoxRef.current) {
            textBox.focus();
          }
          console.log("stopped");
        },

        (err: any) => {
          console.error(err);
        }
      );
    }
  };
}

HTML code

<div
                className=""
                id="webchat"
                ref={WebChatRef as React.RefObject<HTMLDivElement>}
                style={{ display: tab === "home" ? "block" : "none" }}
                role="main"
              >

Everything is fine but when I try to get the value of textbox on WebchatRef, everytime I get empty value.

Edit: attaching a photo of rendered Input text field of webchat on DOM