Over complicated arrow component?

code review
1

Dear community.
My program, a Desktop app using YEW + Tauri, I have #[function_component(ArrowContainer)] inside #[function_component(VideosList)], which again is inside #[function_component(MainMenu)] like so:

#[function_component(MainMenu)]
pub fn main_menu() -> Html {
//snippet of code
let div_ref = use_focus_div();
let handle_keydown_toggle = get_toggle_key(&demo_videos, current_video_index.clone());
html! {
        //styling of page mainly found in molecules::video_list
        <div onkeydown={restart_app} onkeydown={press_r_for_about} tabindex="0">
            <div ref={div_ref} onkeydown={handle_keydown_toggle} tabindex="0"> 
                <VideosList videos={demo_videos} current_index={*current_video_index} on_ended={Some(handle_video_ended)} video_class="smallscreenvideo"/> 
                <DanceOMaticLogo class="top-right-logo"/>
                <BtnExplainerGraphics />
            </div>
        </div>
    }
}

div ref={div_ref} sets focus on handle_keydown_toggle on mount

#[function_component(ArrowContainer)] has props: &ArrowContainerProps

#[derive(Properties, PartialEq)]
pub struct ArrowContainerProps {
    #[prop_or_default]
    pub class: Classes,
    #[prop_or(true)]
    pub show_top_arrow: bool,
    #[prop_or(true)]
    pub show_bottom_arrow: bool,
    #[prop_or_default]
    pub default_size: u32, // Default size for the arrows
    #[prop_or(false)]
    pub is_interactive: bool, // Whether arrow size should respond to keyboard input
}

ISSUE
My code compiles, but the arrow logos are not focused on div. More importantly: I feel I've gone down a path where I've over complicated code in src/components/atoms/arrow_respnd_ui.rs. I just want the arrow up and arrow down to react simultanously with buttonpress from src/components/molecules/keydown_logic.rs : handle_keydown_toggle

You can find the full code here:

Any suggestions and concrete feedback are much appreciated :star_struck: