Keyboard shortcuts not working

[idling-mind]

hi,
Thanks for this great library!

I am trying to create a component for plotly dash using kbar. https://github.com/idling-mind/dash_kbar

I am able to run it without any issues for the most part. However, for some reason, the keyboard shortcuts defined for the actions are not working. The keyboard shortcut for kbar itself is working fine (ctlr + k, escape), but the action shortcuts are not. The actions and the shortcuts are registered fine. I can see the shortcut key combinations appearing against each entry in the list.

Below is snippet of code where I use KBar. What am I doing wrong? Any pointer on debugging will also be of great help!

   ...
    return (
        <KBarProvider id={id} options={{disableScrollbarManagement: true}}>
            <KBarPortal>
                <KBarPositioner>
                    <KBarAnimator
                        style={{
                            maxWidth: mergedStyle.maxWidth,
                            width: mergedStyle.width,
                            borderRadius: '8px',
                            overflow: 'hidden',
                            boxShadow: '0 0 20px rgba(0, 0, 0, 0.1)',
                            background: mergedStyle.background,
                            color: 'grey',
                            fontFamily: mergedStyle.fontFamily,
                        }}
                    >
                        <KBarSearch
                            style={{
                                padding: '12px 16px',
                                fontSize: '16px',
                                width: '100%',
                                boxSizing: 'border-box',
                                outline: 'none',
                                border: 'none',
                                background: mergedStyle.searchBackground,
                                color: mergedStyle.searchTextColor,
                            }}
                        />
                        <RenderResults {...props} mergedStyle={mergedStyle} />
                        <ActionRegistration
                            actions={actions}
                            setProps={setProps}
                            debug={debug}
                        />
                    </KBarAnimator>
                </KBarPositioner>
            </KBarPortal>
            {children}
        </KBarProvider>
    );
};

function ActionRegistration(props) {
    const action_objects = props.actions.map((action) => {
        if (action.noAction) return createAction(action);
        action.perform = () => {
            if (props.debug) {
                console.log('Performing action', action);
            }
            props.setProps({selected: action.id});
        };
        return createAction(action);
    });
    useRegisterActions(action_objects);
    return null;
}