electron: Using the back/forward buttons on the mouse don't update the same history stack that webcontents uses

Preflight Checklist

I have read the Contributing Guidelines for this project.
I agree to follow the Code of Conduct that this project adheres to.
I have searched the issue tracker for an issue that matches the one I want to file, without success.

Issue Details

Electron Version: 9.0.0 - 9.0.4 at least
Operating System: Windows 10
Last Known Working Electron version: not sure

Expected Behavior

I expect that pressing back or forward with my mouse will update the same stack of history that webContents.goBack() / webContents.goForward() uses.

Actual Behavior

They don’t, so pressing the back button on the mouse will add a new history entry to the webcontents.

To Reproduce

npm start the app below
navigate google to some page
press the back button on the mouse
I would expect that the back button that I added is now disabled, but it’s not. Pressing the back button will take you back the search page and pressing it again takes you back to Google.
Now the back and forward buttons on the mouse are messed up and don’t do anything

main.js:

(async () => {
  const {app, BrowserWindow, BrowserView, ipcMain, webContents} = require("electron");
  const { join } = require("path");

  await app.whenReady()

  const window = new BrowserWindow({
    webPreferences: {
      sandbox: false,
      nodeIntegration: true
    }
  });

  window.removeMenu();

  await window.loadFile(join(__dirname, "./index.html"));
  const browserView = new BrowserView({
    webPreferences: {
      sandbox: true,
      nodeIntegration: false
    }
  });
  window.setBrowserView(browserView);

  const contentBounds = window.getContentBounds();
  browserView.setBounds({ x: 0, y: 30, width: contentBounds.width, height: contentBounds.height - 30 });
  browserView.setAutoResize({ width: true, height: true });

  await browserView.webContents.loadURL("https://google.com");
  window.webContents.send("sendId", browserView.webContents.id);

  browserView.webContents.on("did-navigate", () => {
    window.webContents.send("canNav", browserView.webContents.canGoBack(), browserView.webContents.canGoForward());
  });

  ipcMain.on("goBack", (e, webContentsId) => {
    const wc = webContents.fromId(webContentsId);
    if (wc && wc.canGoBack()) {
      wc.goBack();
    }
  });

  ipcMain.on("goForward", (e, webContentsId) => {
    const wc = webContents.fromId(webContentsId);
    if (wc && wc.canGoForward()) {
      wc.goForward();
    }
});
})();

index.html:

<html>

<body>
	<div id="toolbar">
		<button id="back" disabled>Back</button>
		<button id="forward" disabled>Forward</button>
	</div>

	<script src="./renderer.js"></script>
</body>

</html>

renderer.js:

const { ipcRenderer } = require("electron");

const backButton = document.getElementById("back");
const forwardButton = document.getElementById("forward");

let webContentsId = -1;
ipcRenderer.on("sendId", (e, id) => {
	webContentsId = id;
});

ipcRenderer.on("canNav", (e, canBack, canForward) => {
	backButton.disabled = !canBack;
	forwardButton.disabled = !canForward;
});

backButton.onclick = () => {
	ipcRenderer.send("goBack", webContentsId);
};

forwardButton.onclick = () => {
	ipcRenderer.send("goForward", webContentsId);
};