Tiptap with Tippy - bubble menu doesnt work

Question

I'm trying to create fixed bubble menu for my node using Tippy. First of all, I wanted to create this menu using BubbleMenu extension but then it changes its location when I change the cursor position inside of my menu. So I decided to wrap my NodeView into Tippy component. The problem is that it seems that something is wrong with that popover because when I click on the edges of the button then everything is fine but when I click the center (the icon), then my button is not highlighted (active) and the cursor position changes. Here are two videos which shows what happens when there is a paragraph below and when there is no paragraph - in both cases button is not active when I click inside of it and more importantly when there is a paragrap below, then the cursor position changes.

https://vimeo.com/852812634?share=copy

https://vimeo.com/852812704?share=copy

And here is my node view:

function PanelBubbleMenuContent({ editor }: { editor: any }) {
    return (
        <span>
            <div role="menu">
                <div className="mw-panel-bubble-menu d-flex ai-center">
                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor
                                .chain()
                                .focus()
                                .updateAttributes("panel", {
                                    panelType: PanelType.INFO,
                                })
                                .run();
                        }}
                    >
                        <InfoIcon color={getIconColor(PanelType.INFO)} />
                    </button>

                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor
                                .chain()
                                .focus()
                                .updateAttributes("panel", {
                                    panelType: PanelType.NOTE,
                                })
                                .run();
                        }}
                    >
                        {" "}
                        <NoteIcon color={getIconColor(PanelType.NOTE)} />
                    </button>
                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor
                                .chain()
                                // .focus()
                                .updateAttributes("panel", {
                                    panelType: PanelType.SUCCESS,
                                })
                                .run();
                        }}
                    >
                        <SuccessIcon color={getIconColor(PanelType.SUCCESS)} />
                    </button>

                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor
                                .chain()
                                // .focus()
                                .updateAttributes("panel", {
                                    panelType: PanelType.WARNING,
                                })
                                .run();
                        }}
                    >
                        <WarningIcon color={getIconColor(PanelType.WARNING)} />
                    </button>

                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor
                                .chain()
                                // .focus()
                                .updateAttributes("panel", {
                                    panelType: PanelType.ERROR,
                                })
                                .run();
                        }}
                    >
                        <ErrorIcon color={getIconColor(PanelType.ERROR)} />
                    </button>

                    <button
                        type="button"
                        className="flex--item s-btn mr4"
                        title=""
                        onClick={() => {
                            editor.chain().deleteNode("panel").run();
                        }}
                    >
                        <TrashIcon />
                    </button>
                </div>
            </div>
        </span>
    );
}

export function PanelNodeView({
    editor,
    node,
    updateAttributes,
    deleteNode,
}: NodeViewProps) {
    return (
        <Tippy
            className="mw-popover"
            trigger="click"
            animation="shift-toward-subtle"
            hideOnClick={false}
            content={<PanelBubbleMenuContent editor={editor} />}
            interactive={true}
            placement={"bottom"}
            onClickOutside={(instance) => {
                instance.hide();
            }}
        >
            <NodeViewWrapper
                as="div"
                className="mw-panel"
                data-panel-type={node.attrs.panelType}
                style={{ backgroundColor: getColor(node.attrs.panelType) }}
            >
                <div
                    className="mw-panel--icon"
                    contentEditable={false}
                    style={{ color: getIconColor(node.attrs.panelType) }}
                >
                    {getIcon(node.attrs.panelType)}
                </div>
                <NodeViewContent className="mw-panel--content" />
            </NodeViewWrapper>
        </Tippy>
    );
}