How come my react hook isn't acting as expected? Importing problem? Destructuring issue?

Question

Im trying to pass a state value into a component. Why is it working in one component and not working in another component in the same folder?

I have the hooks in here. Im trying to access "currentGuess". In this function I initialize the state of currentGuess to "", then the next part, "handleInput()", just sets the "currentGuess" to whatever you type in.

----------------------/src/hooks/useWordle.js----------------------

const useWordle = (solution) => {
  const [currentGuess, setCurrentGuess] = useState("");

  /* OTHER UNNECESSARY CODE TO QUESTION */

  const handleInput = ({ key }) => {
    if (key === "Enter") {
      if (turn > 5) {
        console.log("You used all your guesses!");
        return;
      }
      if (history.includes(currentGuess)) {
        console.log("You already tried that word!");
        return;
      }
      if (currentGuess.length !== 5) {
        console.log("Word must be 5 characters long!");
        return;
      }
      const formatted = formatGuessWord();
      console.log(formatted);
    }
    if (key === "Backspace") {
      setCurrentGuess((state) => {
        return state.slice(0, -1);
      });
    }

    if (/^[a-zA-z]$/.test(key))
      if (currentGuess.length < 5) {
        setCurrentGuess((state) => {
          return state + key;
        });
      }
  };
  return {
    currentGuess,
    handleInput,
  };
};

export default useWordle;

I can use it in here like this and it works no problem:

----------------------src/components/Wordle.js----------------------

import React, { useEffect } from "react";
import useWordle from "../hooks/wordleHooks.js";

function Wordle({ solution }) {
  const { currentGuess, handleInput } = useWordle(solution);
  console.log("currentGuess=", currentGuess);

  useEffect(() => {
    window.addEventListener("keyup", handleInput);

    return () => window.removeEventListener("keyup", handleInput);
  });

  return <div>Current guess: {currentGuess}</div>;
}

export default Wordle;

I thought this line was what allowed me to use "currentGuess". I destructured it.

const { currentGuess, handleInput } = useWordle(solution);

However when I place that line in this code, which is in the same folder as the above working code, "currentGuess" comes out undefined or empty.

----------------------/src/components/Key.js----------------------

import React, { useContext } from "react";
import { AppContext } from "../App";
import useWordle from "../hooks/wordleHooks.js";

export default function Key({ keyVal, largeKey }) {
  const { onSelectLetter, onDeleteKeyPress, onEnterKeyPress } =
    useContext(AppContext);
  const { currentGuess } = useWordle();

  const handleTypingInput = () => {
    console.log("Key.js - Key() - handleTypingInput() - {currentGuess}= ", {
      currentGuess,
    }); // COMES OUT "Object { currentGuess: "" }"
  };

If you made it this far thank you very much. Im new to this and hoping someone who knows what they are doing can see some glaring error I can fix. You don't even have to solve it for me but can you point me in the right direction? How do I get the "currentGuess" in the Key.js component?