How to use the @blueprintjs/docs-theme.createKeyEventHandler function in @blueprintjs/docs-theme

value={value}
                />
                {children}
            
        );
    }

    private handleClickEvent = (e: React.SyntheticEvent) => {
        this.inputElement.select();
        document.execCommand("copy");
        this.setState({ hasCopied: true });
        Utils.safeInvoke(this.props.onClick, e);
    };

    // tslint:disable-next-line:member-ordering
    private handleKeyDown = createKeyEventHandler(
        {
            all: this.props.onKeyDown,
            [Keys.SPACE]: this.handleClickEvent,
            [Keys.ENTER]: this.handleClickEvent,
        },
        true,
    );

    private handleMouseLeave = (e: React.SyntheticEvent) => {
        this.setState({ hasCopied: false });
        Utils.safeInvoke(this.props.onMouseLeave, e);
    };
}

private renderPalette(palette: string[], key: number, diverging?: boolean) {
        const colors = this.generateColorPalette(palette, diverging, 5);
        const swatches = colors.map((hex: string, i: number) => (
            <div style="{{">
        ));

        const classes = classNames("docs-color-palette", {
            selected: key === this.state.activePalette,
        });
        const clickHandler = this.handlePaletteChange.bind(this, key);
        const keyDownHandler = createKeyEventHandler(
            {
                [Keys.SPACE]: clickHandler,
                [Keys.ENTER]: clickHandler,
            },
            true,
        );

        return (
            <div tabindex="{0}">
                {swatches}
            </div>
        );
    }
}</div>