titleBarOverlay option breaks draggable window in Electron.js

I’m trying to use the titleBarOverlay option in electron.js but when I try to drag the window, it won’t drag. When I remove the option, the dragging feature works like normal. Is there a workaround for this?

index.js:

const { app, BrowserWindow } = require('electron');
let mainWindow;

app.on('ready', () => {
     mainWindow = new BrowserWindow({
          height: 600,
          width: 800,
          title: "Last Horizon",
          titleBarStyle: 'hidden',
          titleBarOverlay: {
              color: '#2e2e2e',
              symbolColor: '#ff6d4b'
          },
          webPreferences: {
             nodeIntegration: true
          }
     });
     mainWindow.removeMenu()
     mainWindow.loadFile('src/index.html');
});

index.html:

<!DOCTYPE html>
<html lang="en">
     <head>
          <link rel="stylesheet" href="styles.css"/>
     </head>
     <body>
          <div class="titleBar"></div>
          <div class="main">
               <h1>Hello World!</h1>
          </div>
     </body>
</html>

styles.css

html, body {
     -webkit-app-region: drag;
     background-color: #2e2e2e;
     color: white;
}

.titleBar {
     /* -webkit-app-region: drag; */
     background-color: #ffffff;
     width: 100%;
     height: 32px;
}