Hello I'm not sure how to get around this issue that I've been having. Any help would be appreciated.

Basically I have an async server component that I'm using to await an async call to fetch some JSON for a puzzle from some logic on the server. I'm passing this puzzle down to a client component called GameView.

Inside of GameView I have a game over useState boolean hook which for some reason is not getting passed down to the child Puzzle component. The Puzzle component takes 3 props: the puzzle, gameOver, and setGameOver. The puzzle is getting it's way down to the Puzzle component just fine and I'm rendering it properly.

However, when the user finishes the puzzle I want to call the setGameOver(true) to update the gameOver boolean in GameView, but it seems like the gameOver and setGameOver props are undefined for some reason in Puzzle. I even tried wrapping the Puzzle component with a context provider in the GameView component to pass the gameOver and setGameOver down to the Puzzle component, however, they both show up as undefined.

Here is some blanket code to better illustrate the issue I'm having
NOTE: Puzzle component (actually called GuessingGrid)

export default async function MainPage() {

    const puzzle: Puzzle = getDailyPuzzle()

    return (
        <div className={oswald.className}>
            <Navbar />
            <GameView puzzle={puzzle} />
        </div>
    )
}

'use client'

export interface GameViewProps {
    puzzle: Puzzle
}

export default function GameView({ puzzle }: GameViewProps) {

    const [gameOver, setGameOver] = useState(false)

    return (
        <div className={"flex justify-center items-center bg-stone-200 h-[100vh]"}>
            <GuessingGrid puzzle={puzzle} gameOver={gameOver} setGameOver={setGameOver} />
        </div>
    )

}

'use client'

export interface GuessingGridProps {
    puzzle: Puzzle
    gameOver: boolean
    setGameOver: (gameOver: boolean) => void
}

export default function GuessingGrid({ puzzle, gameOver, setGameOver }: GuessingGridProps) {

    console.log(puzzle) // WORKS!
    console.log('Game over', gameOver) // undefined
    console.log('Set Game over', setGameOver) // undefined

    return (
      <div>
        { /* Rendering code omitted for simplicity */ }
      </div>
    )
}

If it does have to do with mixing the gameOver and setGameOver with the puzzle which was retrieved from a server component, then how would I replicate such functionality?

Thanks for the help! 😄