I am not able to compare the values of the state variables even though I am able to fetch their values in the rock-paper-scissor game

Please help me out with this:

I was making a react app for a rock-paper-scissors game where I was trying to evaluate whether the move made the user or bot the winner by comparing the values through a function written in check.js . But it seems the answer is always undefined. For understanding this issue, I tried to just compare an instance as you will be able to see below in App.js ‘s useEffect Hook. It only compares correctly when the state-variables are empty ( initial state ). The reference to the code section is given below where inside “useEffect” hook, the console.log should have printed draw but it returns nothing. The link to the sandbox project is given at the end as well.

    import { useEffect, useState } from 'react';
import './App.css';
import './App.css'
import Botchoice from './Components/Botchoice';
import Decision from './Components/Decision';
import Navbar from './Components/Navbar';
import Results from './Components/Results';
import Userchoice from './Components/Userchoice';
import game from './check'

function App() {

  let [userMove,setUserMove] = useState("");
  let [botMove,setBotMove] = useState("");
  let [loadRes, setLoadRes] = useState("");
  let [gameState,setGameState] = useState("");


  useEffect(() => {
          setTimeout(() => {
            console.log(userMove, botMove);
            
            if (userMove === "scizzor" && botMove === "scizzor") {
              console.log("draw");
            }

          }, 1000);
      },[userMove,botMove])


  const getUserMove = (move) => {

    setUserMove(()=> userMove = move);
    console.log("App comp: usermove --> " + userMove);

  }

  const getBotMove = (move) => {

    setBotMove(()=> botMove = move);
    console.log("App comp: botmove --> " + botMove);

  }

  const getLoadRes = (value) => {

      setLoadRes(()=> loadRes = value )
      console.log("updated state: " + loadRes);

  }

 
  
  return (
    <div className="App">
      
      <Navbar/>
      <Userchoice getUserMove={getUserMove} />
      <Botchoice getBotMove={getBotMove} />
      <Decision getLoadRes={getLoadRes} />

      {loadRes === "show" 
        ? <Results userMove={userMove} botMove={botMove} />
        : null
      }



    </div>
  );
}

export default App;

I have also attached the screenshot of the console inorder to show the values of userMove and botMove and yet how the if condition inside useEffect is unable to compare these values.

Screenshot of the console

Please help me out with this as I’m stuck as to what is causing this issue. Thanks

Here is the link to my sandbox of the rock-paper-scissors game