I have two states I have created using useReducer hook, which I am updating on key press, one is typeData and other is systemData.

On first key press, the typeData is updated and updatedValues are consoled in useEffect() with typeData dependency but any function I call after update is still showing old typeData values.

This is how I created reducers

const [typeData, typeDispatch] = useReducer(mainReducer, {});
const [systemData, systemDispatch] = useReducer(systemReducer, {});

This is my main reducer.

function mainReducer(state, action)
    {
        switch(action.type){
            case 'overallUpdate':
                console.log('Overall Update Called!', action.data)
                return action.data;
            default:
                console.log(`Action type: ${action.type} not expected!`)
                return state;
        }
    }

I am updating a array in typeData with three values to later have only one value

typeDispatch({type:"overallUpdate", data:{lanes:rPos,complete:nComplete, incomplete:nIncomplete,currentLane:-1, aKeys:nKeys, extraText:nExtraText}});

Updating value correctly showing in console with useEffect():

 useEffect(()=>{console.log("Type Data updated!"+a++,typeData.aKeys);},[typeData])

Old values are again shown even when the following function is called after state update with event keyup

function removeKeyFromSystem(e)
    {
        if(!systemData.keyPressed) return;
        if(!systemData.keyPressed.includes(e.key)) return;
        let copData = {...typeData};
        console.log("Copied Data "+a+" ",copData);
        systemDispatch({type:"removeKey", data:e.key});
    }