Patternfly Yew UseStateHandle in Backdrop

main.rs

#![recursion_limit = "1024"]

use patternfly_yew::prelude::*;
use yew::prelude::*;

#[function_component(Application)]
pub fn app() -> Html {
    let title = use_state_eq(|| "This should change when you press the button".to_string());
    html! {
        <BackdropViewer>
            {(*title).clone()}
            <MyButton {title}/>
        </BackdropViewer>
    }
}

#[derive(Debug, Clone, PartialEq, Properties)]
struct MyButtonProps {
    title: UseStateHandle<String>,
}

#[function_component(MyButton)]
fn mybutton(props: &MyButtonProps) -> Html {
    let onclick = {
        let title = props.title.clone();
        let backdrop = use_backdrop().unwrap();
        Callback::from(move |_| {
            let title = title.clone();
            backdrop.open(Backdrop::new(html! {
                <Bullseye><MyModal {title}/></Bullseye>
            }))
        })
    };
    html! {
        <Button label="Click me" variant={ButtonVariant::Primary} {onclick}/>
    }
}

#[derive(Debug, Clone, PartialEq, Properties)]
struct MyModalProps {
    title: UseStateHandle<String>,
}

#[function_component(MyModal)]
fn mymodal(props: &MyModalProps) -> Html {
    let title = props.title.clone();
    
    // Creating the handle inside the backdrop view works fine,
    // we only have issues when cloning from our props
    // let title = use_state_eq(|| "This is the title".to_string());
    
    let onclick = {
        let title = title.clone();
        Callback::from(move |_| title.set("You changed it!".to_string()))
    };
    html! {
        <Modal title={(*title).clone()} variant={ModalVariant::Medium}>
            <Button variant={ButtonVariant::Primary} label="Change title" {onclick}/>
        </Modal>
    }
}

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