Electron titlebar interferes with mouse events

Question

I have customized my Electron app's titlebar to be hidden but still display the traffic lights. In it's place I have created a custom titlebar which is 45 pixels high and contains several interactive elements, mainly buttons. This is my BrowserWindow configuration:

{
    width: 2200,
    height: 1200,
    webPreferences:
    {
        nodeIntegration: true,
        preload: path.join(__dirname, './preload.js'),
    },
    autoHideMenuBar: true,
    frame: false,
    titleBarOverlay: { height: 0 },
    titleBarStyle: 'hidden',
    trafficLightPosition: {x: 10, y:10},
    show: false,
}

The buttons I have added to the titlebar are about 32 pixels high and have the cursor: pointer; style along with a background that changes from gray to white. Whenever I hover over them, the background color correctly changes from gray to white, however, the cursor only changes to a pointer when I place my house on the bottom half of the button. It does not change to a point when my mouse is at the top half. The exact same thing happens whenever I hover selectable text, my pointer only changes on the bottom half of the element.

In the screenshot seen below, the red area is where my pointer does not change, and the blue area is where my pointer correctly changes.

This bug does not happen when I hover over the button on the local server I use for Svelte, which is an address I can open in a web browser, meaning my CSS styling is not the issue.

Furthermore, when I don't hide the titlebar, or when set the titleBarStyle to default, the hover effects work just fine.

Based on the size of the button that doesn't work, I believe the titlebar could be "hidden" only visually and still be registering mouse events before my elements.

How can I track down what is causing this weird behavior?
Thank you for all the help.

Also, I am on macOS.