React Hooks onkeydown update - react-hooks

Question

I am having problems with the hooks in this code. For some reason, the maze updates only after changing the value in the input, when it should update the screen every time an arrow is pressed.
const [laberinto, setLab] = useState([])
const [wTemp, setWtemp] = useState(4)
const [hTemp, setHtemp] = useState(4)
let array = []
const Maze = () => {
fetch("https://maze.juanelcaballo.club/?type=json&w="+wTemp+"&h="+hTemp).then(response => {
return response.json();
}).then(responseInJSON => {
const lab = responseInJSON.map(obj1 => {
let objeto = "";
obj1.forEach(i => {
if (i == " ") {
objeto = objeto + " ";
} else {
objeto = objeto + i;
}
});
array.push(objeto)
});
});
setLab(array)
}
useEffect(() =>{
document.onkeydown = (e) => {
e = e || window.event;
if (e.key === 'ArrowUp') {
setLab(Movements(laberinto, "UP"))
} else if (e.key === 'ArrowDown') {
setLab(Movements(laberinto, "DOWN"))
} else if (e.key === 'ArrowLeft') {
setLab(Movements(laberinto, "LEFT"))
} else if (e.key === 'ArrowRight') {
setLab(Movements(laberinto, "RIGHT"))
}
}
});
console.log(laberinto)
return(
<div className="App">
<div className="bottom">
<h4>WxH:</h4>
<input type="number" id="w" name="w" defaultValue={wTemp} min="2" max="10" onChange={e => setWtemp(e.target.value)} />
<input type="number" id="h" name="h" defaultValue={hTemp} min="2" max="10" onChange={e => setHtemp(e.target.value)} />
<button className="button" onClick={(Maze)}>"NEW GAME"</button>
</div>
<Page laberinto={laberinto}/>
</div>
)
here i click leftarrow 3 times but didn't update the screen until I change from 2 to 3 at the input box.