onKeyDown event not working as expected

I’m trying to capture the key pressed in a sp-textfield using the wrapper component with onKeyDown. The event only fires when non letter characters are pressed like the space bar and arrows. I see that onKeyPress is not supported in UXP, but there’s no mention of onKeyDown. onKeyUp is not firing an event at all. Here’s what I’m trying:
(This only logs non letter characters)

 const onKeyDownTest = (e) => {
    console.log('e ', e);
  };

 <WC onKeyDown={onKeyDownTest}>
   <sp-textfield
        id="name-0"
        placeholder="Type your comment here"
     ></sp-textfield>
 </WC>

I’ve also tried variations and they are all working the same way I mentioned above.

   <WC onKeyDown={onKeyDownTest}>
     <input />
   </WC>
   <input onKeyDown={onKeyDownTest} />

I’m using React and hooks and wondering if that has to do with it?

Everything I know about React hooks and UXP I read in this blog article… It might not be helpful.

Thank you. I tried converting the components to classes and got the same results, so I don’t think it has to do with hooks.

Input fields swallow most keystrokes; use the onInput event if you want to see what’s in the field. onKeyUp will only show you certain key presses like ArrowDown. If you use the kitchen sink plugin demo (w/o React), it will show the same behavior.