How can I use a custom hook in other custom hook?

I am building a roster management application.
I have built a roster viewer.

I have built a useRosterViewer hook for the roster viewer.

The source code is something like:

let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
        case "init":
            result.roster = action.roster;
            result.isLoading = false;
            break;
        ........... 
        default:
            break;
    }
    return result;
}
export function useRosterViewer() {
    const [itemList, updateItemList] = useReducer(reducer, {
        error: null,
        isLoading: true,
        roster: null,
        ............
    });
    useEffect(() => {
        let getData = async () => {
            let now = new Date();
            let rosterYear = now.getFullYear();
            let rosterMonth = now.getMonth();
            let roster = await Roster(rosterYear, rosterMonth + 1);
            updateItemList({
                roster,
                systemParam,
                type: "init"
            }); 
        }
        getData();
    },[]);
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,
        .............
    }
}

I am going to build a roster editor.
When I am building another hook such as useRosterEditor, the source code is something like:

export function useRosterEditor(){
    const { error, isLoading, roster } = useRosterViewer();
    const [itemList, updateItemList] = useReducer(reducer, {
        error,
        isLoading,
        roster,
    });
    return {
        error: itemList.error,
        isLoading: itemList.isLoading,
        roster: itemList.roster,     
    }
}

The useRosterEditor consumption component reports that the data has not been updated.
So, how can I reuse the useRosterViewer hook?