React: Reading map from local storage returns null values

I am making a small game website where users choose between “easy, medium, and hard” difficulties and I am using a hook of type map to keep track of the guess count for each difficulty. I got it to work normally, but the problem is I want to save user’s guesses so if they come back the website will remember where they were at in the game similar to games like Wordle. However, the code below returns undefined if localstorage is empty when it should be returning 6 as shown below.

const Demo = () =>
{
    const [guessCount, setGuessCount] = useState(new Map()); // Key: [difficulty, count]

    const updateGuessCount = (key: string, value: any) =>
    {
        setGuessCount(map => new Map(map.set(key, value)));
    }

    useEffect(() => 
    {
        updateGuessCount("easy",  localStorage.getItem("easyGuessCount") || 6);
        updateGuessCount("medium", localStorage.getItem("mediumGuessCount") || 6);
        updateGuessCount("hard", localStorage.getItem("hardGuessCount") || 6);

    }, []);

    useEffect(() => 
    {
        localStorage.setItem("easyGuessCount", guessCount.get("easy"));
        localStorage.setItem("mediumGuessCount", guessCount.get("medium"));
        localStorage.setItem("hardGuessCount", guessCount.get("hard"));

    }, [guessCount]);
}

I expected for all the values to be 6 if there is localstorage is empty, but it instead returns undefined. The asynchronous behavior of useEffect() has been making this difficult to debug.