Scroll div using Arrow down key not works

Question

I am trying to scroll a div with keydown event in Reactjs. When user presses the arrow down key I set the scrollTop value like this:

 const onKeyDown = e => {
    if (e.key == "ArrowDown") {
    console.log(e)
    var elmnt = document.getElementsById('myDiv');
    elmnt.scrollTop += 40;
      }
    }

This work when I press the key just once. But, when I hold the key down, elmnt scrollTop not change. According to the number of event logs, the number of handleKeyDown runs are OK.