Transparent, unfocusable and clickable BrowserWindow in Electron

I am creating a button that is clickable but doesn't bring the app to the foreground. To achieve this I implemented the button as a separate BrowserWindow with focusable: false and its parent set to the original window (both the original window and my button window are transparent):

const buttonWin = new BrowserWindow({
        parent: containerWindow,
        show: false,
        width: 98,
        height: 24,
        frame: false,
        transparent: true,
        focusable: false,
        resizable: false,
        skipTaskbar: true,
        useContentSize: true,
        fullscreenable: false,
        minimizable: false,
        maximizable: false,
        hasShadow: false,
        acceptFirstMouse: false,
        alwaysOnTop: true,
        webPreferences: {
            preload: path.join(__dirname, '../preload.js'),
            contextIsolation: true,
        }
    });

This works perfectly fine in Windows but in Mac it behaves weirdly. I tested it by clicking the button when I had an open dropdown in an active window of another app. If I click on the extreme left of the button, the dropdown in another app remains open, but clicking it elsewhere closes the dropdown. To debug it I logged inside handleClick() of the button:

import { html, css, LitElement } from '../../ui/assets/lit-core-2.7.4.min.js';

export class ButtonView extends LitElement {
    static properties = {};

    static styles = css`

        * {
            font-family: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            cursor: default;
            user-select: none;
        }
            
        .button-blue {
            background: transparent;
            color: #00bfff;
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            height: 24px;
            min-width: fit-content;
            transition: background-color 0.15s ease;
            white-space: nowrap;
        }

        .button-blue:hover {
            background: rgba(255, 255, 255, 0.15);
        }

        .button-blue:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .button-blue:disabled:hover {
            background: transparent;
        }
    `;

    constructor() {
        super();
        this.handleClick = this.handleClick.bind(this);
    }

    async handleClick() {
        console.log('[ButtonView] document.hasFocus():', document.hasFocus());
        // My app logic 
    }

    render() {
        return html`
            <button class="button-blue" @click=${this.handleClick}>
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 18l6-6-6-6"/>
                </svg>
                Next
            </button>
        `;
    }
}

customElements.define('button-view', ButtonView);

In windows, clicking the button always gave [ButtonView] document.hasFocus(): false as expected. But in Mac clicking on it always gave [ButtonView] document.hasFocus(): true even when I clicked the button on the extreme left and the dropdown in my previously active app remained open. The button responds to clicks but brings my app into focus in Mac.

The button window is transparent and unfocusable but clickable. My code works well on windows, but how can I achieve this on Mac?