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)