React store problem using easy peasy, unexpcted rendering mess up the model in store

Question

When I call an action, first time data is loaded perfectly fine. Component re-renders again and messes up the state.

Default State

menu_detail: {
    error: null,
    menu_id: 0,
    detail: {}
  }

Working State

menu_detail: {
    error: null,
    menu_id: 2,
    detail: {
      menu: {
        ...
    }
  }

After unexpected render

menu_detail: { }

My Code

    const setMenuDetail = useStoreActions(actions => actions);
    const getMenuDetail = useStoreActions(actions => actions.menu_detail.getMenuDetail);
    const setMenuId = useStoreActions(actions => actions.menu_detail.setMenuId);
    const menu_id = useStoreState(state => state.menu_detail.menu_id);
    const menu = useStoreState(state => state.menu_detail.detail.menu);
    // const menu_option_categories = useStoreState(state => state.menu_detail.menu_detail.menu_option_categories);
    const { data } = props.location;
    React.useEffect(() => {
        setMenuId(parseInt(data));
        getMenuDetail();
    }, [menu]);
    ...

Answer 1

I Updated React.useEffect() to :

React.useEffect(() => {
        setMenuId(parseInt(data));
        getMenuDetail(2);
    }, []);

Now it works.