Why is my React App not updating useState?

Question

I am trying to learn React by building a simple game that works with letters stored in an array of size 30. I am using useState variables to maintain both the array (initially all "_") and an integer index "nextIdx" for the next letter to be added. I added a listener for a keyboard "keyup" event using useEffect so the listener is added on the first render only. The problem is that my nextIdx variable is not properly incremented by the "setNextIdx" function in my "addLetter" function after each letter is added, or decremented in "deleteLetter" when the backspace key is pressed. What am I doing wrong?

export default function Game() {
  const firstRender = useRef(true);
  const [nextIdx,setNextIdx] = useState(0);
  const [letters,setLetters] = useState(Array(30).fill("_"));

  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      alert("First Render");
      document.addEventListener('keyup', (event) => {
        handleKey(event.key)
    });
    }
  })

  function handleKey(key) {
    if (key === "Backspace") {
      alert("Backspace key pressed");
      if (nextIdx > 0) {
        deleteLetter();
      }
    }
    else {
      let keyUpper = key.toUpperCase();
      if (keyUpper.match(/[A-Z]/)) {
        addLetter(keyUpper);
      }
    }
  }

  function addLetter(letter) {
    const copyLetters = letters.slice();
    copyLetters[nextIdx] = letter;
    setLetters(copyLetters);
    setNextIdx(nextIdx + 1);
  }

  function deleteLetter() {
    const copyLetters = letters.slice();
    setNextIdx(nextIdx - 1);
    copyLetters[nextIdx] = "_";
    setLetters(copyLetters);
  }

  return(
    **component html**
  );