Reactjs – useEffect only updates DOM on subsequent update

I’m new to React and I find useEffect’s behavior a little confusing. I’ve written a simple hangman game (where the user tries to guess a word or phrase one letter at a time). I made a useEffect hook to update the board with each guess (generated by user input), and count wrong guesses.

Weirdly, the DOM only updates on subsequent updates. For example, say the user guesses ‘T’, then ‘X’. Only after the ‘X’ guess will the board populate with all the ‘Ts’.

Even stranger, when I add a random variable that increases by 1 each time useEffect runs, it works as expected.

For my own learning, I want to understand why this is happening, and how to resolve it in a not hacky way.

Below is my code – let me know if I’m missing any information.
Game.jsx

import Board from './Board'
import Input from './Input'
import { useState, useEffect } from 'react'

export default function Game() {
    const answer = ['I', 'F', ' ', 'T', 'H', 'E', 'R', 'E', 'S', ' ', 'A', ' ', 'W', 'I', 'L', 'L', ' ', 'T', 'H', 'E', 'R', 'E', 'S', ' ', 'A', ' ', 'W', 'A', 'Y']
    const [board, setBoard] = useState(new Array(answer.length).fill(' '))
    const [guess, setGuess] = useState('')
    const [count, setCount] = useState(0)
    const [state, setState] = useState(0)
    let newBoard = board

    useEffect(() => {
        let miss = true
        setState(state + 1) // hack to make useeffect work correctly
        answer.map((letter, index) => {
            if (guess == letter) {
                newBoard[index] = letter
                miss = false
            }
        })
        if (miss) { setCount(count + 1) }
        setBoard(newBoard)  
    }, [guess])

    return(
        <> 
            <Input guess={guess} setGuess={setGuess} />
            <Board board={board} answer={answer} />
        </>
    );
}

Input.jsx

import { useRef, useState } from "react";

export default function Input(props) {
    const inputRef = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
        props.setGuess(inputRef.current.value.toUpperCase())      
    }

    return (
        <form onSubmit={handleSubmit}>
            <input 
                type="text"
                ref={inputRef}
                placeholder="Make a guess"
                maxLength="1"
            />
            <button type="submit">Enter</button>
        </form>
    );
}

Board.jsx

import Box from './Box'
import './assets/Board.css'

export default function Board(props) {
    const board = props.board
    const answer = props.answer

    return (
        <div className='board'>
            {board.map((letter, index) => <Box key={index} value={letter} isSpace={answer[index] == ' '} />)}
        </div>
    );
}

Box.jsx

import './assets/Box.css'

export default function Box(props) {
    const value = props.value
    const isSpace = props.isSpace

    return (
        <div className={`box ${isSpace && ' is-space'}`}>{value}</div>
    )
}