how to popup the latex sub avaliable command when select the parent command when using codemirror6

Question

I am using the codemirror6 to implement an online latex editor, and defined the code completion in codemirror6 like this:

export function texAutoCompletions(context: CompletionContext) {
    let word = context.matchBefore(/\\[\w\\]*/);
    if (!word) return null;
    if (word.from === word.to && !context.explicit)
        return null
    return {
        from: word.from,
        options: [
            { 
                label: "\\begin{document}", 
                type: "text", 
                apply: "\\begin{document}", 
                detail: "env",
                info: (com: Completion) => ({
                    dom: document.createElement("div"), // Placeholder for actual content
                }),
                commitCharacters: [
                    "d",
                    "eeeee"
                ],
            },
            { label: "\\section{}", type: "text", apply: "\\section{}" },
            { label: "\\subsection{}", type: "text", apply: "\\subsection{}" },
            { label: "\\usepackage{}", type: "text", apply: "\\usepackage{}" },
            { label: "\\footnote{}", type: "text", apply: "\\footnote{}" },
        ]
    }
}

this function works fine, but now I want to popup the sub avalialbe command when select the current command. For example, when I choose the \usepackage command, after the command selected, auto popup the \usepackage command subcommand such as subfiles xcolor and so on. I have tried to nested the command like this:

info: (com: Completion) => ({
                        dom: document.createElement("div"), // Placeholder for actual content
                    }),

seems did not work. Am I missing something? what should I do to make it popup the next level avaliable command?