How do I detect key press in the TreeView's children nodes?

I got a tree like this:

  <TreeView
        sx={style}
        id="xxx"
        aria-label="files"
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        expanded={expanded}
        onNodeToggle={handleToggle}
        onNodeSelect={handleSelect}
        onKeyDown={e => console.log('key press!!')}
    >
        {output}
    </TreeView>

where output is an array of JSX.Element[]

const output:JSX.Element[] = [];

args.nodeid++;

for(const msg of item.msgs) {
    const idstr = args.nodeid.toString();
    output.push(
        <TreeItem
            key={idstr}
            nodeId={idstr}
            label={msg.content}
            icon={getIco(msg.kind)}
         />
    )
    args.nodeid++;
}

but whenever I type a key in any of the children nodes, it doesn't work. even If I add something like:

output.push(
        <TreeItem
            key={idstr}
            nodeId={idstr}
            label={msg.content}
            icon={getIco(msg.kind)}
            onKeyDown={e => console.log('key press from child!!')}
         />
    )

How do I fix this? What am I missing?