Navigate around navigation bar using key event in react js - reactjs

Question

Hi my problem is I have done a react js web page I have a navigation bar and my default menu is home and I have 4 more menus beside home menu and now I want to apply keyevent to navigate to right and left of the navigation bar amd when i press up and down arrow keys the focus should move to down section of the navigation bar i mean to next div section has i mentioned in home.js the next div is banner of web page and next to banner is row of images(Tvshows component) and so on to navigate through all the div in the page.
Menu.js
import React, { useEffect, useState } from "react";
import { Menudata } from "./Menudata";
import ListItem from "./ListItem";
const useKeyPress = function (targetKey) {
const [keyPressed, setKeyPressed] = useState(false);
function downHandler({ key }) {
if (key === targetKey) {
setKeyPressed(true);
}
}
const upHandler = ({ key }) => {
if (key === targetKey) {
setKeyPressed(false);
}
};
React.useEffect(() => {
window.addEventListener("keydown", downHandler);
window.addEventListener("keyup", upHandler);
return () => {
window.removeEventListener("keydown", downHandler);
window.removeEventListener("keyup", upHandler);
};
});
return keyPressed;
};
const Menu = () => {
const [selected, setSelected] = useState(undefined);
const rightPress = useKeyPress("ArrowRight");
const leftPress = useKeyPress("ArrowLeft");
const [cursor, setCursor] = useState(0);
const [hovered, setHovered] = useState(undefined);
useEffect(() => {
if (Menudata.length && rightPress) {
setCursor((prevState) =>
prevState < Menudata.length - 1 ? prevState + 1 : prevState
);
}
}, [rightPress]);
useEffect(() => {
if (Menudata.length && leftPress) {
setCursor((prevState) => (prevState > 0 ? prevState - 1 : prevState));
}
}, [leftPress]);
useEffect(() => {
if (Menudata.length && hovered) {
setCursor(Menudata.indexOf(hovered));
}
}, [hovered]);
return (
<div className="Menu">
{Menudata.map((item, i) => (
<ListItem
key={item.id}
active={i === cursor}
item={item}
setSelected={setSelected}
setHovered={setHovered}
/>
))}
</div>
);
};
export default Menu;
Menudata.js
export const Menudata = [
{
name:"Home"
},
{
name:"TVshows"
},
{
name:"Originals"
},
{
name:"Movies"
},
{
name:"Sports"
},
{
name:"Premium"
}
]
Home.js
import React from "react";
import Tvshows from "./Tvshows";
import Originals from "./Originals";
const Home= () => {
const home = [
{ src: './images/tamil.jpg' },
{ src: './images/telugu.jpg' },
{ src: './images/malayam.jpg' },
{ src: './images/marathi.jpg' },
{ src: './images/hindi.jpg' },
{ src: './images/english.jpg' },
{ src: './images/bengali.jpg' },
{ src: './images/kannada.jpg' },
];
const largeimg=[
{ src: 'images/Undekhi_web_tray_dated_23march_rev (1).jpg' },
];
return (
<div className="row">
<div className="banner">
<div className="banner__contents">
<h1 className="banner__title"><h1>LIVE</h1> STREAMING</h1>
</div>
</div>
<div>
<Tvshows/>
</div>
<div className="row_images" >
<h1>Watch in your language</h1>
{
home.map((index) => <img src={index.src} alt="" height="180" width="155"></img>)
}
</div>
<div >
<Originals/>
</div>
<div className="row__largeimage" >
{
largeimg.map((index) => <img src={index.src} alt="" ></img>)
}
</div>
</div>
)
}
export default Home;