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?