i want to controls my application UI using keyboard and i don’t know how to make this. (Video player app) I have redux store where i set state to controls. It then passes the state through props. Am I going in the right direction?

I have component PlayerUI, where it passes the state as props to PlayerUIBottomBar

const PlayerUI = ({ channels, actualChannel, hlsQualityLevels }: IProps) => {

...

 const handleKeyUp = async (e: KeyboardEvent) => {
        if (e.key === "ArrowUp") {
            dispatch(playerUIActions.setActualEpgIndex(0))
            dispatch(playerUIActions.decrementChannelToChangeIndex());
        }
        if (e.key === "ArrowDown") {
            dispatch(playerUIActions.setActualEpgIndex(0))
            dispatch(playerUIActions.incrementChannelToChangeIndex());
        }
        if (e.key === "ArrowLeft") {
            dispatch(playerUIActions.decrementActualEpgIndex())
        }
        if (e.key === "ArrowRight") {
            dispatch(playerUIActions.incrementActualEpgIndex())
        }
        dispatch(playerUIActions.setIsMenuVisible(true));
    }
useEffect(() => {
        dispatch(getChannelsAsync());
        window.addEventListener("mousemove", setIsMenuVisible);
        window.addEventListener("keyup", handleKeyUp);
        return () => { window.removeEventListener("mousemove", setIsMenuVisible); window.removeEventListener("keyup", handleKeyUp); }
    }, []);

return (
        <div className={`${playerUIState.isMenuUIVisible ? "opacity-100" : "opacity-0"} transition-opacity duration-500`}>
            <PlayerUITopBar hlsQualityLevels={hlsQualityLevels} />
            <PlayerUIBottomBar channels={channels} isScrollToEpgSmooth={isScrollToEpgSmooth} selectedChannelIndex={playerUIState.channelToChangeIndex} isMenuVisible={playerUIState.isMenuUIVisible} />
        </div>
    )

}

Component PlayerUIBottomBar. In this component, the first thing I do is scroll the list to the selected channel

export const PlayerUIBottomBar = ({ channels, isScrollToEpgSmooth = false, selectedChannelIndex, isMenuVisible }: IProps) => {
    const scrollChannel = (index: number, smooth: boolean = true) => {
        const channelToScrollElem = document.getElementById(index.toString());
        if (channelToScrollElem) {
            channelToScrollElem.scrollIntoView({
                behavior: smooth ? "smooth" : "instant"
            });
        }
    };
    if (isMenuVisible)
        {
            scrollChannel(selectedChannelIndex, true);}
    else
        setTimeout(() => {
            scrollChannel(selectedChannelIndex, false);
        }, 500);

return (
{channels
                        .filter((x) => x.enabled)
                        .map((channel, index) => (
                            <PlayerChannel
                                key={channel.ch_id}
                                channel={channel}
                                index={index}
                                handleClickChangeVideo={handleClickChangeVideo}
                                epgIndex={playerUIState.actualEpgIndex}
                                isSmoothScrollToEpg={isScrollToEpgSmooth}
                            />
}
)
}

if passing state via props is the right approach? Should I approach this differently? E.g. useeffect and a dependency table reacting to a state change and then scrolling to the selected channel?