How to render a vector stored as a state variable and set in a use_effect?

[wiseaidev]

Hey everyone. I am trying to render a vector. However, I am getting this error:

error[E0382]: borrow of moved value: `features`
   --> src/components/banner.rs:55:14
    |
13  |     let features = use_state(|| vec![]);
    |         -------- move occurs because `features` has type `yew::UseStateHandle<Vec<Feature>>`, which does not implement the `Copy` trait
14  |
15  |     use_effect_with_deps(move |_| {
    |                          -------- value moved into closure here
16  |       let dispatch = dispatch.clone();
17  |       let features = features.clone();
    |                      -------- variable moved due to use in closure
...
55  |               {features
    |  ______________^
56  | |             .iter()
    | |___________________^ value borrowed here after move

The component I built;

use crate::api::assets::get_features;
use crate::api::types::Feature;
use crate::store::set_page_loading;
use crate::store::set_show_alert;
use crate::store::Store;
use yew::prelude::*;
use yewdux::prelude::*;

#[function_component(Banner)]
pub fn banner_section() -> Html {
  let (store, dispatch) = use_store::<Store>();
  let features = use_state(|| vec![]);

  use_effect_with_deps(move |_| {
    let dispatch = dispatch.clone();
    wasm_bindgen_futures::spawn_local(async move {
      set_page_loading(true, dispatch.clone());
      let response = get_features().await;
      match response {
        Ok(data) => {
          set_page_loading(false, dispatch.clone());
          features.clone().set(data.data);
        }
        Err(e) => {
          set_page_loading(false, dispatch.clone());
          set_show_alert(e.to_string(), dispatch);
        }
      }
    });
  }, ());
  html! {
        <div class="section-features-main" id="features">
          <div class="wrapper">
            <div class="features">
            {features
            .iter()
            .map(|feature| {
                html! {
                  <div class="features-item" key={feature.clone().id}>
                    <div class="features-decor"></div>
                    <div class="features-icon">
                      <img
                        src={feature.clone().icon}
                        alt=""
                        loading="lazy"
                      />
                    </div>
                    <div class="features-title">{feature.clone().title}</div>
                    <div class="features-text">
                    {feature.clone().description}
                    </div>

            </div>
                }
            })
            .collect::<Vec<_>>()
            }
            </div>
          </div>
        </div>
    }
}

I am trying to fetch data from an endpoint and set the response into the features vector state. However, I wonder why I am getting this error, and using features.clone().iter() instead of features.iter() didn't work.

Note: I am new to Rust, I know a little about memory management in Rust, but a proficient fella in React and its ecosystem. I am transitioning into the Rust world. Probably, I am not going back to coding in javascript, again!

Edit: It seems like move took ownership of the features state variable, and features.iter() is outside the move and probably trying to change it, that's why it threw this error. However, the value of features is not changing outside move. Then, why complain though?