I'm trying to get this button to stop firing twice. I was able to achieve this with the addition of words, but the TTS is still speaking twice after every button press.

  const setPressedValue = (value: boolean) => {
    if (typeof window !== "undefined") {
      let utterance = new window.SpeechSynthesisUtterance();

      setPressed(value);
      if (word === "" || word === undefined) return;
      if (word === "Speak") {
        utterance.text = words.join(" ");
        speechSynthesis.speak(utterance);
        return;
      }
      if (word === "Clear") {
        clearWords();
        return;
      }
      if (!pressed && value) {
        if (word === "Delete") {
          removeWordFromEnd(words);
          return;
        }
        addWordToEnd(`${word}`);
      }
    }
  };

  return (
    <button
      type="button"
      className={clsx(
        "rounded-lg w-full h-full bg-gray-100",
        !pressed ? "card-shadow-off" : "card-shadow-on",
        className
      )}
      onTouchStart={() => setPressedValue(true)}
      onTouchEnd={() => setPressedValue(false)}
    >
      {children}
    </button>
  );
};

Edit: I already tried disabling strict mode
const nextConfig = { reactStrictMode: false };