Component Not Updating when State Changes

[WarrenN1]

I have state for a Sidebar defined in sidebar.rs as such:

#[derive(Debug, Clone, PartialEq, Eq, Store)]
pub struct SidebarState
{
    pub open        : bool,
    pub active_menu : String,
}

My component is as follows in menu.rs:

#[derive(Properties, PartialEq)]
pub struct MenuHamburgerProps
{
    #[prop_or_default]
    children : Children,
}

#[function_component]
pub fn MenuHamburger(props : &MenuHamburgerProps)
-> Html
{
    let (state, dispatch) = use_store::<SidebarState>();
    let on_menu_click = dispatch.reduce_mut_callback(|state| 
        {
            state.open = !(state.open);
            log!("Sidebar open=", state.open);
        });
    html!
    {
        <div id="menu">
            <div id="menu-icon" onclick={on_menu_click}>
                <i className="fa fa-bars"></i>
            </div>
            if state.open
            {
                {props.children.clone()}
            }
            else
            {
                <div className="hidden">
                    {props.children.clone()}
                </div>
            }
        </div>
    }
}

It is then used later in main.rs via:

fn switch(routes: Route)
-> Html
{
    match routes
    {
        Route::Home => html! {<></>},
        Route::NotFound => html! { <h1>{ "404" }</h1> },
    }
}

#[function_component(Main)]
fn app_view()
-> Html
{
    return html!
    {
        <>
            <TopNavbar>
                <Sidebar>
                </Sidebar>
            </TopNavbar>
            <BrowserRouter>
                <Switch<Route> render={switch} />
            </BrowserRouter>
        </>
    };
}

fn main()
{
    yew::Renderer::<Main>::new().render();
}

The problem is that onclick it is not rendering the children of MenuHamburger outside of the hidden div even though the callback registers the state change (via console.log)