Некорректно работает функция из-за асинхронности React+Redux

Такая проблема. Есть код, в нем функция resultToColor().Код из пет-проекта, обычная игра в колесо красное-черное Функция выводит цвет, который пришел с сервера и ушел в redux-state. Сейчас она отрабатывает некорректно.

Задумка такая, у меня есть таймер на сервере которые передает значение по вебсокетам, когда timer = 0 вращается колесо, в этот момент с сервера приходят данные, угол на котором остановится колесо, число и цвет, когда колесо останавливается должен показаться цвет и выпавшее число, и вот почему то с цветом проблемы. В redux DevTools все отрабатывает корректно, а вот на клиенте отображается не правильно, после первого прокрута значение приходит null с редакса, хотя там нужный цвет, а все последующие прокруты выводят цвет предыдущего прокрута. Как я понял, дело в асинхронности, но сам решить не могу, очень долго сидел думал, все перепробовал, не выходит у меня, буду очень благодарен помощи. Сам код из react прикрепляю:

const FirstGame = ({ updateBalance, ...props }) => {
const [gameHistory, setGameHistory] = useState([]);
const [lastResult, setLastResult] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [amount, setAmount] = useState(0);

const itemsPerPage = 10;
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = lastResult.slice().reverse().slice(indexOfFirstItem, indexOfLastItem);

const dispatch = useDispatch();
const time = useSelector(selectTimer);
const isSpinning = useSelector(selectIsSpinning);
const timerIsActive = useSelector(selectTimerIsActive);
const value = useSelector(selectAngleValue);
const visibleNumber = useSelector(selectVisibleNumber);
const restartTimerDelay = useSelector(selectRestartTimerDelay);
const resultNumber = useSelector(selectResultNumber);
const resultColorIntoWheel = useSelector(selectResultColorIntoWheel);

useEffect(() => {
    socket.on('timerUpdate', (newTime) => {
        dispatch(setTimer(newTime));
    });
    socket.on('restartDelayUptade', (newDelay) => {
        dispatch(setRestartTimerDelay(newDelay));
    });

    return () => {
        socket.off('timerUpdate');
        socket.off('restartDelayUptade');
    };
}, [dispatch]);


const resultToColor = () => {
    let resultCircle = '';  
    switch (resultColorIntoWheel) {
        case 'yellow':  
            resultCircle = '#FFC32A';  
            break;  
        case 'green':  
            resultCircle = 'green';  
            break;  
        case 'black':  
            resultCircle = 'black';  
            break;  
        default:  
            resultCircle = 'grey';   
            break; 
}
document.getElementById('result').style.backgroundColor = resultCircle;    
}  



const handleSpinClick = async () => {  
    const response = await fetch('/game/gameWheel');  
    const data = await response.json();  
    console.log(data);
    
    dispatch(setAngleValue(data.randomAngle))
    dispatch(setResultNumber(data.number))
    dispatch(setResultColorIntoWheel(data.color))
    
    // setGameHistory(prev => [...prev, { number: data.number, color: data.color }]);
}
const resHistory = () => {
    fetch('/game/gameHistory', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())
        .then(data => {
            setLastResult(newResult => [...newResult, { rolled_number: data.rolled_number, color: data.color }]);
            
        })
        .catch(error => {
            console.error('Ошибка:', error);
        });
}


const spinWheel = async () => {  
    if (!isSpinning) {
        dispatch(setTimerIsActive(false))
        dispatch(setIsSpinning(true))
        await handleSpinClick()
        console.log('самый первый', resultColorIntoWheel);
        // спустя 9 сек
        setTimeout(() => {  
            dispatch(setIsSpinning(false))
            console.log('resultColorIntoWheel', resultColorIntoWheel);
            resultToColor() 
            console.log("resultColorIntoWheelAfter", resultColorIntoWheel);
            
            resHistory()
            dispatch(setTimerIsActive(true))
            dispatch(setVisibleNumber(true))
        }, restartTimerDelay * 1000)
    }
}; 

useEffect(() => {
    if (isSpinning) {
        document.getElementById('wheel').style.transform = `rotate(${value}deg)`
        dispatch(setVisibleNumber(false))
    }
}, [isSpinning, value, dispatch]);

useEffect(() => {  
    if (time === 0 && !isSpinning) {            
        const timerId = setTimeout(() => {
            spinWheel()
        }, 1000)

        return () => clearTimeout(timerId)
    }  
}, [isSpinning, timerIsActive, time, dispatch])