how to stop children elements from re-rendering when parent state change | Yew | Page 1

I think my way of rendering children cause them to re-render each time parent state change which is not what I want

#[function_component]
pub fn Center() -> Html {
    let stylesheet = css!(/* */);
    let tx = &*use_state(|| channel::<AppMessage>(100).0);
    let (_, this_peer_dispatch) = use_store::<ThisPeer>();
    let other_peers = use_reducer_eq(|| OtherPeers::default());
    {
        let tx = tx.clone();
        let other_peers = other_peers.dispatcher();
        use_effect_with_deps(
            move |()| {
                connection_manager(other_peers, this_peer_dispatch, tx);
            },
            (),
        );
    }
   html! {
    <center class={stylesheet}>
        if other_peers.peers.is_empty() {
            <no-peers>
                <h3>{"Open Shrut on other devices to send files"}</h3>
            </no-peers>

        } else {
            <instruction class="smallfont">
                {"Tap or click to send a file"}
            </instruction>
            <peers class="center">
                {display_peers(other_peers.clone(), tx.clone())}
            </peers>
        }
    </center>
    }
}

fn display_peers(other_peers: UseReducerHandle<OtherPeers>, tx: Sender<AppMessage>) -> Vec<Html> {
    other_peers
        .peers
        .iter()
        .map(|peer| {
            html! {
                <Avatar id={peer.id.clone()} name={peer.name.clone()} os={peer.os.clone()} role={peer.role.clone()} tx={tx.clone()} />
            }
        })
        .collect()
}```

I'm thinking about draining the vector for each avatar that get rendered, but then how do I remove the avatar when it's peer disconnect

#how to stop children elements from re-rendering when parent state change