React: How to use arrow up/down to select previous/next item in a scroll list and make the list scroll to keep the selected element on screen

I'm using react-infinite scroll list and i'm implemented an arrow up/down handler:

onKeyDown = (e) => {
    if(e.keyCode === 40){
        if (this.props.onKeyDown) {
            e.preventDefault()
            this.props.onKeyDown()
        }
    }
    else if (e.keyCode === 38) {
        if (this.props.onKeyUp) {
            e.preventDefault()
            this.props.onKeyUp()
        }
    }
}

(The component is reusable throughout my application so I pass the actual functions through props)

This works as far as selecting the next/previous item in the list. But when you reach the edge of the scroll list and keep going, the list doesn't scroll to keep the selected item in view. The selected item just disappears off screen.

Any help would be greatly appreciated!